How amaancoderx/npxskillui works
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: ultra.ts Ultra mode · dir.ts Directory mode · url.ts URL mode · cli.ts CLI dispatcher
Components 28
Input modes
- CLI dispatcher
src/cli.ts - URL mode
src/modes/url.ts - Directory mode
src/modes/dir.ts - Repository mode
src/modes/repo.ts
Static extraction
- Framework detection
src/extractors/framework.ts - HTTP CSS extraction
src/extractors/tokens/http-css.ts - Computed tokens
src/extractors/tokens/computed.ts - CSS token scan
src/extractors/tokens/css.ts - Tailwind scan
src/extractors/tokens/tailwind.ts - Token-file scan
src/extractors/tokens/tokens-file.ts - Component scan
src/extractors/components.ts - Profile normalization
src/normalizer.ts - Design profile
src/types.ts
Visual analysis
- Ultra mode
src/modes/ultra.ts - Scroll screenshots
src/extractors/ultra/pages.ts - Interaction diffs
src/extractors/ultra/interactions.ts - Layout analysis
src/extractors/ultra/layout.ts - DOM fingerprinting
src/extractors/ultra/components-dom.ts - Animation analysis
src/extractors/ultra/animations.ts
Design outputs
- Design documentation
src/writers/design-md.ts - Skill packaging
src/writers/skill.ts - Font bundling
src/font-resolver.ts - Token JSON
src/writers/tokens-json.ts - Visual references
src/writers
Other components
- CLI user
- Target website
- Git repository
- Claude Code user
Connections 32
- 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