Extract a website's visual theme into shadcn/ui and Tailwind CSS v4 tokens.
npx skills add https://github.com/Firzus/agent-skills --skill extract-theme
Please help me install this Agent Skill. Skill: extract-theme Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/extract-theme Command: npx skills add https://github.com/Firzus/agent-skills --skill extract-theme
This Skill turns a public website’s visual style into reusable design tokens, so you can recreate its look in a shadcn/ui and Tailwind CSS v4 project without manually inspecting every color, font, and radius value.
@theme inline token block for globals.css or app.css.Ask the AI to extract the theme from a public website URL and return the shadcn/ui Tailwind v4 token block for your project’s global CSS file.
High-intent search queries and answers about installing and using this skill.
The extracted theme output uses OKLCH conversion because Tailwind CSS v4 utilizes the OKLCH color space for its `@theme inline` tokens, ensuring accurate perceptual color mapping and native compatibility with the framework's design system.
You can extract a website's color scheme into Tailwind CSS v4 design tokens by sampling computed styles from a live Chromium browser session, converting colors to OKLCH, and generating a paste-ready `@theme inline` block for your global CSS file.
Yes, you can generate shadcn/ui theme variables from a public website by capturing its computed colors, typography, spacing, radius, and shadows, then mapping those values directly into the standard shadcn token vocabulary.
Yes, extracting dark mode tokens requires a real Chromium browser to sample computed CSS styles accurately from the rendered page, ensuring the captured colors and shadows reflect the actual visual output for light and dark mapping.
The best way to replicate a website's visual style for a shadcn/ui project is to reverse-engineer its computed styles into a Tailwind v4-ready `@theme inline` token block, capturing surface, text, and button styling for immediate application.
The extracted theme output uses OKLCH conversion because Tailwind CSS v4 utilizes the OKLCH color space for its `@theme inline` tokens, ensuring accurate perceptual color mapping and native compatibility with the framework's design system.
256javyLaunch an AI-controlled Chromium session with a live activity feed.
shawn-sandyExtract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.
hakushunCreates scalable design systems with Tailwind CSS v4 and semantic tokens.
akornmeierAnalyze website UI to generate a Site DNA document with design tokens and architecture.