extract-themelisted

Extracts the visual theme (colors, typography, radius, spacing, shadows) of a public website provided by the user and produces a shadcn/ui + Tailwind CSS v4 compatible token block, ready to paste into the project's `globals.css` (or `app.css`) inside `@theme` and `.dark`. Uses the chrome-devtools MCP server to drive a real Chromium instance (no Playwright). Use when the user asks to "extract the theme of <url>", "reverse-engineer the design tokens of <site>", "copy the look of <site> into shadcn", "build a tailwind v4 theme from <url>", or mentions extract-theme / theme extraction / design tokens from a URL.
Firzus/agent-skills · ★ 1 · Web & Frontend · score 74

Install: claude install-skill Firzus/agent-skills

# Extract Theme (URL → shadcn/ui + Tailwind v4 `@theme`) Reverse-engineer the **visual theme** of a public website into a token block that drops straight into a project using **shadcn/ui** and **Tailwind CSS v4**. Output is scoped to design tokens — colors, typography, radius, spacing, shadows. No components are generated. ## When to use - The user provides a URL and wants to "extract the theme", "match the look", "copy the design tokens", or "scaffold a shadcn theme from this site". - The current project already uses (or is about to use) shadcn/ui with Tailwind v4 (`@import "tailwindcss"` + `@theme`). - The user wants a starter theme, not a pixel-perfect clone. ## When not to use - The user wants a full component port (use `shadcn` + `tailwind-design-system` skills directly). - The site is private, requires auth, or is behind a heavy SPA shell that does not paint a meaningful first frame (extraction quality will be low — say so). - The project is on Tailwind v3 — the output uses v4-only syntax (`@theme`, `@custom-variant`, OKLCH variables). Refuse and point at the v3→v4 migration. ## Hard prerequisites 1. **chrome-devtools MCP server connected.** Verify with the `<available_skills>` block or by calling any `chrome-devtools` tool. If it is missing, stop and tell the user to add it: ```bash claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest ``` Do **not** fall back to `WebFetch` of raw HTML for color extraction — computed styles require a