Skillui

What it does

When your agent uses it

• The user wants to match the look of <site
• Clone the design of
• Extract the design system / brand / theme from
• Make it look like Linear/Notion/Stripe

Example prompts

• “s, repo”
• “match the look of <site”
• “clone the design of”
• “/skillui”

Requirements

• Node.js
• Pre-approved tools (allowed-tools): Bash(npx skillui *), Bash(npx -y skillui *), Bash(skillui *), Bash(npx playwright *)

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Confirm the reference source (URL, repo, or local path). If the user only named a product, use its site URL.
2. 2Run the extraction. Prefer default mode for speed; use --mode ultra when the user cares about motion, interaction states, or…
3. 3Read DESIGN.md and tokens/ to understand the palette, type scale, and spacing.
4. 4Build the requested UI with the appropriate builder skill (agent-app-creator / frontend-design), applying the extracted tokens (CSS…
5. 5Keep the generated -design/ folder out of the app's committed source unless the user wants it kept — treat it as an extraction artifact.

What it can do on your machine

Read from SKILL.md and the folder at commit b50970c. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Bash(npx skillui *)
  • Bash(npx -y skillui *)
  • Bash(skillui *)
  • Bash(npx playwright *)

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npx
  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • linear.app
  • stripe.com
  • github.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Skillui loads about 1.2k tokens when it runs. Until then it costs about 209 tokens; SKILL.md has 412 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~209

When it runs · the whole SKILL.md, loaded when a task matches

~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from CraftOS-dev/CraftBot at commit b50970c, republished under its MIT licence (© CraftOS-dev). 412 words, ~1,192 tokens.

name

skillui

description

Reverse-engineer any website's, repo's, or local project's design system into a Claude-ready skill via the SkillUI CLI. Use this skill whenever the user wants to "match the look of <site>", "clone the design of", "extract the design system / brand / theme from", "make it look like Linear/Notion/Stripe", "pull the colors, fonts, and spacing from a website", or "build a UI in the style of" an existing product. It runs pure static analysis (no AI, no API keys) and outputs a folder of design tokens (colors, typography, spacing), bundled fonts, and a generated SKILL.md/DESIGN.md that a subsequent build step reads to reproduce the design. Pair it with agent-app-creator or frontend-design to then build the interface. Do NOT trigger for generic "make it pretty" requests with no reference source, backend work, or non-UI tasks.

allowed-tools

Bash(npx skillui *), Bash(npx -y skillui *), Bash(skillui *), Bash(npx playwright *)

npm install playwright
npx playwright install chromium

npx -y skillui --url <url>      # Analyze a live website (default: HTML/CSS static analysis)
npx -y skillui --dir <path>     # Scan a local project (CSS/SCSS/TS/JS, Tailwind config, CSS vars)
npx -y skillui --repo <url>     # Clone a public Git repo, then analyze it as a directory

npx -y skillui --url "https://linear.app" --mode ultra --screens 10
npx -y skillui --url "https://stripe.com" --format design-md
npx -y skillui --dir ./my-nextjs-app --name "MyApp"
npx -y skillui --repo "https://github.com/vercel/next.js" --name "Next.js"

© CraftOS-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/skillui of CraftOS-dev/CraftBot.

Open the folder on GitHubat commit b50970c