Interface Kit
JuliusBrussee/skills
Authoritative guide for implementing stunning, accessible, performant UI.
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets…
Install Replica Design
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Jakeschincariol/replica-skill replica-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/replica-design .claude/skills/replica-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .claude/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Jakeschincariol/replica-skill/tree/main/replica-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Jakeschincariol/replica-skill replica-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .agents/skills && cp -r skills-src/replica-design .agents/skills/replica-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .agents/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Jakeschincariol/replica-skill replica-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/replica-design .cursor/skills/replica-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .cursor/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Jakeschincariol/replica-skill.git --path replica-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Jakeschincariol/replica-skill replica-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/replica-design .gemini/skills/replica-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .gemini/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Jakeschincariol/replica-skill replica-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .github/skills && cp -r skills-src/replica-design .github/skills/replica-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .github/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jakeschincariol/replica-skill --skill replica-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Jakeschincariol/replica-skill replica-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jakeschincariol/replica-skill.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/replica-design .opencode/skills/replica-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "replica-design" agent skill from https://github.com/Jakeschincariol/replica-skill/tree/main/replica-design into .opencode/skills/replica-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "replica-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
replica-design- GitHub stars
- 1.4k
- Token cost
- ~994 tokens
- SKILL.md length
- 446 words
- Files
- 3
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- MIT
At a glance
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets…
- Works in 4 steps: measure, do not guess → write the tokens → component specs → …
- The user says match the design
- SKILL.md covers The rules, Step 1: measure, do not guess, Step 2: write the tokens and Step 3: component specs, plus 2 more sections
- Runs Python scripts from its folder; calls python3
What it does
Replica Design is an agent skill from Jakeschincariol/replica-skill. Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets instead of the target's logos, icons, illustrations or licensed fonts. Includes a WCAG contrast checker. Use when the user says "match the design", "rebuild the design system", "get the colours and fonts", "make it look like X", "design tokens for my clone", or after /replica-architect.
Its SKILL.md is about 990 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `contrast.py` and `tokens.json`).
It sits in Frontend & Design, covering Typography, Design tokens and Icons and illustration. The repository describes itself as: Eleven free Claude skills that clone any app: reverse-engineer it, rebuild it, test it for bugs, then fix what its users hate. Free, MIT. The licence is MIT.
When your agent uses it
- The user says match the design
- Rebuild the design system
- Get the colours and fonts
- Make it look like X
Example prompts
- “match the design”
- “rebuild the design system”
- “get the colours and fonts”
- “/replica-design”
Requirements
- Python 3
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 77c9436. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Replica Design loads about 994 tokens when it runs. Until then it costs about 124 tokens; SKILL.md has 446 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Jakeschincariol/replica-skill at commit 77c9436, republished under its MIT licence (© Jakeschincariol). 446 words, ~994 tokens.
Download SKILL.mdSave it as
.claude/skills/replica-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- replica-design
- description
- Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets instead of the target's logos, icons, illustrations or licensed fonts. Includes a WCAG contrast checker. Use when the user says "match the design", "rebuild the design system", "get the colours and fonts", "make it look like X", "design tokens for my clone", or after /replica-architect.
replica-design
Reads replica/recon.md and the screenshots in replica/screens/. Writes
replica/design/tokens.json (template in this folder), tokens.css, the
Tailwind mapping, and replica/design/components.md.
python3 contrast.py replica/design/tokens.json # every text pair, WCAG ratioThe rules
What you rebuild is the system: the roles, the scale, the patterns, the way a form or a modal behaves. Those are not ownable, and users expect them. What you never take:
- Logos, icons, illustrations, photos, sounds. Use an open icon set (Lucide, Phosphor, Heroicons, Tabler, all MIT or similar) and make or commission your own illustrations. Do not trace theirs.
- Licensed fonts. If the original uses a paid or proprietary font, pick an open one with the same job: Inter, Geist, IBM Plex, Manrope, Source Serif.
- Their copy. Every label and empty state gets written fresh.
- Their brand colour. Record it as a role (
accent), use a neutral placeholder now, and replica-brand gives you your own. The signature colour plus the signature layout is trade dress, and it changes before launch.
Step 1: measure, do not guess
From the screenshots (zoom in, use a colour picker on the user's machine):
- Colour roles, not colours: bg, surface, border, border-input, text, text-muted, accent, on-accent, danger, success, warning. Count how many greys the app really uses. Usually 5 to 7.
- Type scale: sizes, line heights, weights. Snap to a scale (12, 14, 16, 20, 28, 40 is common). Note the font category, not the font file.
- Spacing: measure gaps between elements. It is almost always a 4 or 8 base. Write the scale.
- Radius, shadow, motion: two or three of each.
- Layout: max content width, grid, breakpoints, sidebar width, header height.
Show full SKILL.md (185 more words)Show less
Step 2: write the tokens
Fill tokens.json. Keep the role names. replica-brand only changes values.
Generate tokens.css as custom properties and map them into Tailwind's theme
so components use bg-surface text-muted, never raw hex.
Add a pairs list for every text and background combination the app uses,
then:
python3 contrast.py replica/design/tokens.jsonAA is the floor: 4.5:1 for body text, 3:1 for large text and for input borders and focus rings. It exits 1 on a failure. Fix it in the tokens, not per component.
Step 3: component specs
For every component in the recon list, one block in components.md:
Button
variants primary, secondary, ghost, danger
sizes sm 32px, md 40px, lg 48px
states default, hover, active, focus-visible (2px ring, accent), disabled, loading
tokens bg accent, text on-accent, radius md, font sm/600
a11y real <button>, visible focus, loading keeps the label for screen readers
used on S02, S07, S09Every state the recon saw, plus the ones it should have: focus, disabled, loading, error, empty. Keyboard and screen reader behaviour is part of the spec.
Step 4: build the primitives
Build the components in code once, in isolation (a /design route or
Storybook), before any screen. Use an accessible base if the stack has one
(Radix, shadcn/ui, React Aria). Screenshot the page. That is the design system
check.
Output
tokens.json, tokens.css, the Tailwind config, components.md, the
primitives built, and a contrast report with zero AA failures. Next:
/replica-build.
© Jakeschincariol, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in replica-design of Jakeschincariol/replica-skill.
- SKILL.md
- contrast.py
- tokens.json
Open the folder on GitHubat commit 77c9436
Compare with similar skills
Replica Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Replica Design this skillJakeschincariol/replica-skill | 1.4k | — | ~994 | Automated safety check: Pass | MIT | |
| Interface KitJuliusBrussee/skills | 162 | 1 repos | ~5.3k | Automated safety check: Pass | MIT | |
| Design Theme Guidesickn33/agentic-awesome-skills | 47k | 1 repos | ~5.7k | Automated safety check: Pass | MIT | |
| Oma Designfirst-fluke/oh-my-agent | 1.3k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Design Standardsrampstackco/claude-skills | 945 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT |
Similar skills
Design Theme Guide
sickn33/agentic-awesome-skills
Design-token register: colour, typography, spacing and radius tokens with light and dark values, contrast ratio and WCAG level.
Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
Design Standards
rampstackco/claude-skills
Apply production-grade design standards when building or reviewing pages, components, or UI.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
More from Jakeschincariol/replica-skill
All 11 skills in this repoReplica Architect
Jakeschincariol/replica-skill
Plans the stack, database schema and API for an app clone, from the recon map replica-recon wrote.
Replica Brand
Jakeschincariol/replica-skill
Names and rebrands an app clone so it is the user's own: name candidates with the trademark, domain, store and handle checks to run, a new palette checked for contrast, a logo brief, a voice guide…
Replica Deploy
Jakeschincariol/replica-skill
Ships an app clone live on the user's own domain: a preflight gate (tests green, parity must-haves done, rebrand sweep clean, listing linted, legal pages up), production database and env vars, the…
Replica Diff
Jakeschincariol/replica-skill
Compares an app clone against the original: a feature parity score from the feature matrix (weighted by must, should, could) with the missing list in build order, plus a screenshot layout diff that…
Replica Entrepreneur
Jakeschincariol/replica-skill
Researches the app being cloned and reads what its real users say in public reviews (App Store, Google Play, G2, Capterra, Trustpilot, Reddit, Hacker News, its own feature-request board), then ranks…
Replica Launch
Jakeschincariol/replica-skill
Writes the launch for an app clone: the landing page built on the positioning angle, pricing set against the original's public pricing and its users' complaints, and the App Store and Google Play…
Related
Categories
Questions about Replica Design
What does Replica Design do?
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets…. Replica Design is an agent skill from Jakeschincariol/replica-skill. Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets instead of the target's logos, icons, illustrations or licensed fonts.
When should I use Replica Design?
Replica Design fits situations like: the user says match the design; rebuild the design system; get the colours and fonts; make it look like X.
How do I install Replica Design in Claude Code?
Run `npx skills add Jakeschincariol/replica-skill --skill replica-design -a claude-code`. Or copy the skill folder (replica-design in Jakeschincariol/replica-skill) into .claude/skills/replica-design in your project. Claude Code loads it when a task matches its description.
How do I install Replica Design in Codex?
Run `npx skills add Jakeschincariol/replica-skill --skill replica-design -a codex`. Or copy the skill folder (replica-design in Jakeschincariol/replica-skill) into .agents/skills/replica-design in your project. Codex loads it when a task matches its description.
Can I use Replica Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Jakeschincariol/replica-skill --skill replica-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/replica-design, .gemini/skills/replica-design, .github/skills/replica-design and .opencode/skills/replica-design in your project.
What does Replica Design need to run?
Going by SKILL.md and its folder, Replica Design needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Replica Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Replica Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Replica Design use?
Replica Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Replica Design use?
About 994 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Replica Design?
Skills that share tags, products or a category with Replica Design: Interface Kit (JuliusBrussee/skills, 162 stars), Design Theme Guide (sickn33/agentic-awesome-skills, 47k stars), Oma Design (first-fluke/oh-my-agent, 1.3k stars) and Design Standards (rampstackco/claude-skills, 945 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Replica Design?
Jakeschincariol (a GitHub user) maintains it in Jakeschincariol/replica-skill, which has 1,432 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 3, 2026.
Source: Jakeschincariol/replica-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.