shadcn/ui skills
shadcn-ui/uiThe official skills inside the shadcn/ui repo: a shadcn skill for adding, fixing and styling components, plus a Radix-to-Base-UI migration skill.
Recommended
Check first Depth 4/5
designlang (extract-design) Claude skills
Points a headless browser at any site and reconstructs its design system as 8+ files: DTCG tokens, Tailwind config, shadcn theme, Figma variables, WCAG score.
Our verdict Recommended with caveats
A genuinely deep and actively updated extraction tool, but most of its advertised depth (site-wide consolidation, fidelity scoring, brand books) lives in the separate CLI rather than the skill file itself, and it runs a headless browser against third-party sites.
What designlang (extract-design) does
The skill wraps the designlang CLI (a separate npm package, run via npx). Given a URL, it crawls the live DOM with a headless browser and emits 8 files from a single extraction: an AI-optimized markdown summary, an HTML preview with swatches and type scale, W3C DTCG design tokens, a Tailwind config, a shadcn/ui theme, CSS variables, a React theme file, and Figma variables, plus a WCAG accessibility score. The underlying CLI goes well beyond the skill's own extraction command: multi-page crawling with coverage-weighted token consolidation, drift checks against a live source of truth, visual diffing, a fidelity score comparing a rebuilt clone to the original, a brand-guidelines generator, and an MCP server for Claude Code, Cursor and Windsurf.
The skill itself is thin (about 3.3 KB) and just tells the agent to run the CLI, read the generated markdown, present key findings (palette, fonts, spacing unit, accessibility score, components) and offer to wire the output into the user's project. The repository also auto-generates small per-site 'designlang-tokens' skills (around 800-900 bytes each) for a gallery of example sites such as cal.com and clerk.com, which are reference artifacts rather than something most users install. Core extraction is deterministic and needs no API key; an optional --smart classification mode uses Atlas Cloud, OpenAI or Anthropic credentials.
Good for
- Pulling a Tailwind config or design tokens out of an existing site or competitor
- Starting a redesign or clone with real measured values instead of guesses
- Checking a built clone's fidelity against the original site
Not for
- Sites you don't have the right to scrape or replicate
- Design systems that live in a private design tool rather than the live DOM
What's inside depth 2/5
The installable skill itself is about 3.3 KB with no references or scripts of its own; the deep functionality (17+ output formats, drift checks, fidelity scoring) lives in the separately maintained designlang CLI, which the skill only shells out to.
- Skills
- 25
- Reference docs
- 0
- Scripts
- 0
- Tests / evals
- 0
- Templates
- 0
- Avg SKILL.md
- 1 KB
Counted from the repository file tree. How we score depth.
Dependencies and costs
- Node.js 20+
- Playwright (for the headless browser)
- designlang npm package (installed on demand via npx)
- Optional ATLASCLOUD_API_KEY, OPENAI_API_KEY or ANTHROPIC_API_KEY for --smart classification
- Telemetry: none found beyond the optional --smart mode sending classification requests to the configured AI provider.
Security review
Broad accessThis skill asks for more access than most, or sends data to another service. That is usually a design choice rather than bad intent, but you should know before you install it.
- Pre-approves broad shell commandsallowed-tools lists plain
Bash(unrestricted shell) with Read, Write and Glob.skills/extract-design/SKILL.md:4
A skill that runs the designlang npm tool to open a website in a headless browser and write out its design tokens, Tailwind/shadcn themes and an accessibility score. Bash is pre-approved without limits and the tool is fetched unpinned from npm, and the tool's own code was not available for review. Optional flags let you pass cookies or headers for logged-in pages and send low-confidence classification calls to an AI provider with your key.
Worth knowing
- Runs remote code at an unpinned versionRuns the designlang npm package with
npx designlang <url>/npm install -g designlangwithout a version pin; the README also registers an MCP server withclaude mcp add designlang -- npx -y designlang mcp.skills/extract-design/SKILL.md:21 - Relies on a CLI or package we could not reviewAll the work is done by the designlang npm CLI and a Playwright headless browser; their source is not among the files we have.skills/extract-design/SKILL.md:14
- Installs packages or toolsInstalls designlang globally or fetches it through npx, which in turn needs Playwright and a browser build.skills/extract-design/SKILL.md:14
- Makes network requestsdesignlang loads whatever URL you give it (and crawls internal pages with --depth) in a headless browser; the optional --smart mode sends classification requests to Atlas Cloud, OpenAI or Anthropic using ATLASCLOUD_API_KEY, OPENAI_API_KEY or ANTHROPIC_API_KEY.README.md:57
- Needs an API key for its own serviceATLASCLOUD_API_KEY / OPENAI_API_KEY / ANTHROPIC_API_KEY are read from the environment and sent only to the matching provider for --smart classification; the --cookie/--cookie-file/--header flags are user-supplied and go to the site being extracted.README.md:280
What we checked
The repository (1762 files) on Oct 29, 2026. Not a full review: 1714 of 1762 files were not downloaded (large repository; we reviewed the skill folders); it relies on code outside the repository: designlang npm package, Playwright and the Chrome extension (chrome-extension/) described in the README; 1714 of 1762 repository files, including all source code, were not available to us; website/public/gallery/*/.claude/skills/designlang/SKILL.md example skill files were not read individually.
NVIDIA SkillSpector static scan: 37 pattern hits (MCP Rug Pull 37). All 37 SkillSpector hits are unpinned npx designlang, npx skills and npx -y designlang mentions in the README and skill file. The dossier's 'credentials' lines are README documentation of optional environment variables and cookie flags.
A review, not a certification. Skills change after we check them — read the files before installing.
License
MIT — commercial use allowed.
Can it run unattended?
Not really. It is a single on-demand extraction command per site, not a loop, though drift checks could in principle be scheduled outside the skill.
Alternatives to designlang (extract-design)
extract-design-system
arvindrk/extract-design-systemA skill plus npm CLI that extracts colors, fonts, spacing, radii and shadows from a public website and writes starter tokens.json and tokens.css files.
Recommended
Check first Depth 2/5
UI Skills
ibelick/ui-skillsNine skills for design engineers: a UI baseline checklist, accessibility/metadata/motion fixers, a design.md generator, and canvas builders for components.
Recommended
Broad access Depth 2/5
FAQ
What is the extract-design skill (designlang)?
It is a skill that runs the designlang CLI to extract a complete design system from any live website: colors, typography, spacing, components and an accessibility score, output as design tokens, a Tailwind config, a shadcn theme and Figma variables.
How do I install it?
Install designlang globally with npm install -g designlang, or let the skill call it via npx with no install step. Copy the skills/extract-design folder into your agent's skills directory to get the guided workflow.
Do I need an API key?
No. Core extraction is deterministic and free. An optional --smart classification mode can use an Atlas Cloud, OpenAI or Anthropic key, but it is not required for the main extraction.
Is scraping a site's design legal?
The tool reads from the public DOM the way a browser does, but reusing another company's exact visual design can still raise trademark or copyright questions. Use it on your own sites or for personal reference, and get permission before shipping a close clone of someone else's brand.
Sources: GitHub repository (stars, license, file tree, last push Oct 23, 2026). Review based on the README and SKILL.md files as published.