# amaancoderx/npxskillui architecture

> Architecture diagram of the GitHub repository amaancoderx/npxskillui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amaancoderx/npxskillui
- Repository: https://github.com/amaancoderx/npxskillui

## Overview

SkillUI is a local CLI that reverse-engineers design systems from websites, local projects, or public repositories, then emits design references and Claude-ready skill files. The main workflow selects an input mode, extracts design evidence, normalizes it into a profile, optionally enriches website scans with Playwright-based visual analysis, and writes the result. The README documents capabilities beyond the sampled excerpts; those branches are included where the tree supports them, while uncertain internal wiring is omitted.

Main entry points: [`src/modes/ultra.ts`](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/ultra.ts) (Ultra mode), [`src/modes/dir.ts`](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/dir.ts) (Directory mode), [`src/modes/url.ts`](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/url.ts) (URL mode), [`src/cli.ts`](https://github.com/amaancoderx/npxskillui/blob/main/src/cli.ts) (CLI dispatcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Input modes"]
  node_cli["CLI dispatcher<br/>[cli.ts]"]
  node_urlmode["URL mode<br/>[url.ts]"]
  node_dirmode["Directory mode<br/>[dir.ts]"]
  node_repomode["Repository mode<br/>[repo.ts]"]
end

subgraph group_extract["Static extraction"]
  node_framework["Framework detection<br/>[framework.ts]"]
  node_webcss["HTTP CSS extraction<br/>[http-css.ts]"]
  node_computed["Computed tokens<br/>[computed.ts]"]
  node_css["CSS token scan<br/>[css.ts]"]
  node_tailwind["Tailwind scan<br/>[tailwind.ts]"]
  node_tokenfile["Token-file scan<br/>[tokens-file.ts]"]
  node_components["Component scan<br/>[components.ts]"]
  node_normalize["Profile normalization<br/>[normalizer.ts]"]
  node_profile["Design profile<br/>[types.ts]"]
end

subgraph group_visual["Visual analysis"]
  node_ultramode["Ultra mode<br/>[ultra.ts]"]
  node_screens["Scroll screenshots<br/>[pages.ts]"]
  node_interactions["Interaction diffs<br/>[interactions.ts]"]
  node_layouts["Layout analysis<br/>[layout.ts]"]
  node_domcomponents["DOM fingerprinting<br/>[components-dom.ts]"]
  node_animations["Animation analysis<br/>[animations.ts]"]
end

subgraph group_output["Design outputs"]
  node_designmd["Design documentation<br/>[design-md.ts]"]
  node_skillwriter["Skill packaging<br/>[skill.ts]"]
  node_fontresolver["Font bundling<br/>[font-resolver.ts]"]
  node_tokensjson["Token JSON<br/>[tokens-json.ts]"]
  node_visualwriters["Visual references"]
end

node_user(("CLI user"))
node_website(("Target website"))
node_gitrepo(("Git repository"))
node_claude(("Claude Code user"))

node_user -->|"runs command"| node_cli
node_cli -->|"selects URL mode"| node_urlmode
node_cli -->|"selects dir mode"| node_dirmode
node_cli -->|"selects repo mode"| node_repomode
node_urlmode -->|"fetches site"| node_website
node_urlmode -->|"parses HTML/CSS"| node_webcss
node_urlmode -.->|"inspects styles"| node_computed
node_urlmode -.->|"enables ultra"| node_ultramode
node_repomode -->|"clones repository"| node_gitrepo
node_repomode -->|"scans clone"| node_dirmode
node_dirmode -->|"detects frameworks"| node_framework
node_dirmode -->|"scans stylesheets"| node_css
node_dirmode -->|"scans Tailwind"| node_tailwind
node_dirmode -->|"reads token files"| node_tokenfile
node_dirmode -->|"finds components"| node_components
node_dirmode -->|"normalizes findings"| node_normalize
node_webcss -->|"provides raw tokens"| node_normalize
node_computed -->|"provides computed tokens"| node_normalize
node_normalize -->|"produces profile"| node_profile
node_ultramode -->|"captures journeys"| node_screens
node_ultramode -->|"captures states"| node_interactions
node_ultramode -->|"extracts layout"| node_layouts
node_ultramode -->|"fingerprints DOM"| node_domcomponents
node_ultramode -->|"detects motion"| node_animations
node_ultramode -->|"writes tokens"| node_tokensjson
node_ultramode -->|"writes references"| node_visualwriters
node_profile -->|"renders design guide"| node_designmd
node_profile -->|"builds skill files"| node_skillwriter
node_skillwriter -->|"bundles fonts"| node_fontresolver
node_skillwriter -->|"refreshes guide"| node_designmd
node_designmd -->|"documents system"| node_claude
node_skillwriter -->|"packages skill"| node_claude

click node_cli "https://github.com/amaancoderx/npxskillui/blob/main/src/cli.ts"
click node_urlmode "https://github.com/amaancoderx/npxskillui/blob/main/src/modes/url.ts"
click node_dirmode "https://github.com/amaancoderx/npxskillui/blob/main/src/modes/dir.ts"
click node_repomode "https://github.com/amaancoderx/npxskillui/blob/main/src/modes/repo.ts"
click node_ultramode "https://github.com/amaancoderx/npxskillui/blob/main/src/modes/ultra.ts"
click node_framework "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/framework.ts"
click node_webcss "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/http-css.ts"
click node_computed "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/computed.ts"
click node_css "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/css.ts"
click node_tailwind "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/tailwind.ts"
click node_tokenfile "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/tokens-file.ts"
click node_components "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/components.ts"
click node_normalize "https://github.com/amaancoderx/npxskillui/blob/main/src/normalizer.ts"
click node_screens "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/pages.ts"
click node_interactions "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/interactions.ts"
click node_layouts "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/layout.ts"
click node_domcomponents "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/components-dom.ts"
click node_animations "https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/animations.ts"
click node_profile "https://github.com/amaancoderx/npxskillui/blob/main/src/types.ts"
click node_designmd "https://github.com/amaancoderx/npxskillui/blob/main/src/writers/design-md.ts"
click node_skillwriter "https://github.com/amaancoderx/npxskillui/blob/main/src/writers/skill.ts"
click node_fontresolver "https://github.com/amaancoderx/npxskillui/blob/main/src/font-resolver.ts"
click node_tokensjson "https://github.com/amaancoderx/npxskillui/blob/main/src/writers/tokens-json.ts"
click node_visualwriters "https://github.com/amaancoderx/npxskillui/tree/main/src/writers"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_cli,node_urlmode,node_dirmode,node_repomode,node_user,node_claude toneBlue
class node_framework,node_webcss,node_computed,node_css,node_tailwind,node_tokenfile,node_components,node_normalize,node_profile toneAmber
class node_ultramode,node_screens,node_interactions,node_layouts,node_domcomponents,node_animations toneMint
class node_designmd,node_skillwriter,node_fontresolver,node_tokensjson,node_visualwriters toneRose
class node_website,node_gitrepo toneIndigo
```

## Components

### Input modes

- [CLI dispatcher](https://github.com/amaancoderx/npxskillui/blob/main/src/cli.ts): `src/cli.ts`
- [URL mode](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/url.ts): `src/modes/url.ts`
- [Directory mode](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/dir.ts): `src/modes/dir.ts`
- [Repository mode](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/repo.ts): `src/modes/repo.ts`

### Static extraction

- [Framework detection](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/framework.ts): `src/extractors/framework.ts`
- [HTTP CSS extraction](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/http-css.ts): `src/extractors/tokens/http-css.ts`
- [Computed tokens](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/computed.ts): `src/extractors/tokens/computed.ts`
- [CSS token scan](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/css.ts): `src/extractors/tokens/css.ts`
- [Tailwind scan](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/tailwind.ts): `src/extractors/tokens/tailwind.ts`
- [Token-file scan](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/tokens/tokens-file.ts): `src/extractors/tokens/tokens-file.ts`
- [Component scan](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/components.ts): `src/extractors/components.ts`
- [Profile normalization](https://github.com/amaancoderx/npxskillui/blob/main/src/normalizer.ts): `src/normalizer.ts`
- [Design profile](https://github.com/amaancoderx/npxskillui/blob/main/src/types.ts): `src/types.ts`

### Visual analysis

- [Ultra mode](https://github.com/amaancoderx/npxskillui/blob/main/src/modes/ultra.ts): `src/modes/ultra.ts`
- [Scroll screenshots](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/pages.ts): `src/extractors/ultra/pages.ts`
- [Interaction diffs](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/interactions.ts): `src/extractors/ultra/interactions.ts`
- [Layout analysis](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/layout.ts): `src/extractors/ultra/layout.ts`
- [DOM fingerprinting](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/components-dom.ts): `src/extractors/ultra/components-dom.ts`
- [Animation analysis](https://github.com/amaancoderx/npxskillui/blob/main/src/extractors/ultra/animations.ts): `src/extractors/ultra/animations.ts`

### Design outputs

- [Design documentation](https://github.com/amaancoderx/npxskillui/blob/main/src/writers/design-md.ts): `src/writers/design-md.ts`
- [Skill packaging](https://github.com/amaancoderx/npxskillui/blob/main/src/writers/skill.ts): `src/writers/skill.ts`
- [Font bundling](https://github.com/amaancoderx/npxskillui/blob/main/src/font-resolver.ts): `src/font-resolver.ts`
- [Token JSON](https://github.com/amaancoderx/npxskillui/blob/main/src/writers/tokens-json.ts): `src/writers/tokens-json.ts`
- [Visual references](https://github.com/amaancoderx/npxskillui/tree/main/src/writers): `src/writers`

### Other components

- **CLI user**
- **Target website**
- **Git repository**
- **Claude Code user**

## Connections

- CLI user → CLI dispatcher: runs command
- CLI dispatcher → URL mode: selects URL mode
- CLI dispatcher → Directory mode: selects dir mode
- CLI dispatcher → Repository mode: selects repo mode
- URL mode → Target website: fetches site
- URL mode → HTTP CSS extraction: parses HTML/CSS
- URL mode → Computed tokens: inspects styles
- URL mode → Ultra mode: enables ultra
- Repository mode → Git repository: clones repository
- Repository mode → Directory mode: scans clone
- Directory mode → Framework detection: detects frameworks
- Directory mode → CSS token scan: scans stylesheets
- Directory mode → Tailwind scan: scans Tailwind
- Directory mode → Token-file scan: reads token files
- Directory mode → Component scan: finds components
- Directory mode → Profile normalization: normalizes findings
- HTTP CSS extraction → Profile normalization: provides raw tokens
- Computed tokens → Profile normalization: provides computed tokens
- Profile normalization → Design profile: produces profile
- Ultra mode → Scroll screenshots: captures journeys
- Ultra mode → Interaction diffs: captures states
- Ultra mode → Layout analysis: extracts layout
- Ultra mode → DOM fingerprinting: fingerprints DOM
- Ultra mode → Animation analysis: detects motion
- Ultra mode → Token JSON: writes tokens
- Ultra mode → Visual references: writes references
- Design profile → Design documentation: renders design guide
- Design profile → Skill packaging: builds skill files
- Skill packaging → Font bundling: bundles fonts
- Skill packaging → Design documentation: refreshes guide
- Design documentation → Claude Code user: documents system
- Skill packaging → Claude Code user: packages skill