amaancoderx/npxskillui

---

One-shotted Notion’s landing page in minutes with a single line prompt

https://github.com/user-attachments/assets/4d6b63f1-8042-44a2-8f4f-a92fedadcaf9

---

What is SkillUI?

SkillUI is a CLI that crawls any website, git repo, or local codebase and extracts its complete design system - colors, typography, spacing, animations, components, screenshots - packaged into a folder Claude Code reads automatically.

Open the output folder, type claude, and ask Claude to build your UI. It already knows the exact design system.

---

Install

npm install -g skillui

Requires Node.js 18+

For ultra mode (full visual extraction with Playwright):

npm install playwright
npx playwright install chromium

---

Quick Start

# 1. Extract a design system from any URL
skillui --url https://notion.so

# 2. Open the output folder in Claude Code
cd notion-design && claude

# 3. Ask Claude to build your UI
"Build me a landing page that matches this design system"

Claude automatically reads CLAUDE.md and SKILL.md - no manual setup needed. It uses the extracted colors, typography, spacing, components, animations, and screenshots to generate an HTML file matching the exact visual language of the site.

---

Modes

Default mode - pure static analysis

Extracts HTML, CSS, fonts, color tokens, spacing, and typography. Works on any site, no browser required.

skillui --url https://linear.app

Ultra mode - full cinematic extraction

Uses Playwright to capture scroll screenshots, interaction diffs, animation detection, layout analysis, and DOM component fingerprinting.

skillui --url https://linear.app --mode ultra

Dir mode - local project scan

Scans .css, .scss, .ts, .tsx, .js, .jsx for design tokens, Tailwind config, CSS variables, and component patterns.

skillui --dir ./my-app

Repo mode - clone and scan

Clones any public git repository and runs dir mode automatically.

skillui --repo https://github.com/org/repo

---

What You Get

---

Output Structure

notion-design/
├── notion-design.skill       # Packaged .skill ZIP (contains everything)
├── SKILL.md                  # Master skill file (auto-loaded by Claude)
├── CLAUDE.md                 # Claude Code project context
├── DESIGN.md                 # Full design system tokens
├── references/
│   ├── ANIMATIONS.md         # Motion specs and keyframes
│   ├── LAYOUT.md             # Layout containers and grid
│   ├── COMPONENTS.md         # DOM component patterns
│   ├── INTERACTIONS.md       # Hover/focus state diffs
│   └── VISUAL_GUIDE.md       # All screenshots embedded in sequence
├── screens/
│   ├── scroll/               # 7 scroll journey screenshots
│   ├── pages/                # Full-page screenshots (ultra)
│   └── sections/             # Section clip screenshots (ultra)
├── tokens/
│   ├── colors.json
│   ├── spacing.json
│   └── typography.json
└── fonts/                    # Bundled Google Fonts (woff2)

---

All Flags

skillui --url            Crawl a live website
skillui --dir           Scan a local project directory
skillui --repo           Clone and scan a git repository

--mode ultra                  Enable cinematic extraction (requires Playwright)
--screens                  Pages to crawl in ultra mode (default: 5, max: 20)
--out                   Output directory (default: ./)
--name                Override the project name
--format design-md|skill|both Output format (default: both)
--no-skill                    Output DESIGN.md only, skip .skill packaging

---

Examples

# Full ultra extraction - Nothing.tech
skillui --url https://nothing.tech --mode ultra --screens 10

# Scan a local Next.js app
skillui --dir ./my-nextjs-app --name "MyApp"

# Clone and analyze a public repo
skillui --repo https://github.com/vercel/next.js --name "Next.js"

# Output only DESIGN.md, no .skill packaging
skillui --url https://stripe.com --format design-md

# Save to a specific directory
skillui --url https://linear.app --out ./design-systems

---

Package Info

Version History

---

How It Works

SkillUI uses pure static analysis. No AI, no API keys, no cloud - everything runs locally.

• URL mode - fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection
• Dir mode - scans .css, .scss, .ts, .tsx, .js, .jsx for design tokens, Tailwind config, CSS variables, and component patterns
• Repo mode - clones the repo to a temp directory and runs dir mode
• Ultra mode - runs Playwright to capture scroll screenshots, detect animation libraries from window.* globals, extract @keyframes from document.styleSheets, capture hover/focus state diffs, fingerprint DOM components

---

Requirements

• Node.js 18+
• For --mode ultra: Playwright (npm install playwright && npx playwright install chromium)

---

Links

• npm package
• Landing page
• Source code
• Issues

---

License

MIT - built by Amaan