Claude Code writes solid markup but tends to reinvent the same look every time. SkillUI attacks that by handing the model a real brand to imitate — extracted from any live site with zero AI in the loop.
What SkillUI pulls from any site — and what the ZIP contains
SkillUI is a CLI that ingests a live site, a GitHub repo, or a local directory and extracts its design system — colors, typography, spacing, animations, and components — through pure static analysis, with no AI calls and no API key in any path . Version v1.3.4 (repo amaancoderx/npxskillui, MIT, 100% TypeScript, ~992 stars as of May 2026) exposes three capture modes .
| Mode | What it scans |
|---|---|
--url | Crawls the page HTML and its linked CSS |
--dir | Scans .css/.scss/.ts/.tsx/.js/.jsx plus Tailwind config and CSS variables |
--repo | Clones the repository, then runs --dir |
The output is a .skill ZIP containing a SKILL.md, CLAUDE.md, a DESIGN.md token file, a references/ folder (ANIMATIONS.md, LAYOUT.md, COMPONENTS.md, INTERACTIONS.md, VISUAL_GUIDE.md), JSON tokens, screenshots, and bundled Google Fonts . An optional Ultra mode adds Playwright screenshot capture, animation detection, and interaction-state diffing — surfacing motion and hover behavior that pure CSS parsing misses .
The problem it solves is what Anthropic calls "distributional convergence": asked to build UI with no direction, models sample the statistical center of their training data and reproduce the same tells — Inter font, purple-to-blue gradients, card-in-card layouts, and a rounded-square icon tile above every heading . By feeding Claude a captured reference distribution instead of its default one, SkillUI addresses the match-an-existing-brand case that generation-time taste skills alone cannot.
Minimum bar: a JS runtime (18+) and npm
SkillUI's only hard requirement is Node.js 18+ with npm, installed globally via npm install -g skillui . The --url and --dir capture paths pull in no other global dependencies: URL mode crawls a site's HTML and linked CSS, and dir mode scans .css/.scss/.ts/.tsx files plus Tailwind config and CSS variables . Ultra mode provisions its own Playwright browser on first run for screenshot capture and animation detection — no manual browser install step . For --repo mode, git must be on your PATH so SkillUI can clone before running dir analysis; public repositories need no access token.
How to clone any brand's color and typography with SkillUI
Cloning a brand's visual system is a four-step CLI flow: install SkillUI globally, point it at a target, optionally add screenshot capture, then drop the resulting SKILL.md where Claude Code can read it. The tool runs as pure static analysis with no model call, so a full extract completes offline. Start with the one-time global install:
npm install -g skilluiWith the CLI on your PATH, aim it at any live site. SkillUI crawls the page and its linked CSS, extracts colors, typography, spacing, and components, then writes a .skill ZIP to the current directory :
skillui --url https://target-site.comSwap the source flag to match what you have. Use --dir ./local-project to scan a local codebase, or --repo owner/reponame to clone a public repository and run the same directory analysis against it . When static parsing alone misses motion, add the --ultra flag: Ultra mode provisions Playwright to capture screenshots, detect animations, and diff interaction states on top of the base parse .
skillui --url https://target-site.com --ultraFinally, unzip the bundle and place its SKILL.md where Claude Code looks for skills. Use project scope at .claude/skills/<name>/SKILL.md to share it with a repo, or personal scope at ~/.claude/skills/<name>/SKILL.md for every project on your machine . Claude preloads only the YAML frontmatter — roughly 100 tokens of name and description — on every context, and loads the full body only when a task matches, a mechanism Anthropic calls progressive disclosure .
"No AI. No API keys." — the SkillUI project's stated design constraint (source: amaancoderx/npxskillui), meaning extraction is deterministic and reproducible rather than a model guess.
Once placed, invoke the skill directly as /name. Because Anthropic published the format as an open standard in December 2025, the same SKILL.md also runs unmodified on Codex CLI, Cursor, and Gemini CLI .
Untrusted bundles execute on arrival — vet before handing off
A .skill bundle is executable, not just documentation. A SKILL.md folder can ship supporting files and scripts that Claude runs on load, so a third-party ZIP is an attack surface: any downloaded skill can hide malicious code that fires the moment it is placed under .claude/skills/ . Before installing anything you did not generate yourself, unzip it and read every file — SKILL.md, CLAUDE.md, DESIGN.md, and especially the references/ folder and any bundled scripts . Prefer the deterministic route: SkillUI extracts with "No AI. No API keys.", so a bundle you generate from a known site is reproducible and inspectable rather than sourced from a stranger.
Understand the second limit too. SkillUI is a generation-time nudge, not persistent memory. The extracted brand reference shapes output only while the skill is loaded; it carries no enforcement across breakpoints or into later sessions, and practitioner roundups caution that a taste skill has no cross-screen memory . The consensus is to stack layers: grounding with a real reference (SkillUI), taste enforcement with Impeccable's 45 deterministic detector rules , and visual verification with Playwright. No single SKILL.md is a guarantee.
Pairing SkillUI with Impeccable and Playwright
Once SkillUI has grounded Claude in a real reference, two more skills close the gaps a single bundle leaves open: taste enforcement and visual verification. Layer Impeccable (by Paul Bakaus, v3.9.1) on top of the extracted SKILL.md and run /impeccable critique and /impeccable audit to catch AI-design tells. It ships 23 commands and 45 deterministic detector rules whose exit codes wire into CI or PR checks; install with npx impeccable install, which auto-detects the harness.
"1 skill, 23 commands, live browser iteration, and 45 deterministic detector rules," — Paul Bakaus, describing Impeccable (source: pbakaus/impeccable README).
When there is no existing brand to clone, reach for UI/UX Pro Max (v2.10.2, last updated July 6 2026, 102,000+ stars) instead — it maps your product type to 67 UI styles, 161 palettes, and 57 Google-Font pairings.
Finally, verify. The Playwright CLI skill installs via npm install -g @playwright/cli@latest then playwright-cli install --skills, exposing screenshot, --hires, resize, and a show --annotate mode where you draw boxes on the live page and the model receives the annotated screenshot plus your notes. That closes the compare-and-refine loop before a human sees the output. The takeaway: SkillUI grounds, Impeccable enforces, Playwright checks — run the three as a stack, not as substitutes.
Frequently asked questions
Does SkillUI require an API key or an AI model?
No. SkillUI runs pure static analysis — it parses HTML, CSS, JS, and config files locally and advertises "No AI. No API keys." . Nothing is sent to an external service and no LLM is involved in the extraction step; the model only enters later, when Claude reads the generated bundle.
What is inside the .skill ZIP that SkillUI produces?
The ZIP contains a SKILL.md, a CLAUDE.md, a DESIGN.md token file, a references/ folder (ANIMATIONS.md, LAYOUT.md, COMPONENTS.md, INTERACTIONS.md, VISUAL_GUIDE.md), JSON tokens, and bundled Google Fonts . Screenshots are added only when you run Ultra mode, which captures rendered output via Playwright.
Where exactly does the SKILL.md file go in a Claude Code project?
Place it at .claude/skills/<name>/SKILL.md for project scope, or ~/.claude/skills/<name>/SKILL.md for personal scope, then invoke it with /name. Official Claude Code documentation also supports enterprise and plugin locations, and treats skills as first-class extensions that can bundle supporting files and scripts .
Will the same SKILL.md work in Cursor or Codex CLI?
Yes. Anthropic published the SKILL.md format as an open standard on December 18, 2025 . Because the spec is cross-tool, the same file runs unchanged on Claude Code, Codex CLI, Cursor, Gemini CLI, and GitHub Copilot — the portability that lets a reference bundle from SkillUI move across harnesses without edits.
Is Ultra mode safe to run against any URL?
Ultra launches a Playwright browser against the URL you supply to capture screenshots, animation, and interaction states . It is safe on public addresses, but respect the target site's rate limits and terms of service. URLs behind authentication require credentials to be passed explicitly — Ultra will not bypass a login on its own.
Enjoyed this article? Subscribe to get new stories by email whenever they're published.
