Repolode
Submit
amaancoderx

amaancoderx/npxskillui

A CLI that extracts a website's, repo's, or local project's design system into a folder of files Claude Code can read to build matching UI.

View on GitHubWebsite
Stars
2,418
Forks
250
Open issues
6
Last commit
5 months ago

What is it?

SkillUI is a command-line tool that crawls a live website, a git repository, or a local codebase and extracts its design system: color tokens, typography scale, spacing grid, and components. It packages the result into a folder with a SKILL.md and CLAUDE.md so that Claude Code can load the design context automatically when you ask it to build UI.

It runs in several modes. The default mode performs static analysis of HTML, CSS, fonts and tokens without a browser. Ultra mode uses Playwright to capture scroll screenshots, hover and focus state diffs, CSS keyframes, layout patterns and DOM component fingerprints. Dir mode scans .css, .scss, .ts, .tsx, .js and .jsx files for Tailwind config, CSS variables and token patterns, and repo mode clones a public repository and runs dir mode on it.

The tool requires Node.js 18 or later and needs no AI service or API key, since all analysis runs locally. Ultra mode additionally requires installing Playwright with Chromium.

Key features

  • 01Extracts color tokens, typography, and spacing from a URL, git repo, or local directory.
  • 02Generates SKILL.md and CLAUDE.md files that Claude Code loads automatically.
  • 03Ultra mode captures scroll screenshots, hover/focus diffs, and CSS animations via Playwright.
  • 04Outputs token files as JSON and CSS variables, plus bundled Google Fonts.
  • 05Runs fully locally with no AI model or API key required.

Use cases

  • Recreating the visual style of an existing site as a starting point for a new landing page.
  • Giving Claude Code the design context of an internal app before asking it to add screens.
  • Documenting the design tokens of a codebase that lacks a written style guide.

Topics

#design-system#claude-code#cli#css#design-tokens#playwright#static-analysis

FAQ

What is npxskillui?
A CLI that extracts a website's, repo's, or local project's design system into a folder of files Claude Code can read to build matching UI. SkillUI is a command-line tool that crawls a live website, a git repository, or a local codebase and extracts its design system: color tokens, typography scale, spacing grid, and components. It packages the result into a folder with a SKILL.md and CLAUDE.md so that Claude Code can load the design context automatically when you ask it to build UI.
Is npxskillui free to use? What license does it have?
npxskillui has no declared license. Its code is public, but without a license you have no explicit permission to reuse it; ask the author before relying on it.
Is npxskillui still maintained?
Updated within 6 months. The last commit to npxskillui was on May 7, 2026.
What can I use npxskillui for?
Recreating the visual style of an existing site as a starting point for a new landing page. Giving Claude Code the design context of an internal app before asking it to add screens. Documenting the design tokens of a codebase that lacks a written style guide.
Where can I get npxskillui?
The source code and installation instructions are on GitHub: https://github.com/amaancoderx/npxskillui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects