Skills
.Work. You
Rest

shadcn-replication

Community

Convert design tokens into shadcn replicas

Software Engineering#replication#responsive#tailwind#shadcn#design-tokens#tsx#component-scaffolding
Authorimehr
Version1.0.0
Installs0

System Documentation

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>/.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-replication
Download link: https://github.com/imehr/design-extractor/archive/main.zip#shadcn-replication

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.