Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

replica-design — Design System Rebuild for Clones

Turns recon notes and screenshots into role-based design tokens, Tailwind mappings, component specs and a WCAG AA contrast gate.

Design & UIIntermediate★ 1,894⑂ 266AI score 9/10Last updated: Oct 3, 2026

What it does

  • Reads replica/recon.md plus screenshots in replica/screens/ and reverse-engineers the design system, not the assets.
  • Captures colour roles (bg, surface, border, border-input, text, text-muted, accent, on-accent, danger, success, warning), type scale, spacing base (4 or 8), radius, shadow, motion and layout breakpoints.
  • Produces tokens.json, tokens.css custom properties and a Tailwind theme mapping so components never use raw hex.
  • Runs python3 contrast.py replica/design/tokens.json over every text/background pair; AA is the floor (4.5:1 body, 3:1 large text, input borders and focus rings) and it exits non-zero on failure.
  • Writes components.md specs: variants, sizes, every state (default/hover/active/focus-visible/disabled/loading/error/empty), token usage, a11y behaviour and which screens use it.
  • Enforces IP hygiene: no logos, icons, illustrations, licensed fonts, copy or brand colour — swap in open sets (Lucide, Phosphor, Inter, IBM Plex) and keep accent as a neutral placeholder.

Who it's for

  • Frontend engineers rebuilding a familiar product's UX patterns in their own product.
  • Solo devs and small teams standing up their first token system.
  • Design-system owners who want accessibility fixed at the token layer.
  • Teams on Tailwind + React (shadcn/ui, Radix, React Aria).

Example uses

  1. "Make it look like X" → the skill measures 6 greys, a 16/20/28 type scale and an 8px spacing ladder, then writes tokens.json and tokens.css.
  2. Contrast run flags muted text at 3.8:1 → fix the token value once instead of patching twenty components.
  3. Spec Button, Input and Modal in components.md, build them on a /design route or in Storybook, screenshot the page as the design-system review.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Jakeschincariol/replica-skill/HEAD/replica-design/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the replica-design folder from the GitHub repo Jakeschincariol/replica-skill into my ~/.claude/skills/replica-design/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Jakeschincariol/replica-skill.git && mkdir -p ~/.claude/skills && cp -r replica-skill/replica-design ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/Jakeschincariol/replica-skill.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill in: cp -r replica-skill/replica-design ~/.claude/skills/
  5. Verify Python 3 is available: python3 --version (needed for the contrast checker).
  6. Make sure your project has replica/recon.md and screenshots in replica/screens/; if not, run the /replica-architect step first.
  7. Restart Claude Code and ask for "rebuild the design system" or "design tokens for my clone".
View source on GitHub ↗License: MIT