extract-theme

Installation
SKILL.md

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. agent-browser CLI installed (see the agent-browser skill). Verify with agent-browser --version; if missing, stop and tell the user:
Installs
5
GitHub Stars
3
First Seen
May 13, 2026