skills.rest
imehr
imehrCOMMUNITY
Explore all skills by this author โ†’
WebsiteGitHub

shadcn-replication

Convert design tokens and DOM metadata into shadcn/Tailwind TSX components.

Updated Apr 10, 2026
Search Tags:#replication#responsive#tailwind#shadcn#design-tokens#tsx#component-scaffolding
One-click install
npx skills add https://github.com/imehr/design-extractor --skill shadcn-replication
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: shadcn-replication
Source: https://github.com/imehr/design-extractor/tree/main/skills/shadcn-replication
Command: npx skills add https://github.com/imehr/design-extractor --skill shadcn-replication

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the labor-intensive process of turning extraction outputs (tokens, patterns, and screenshots) into a working shadcn/Tailwind HTML replica so teams do not hand-map tokens, styles, and layout to component code.

Core Features & Use Cases

  • Token-to-Tailwind mapping: Map extracted colours, spacing, radii, and typography into exact Tailwind arbitrary values and a tailwind.config mapping.
  • Component scaffolding: Generate TSX components for header, hero, cards, footers and other sections using shadcn primitives with brand token overrides.
  • Responsive verification & iteration: Produce replicas tuned for desktop, tablet, and mobile breakpoints and support iterative refinement against visual references.
  • Use case: Turn a design-extractor run for a given brand slug into ui/components/brands/<slug>/ files and a reproducible tailwind configuration for immediate integration.

Quick Start

Generate a shadcn/Tailwind replica from an extraction slug by mapping tokens-output.json into a tailwind config and scaffolding TSX components in ui/components/brands/<slug>/.

Frequently Asked Questions about shadcn-replication

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert design tokens into shadcn components?โ–ผ

To convert design tokens into shadcn components, map extracted colours, spacing, radii, and typography from tokens-output.json into exact Tailwind arbitrary values and scaffold TSX components using shadcn primitives with brand token overrides.

What is the best way to generate a Tailwind HTML replica from extracted design tokens?โ–ผ

Generating a Tailwind HTML replica from extracted design tokens involves mapping tokens-output.json into a tailwind configuration and scaffolding header, hero, cards, and footer TSX components in ui/components/brands/<slug>/ files.

Can I use shadcn primitives to rebuild responsive brand replicas from screenshots?โ–ผ

Yes, you can use shadcn primitives to rebuild responsive brand replicas from screenshots by producing TSX components tuned for desktop, tablet, and mobile breakpoints and refining them against visual references.

Does generating shadcn replicas require specific extraction outputs?โ–ผ

Generating shadcn replicas requires access to the ~/.claude/design-library/cache/<slug>/ directory specifically containing tokens-output.json, patterns.json, and screenshot-desktop.png to ensure a faithful replica.

How do I map extracted design tokens to a tailwind config?โ–ผ

Mapping extracted design tokens to a tailwind config requires translating colours, spacing, radii, and typography from the tokens-output.json file into exact arbitrary Tailwind values alongside a reproducible tailwind configuration mapping.

What are the limitations of scaffolding TSX components from design tokens?โ–ผ

Scaffolding TSX components from design tokens is limited to processing DOM metadata, patterns, and screenshots from a design-extractor run, requiring iterative refinement to achieve exact visual fidelity across responsive breakpoints.

Related Skills

Explore More Software Engineering Skillsโ†’
imehrimehr

pattern-detection

Compute nine visual signals from design tokens and screenshots.

Community
Intermediate
artsmcartsmc

ui-developer

Implement React components with TSX, CSS/SCSS/Tailwind styling, and responsive interactions.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
IDEA-on-ActionIDEA-on-Action

react-component

Generate React component files with PascalCase names and shadcn/ui integration.

Official
Intermediate