All skills
jakeschincariol avatar

/replica-design

@77c9436
by Jake Schincarioljakeschincariol/replica-skill995 stars
123

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.

Requires /replica-build
Use this Skill: https://skilld.dev/gh/jakeschincariol/replica-skill/replica-design

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

SKILL.md

≈124 tokens for metadata: the name and description. ≈858 when used: this file. ≈404 more on demand in 1 file.

Description uses 6.2% of example budget

Before choosing a Skill, your Agent reads its name and description. All available Skills share that space.

  • A shorter description leaves more room for other Skills. This entry exceeds our 1% size suggestion.

In our Claude Code example, all Skill names and descriptions share 8,000 characters. This Skill uses ≈497 characters, or 6.2%.

The 1% threshold is a size suggestion. Longer descriptions can still fit.

Your model, settings, and other Skills decide how much text your Agent can read.

Example settings and source

The example uses a 200k-token context and default Claude Code settings. The count includes the name, description, separators, and when_to_use when present. Codex also counts local file paths.

Skit's source and limits: Codex 0.160.1, Claude Code 2.1.292.

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 ratio

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

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

AA 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, S09

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

Source: SKILL.md on GitHub

Skill behaviors

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

Third-party checks

No alerts4d3 checks · Risk SAFE
  • Gen Agent Trust Hub4d

    The skill is a design system generator that extracts design tokens from screenshots and documentation to build application clones. It includes a utility script for WCAG contrast validation and follows best practices for accessibility and asset management. No security risks were detected.

  • Socket4d

    No alerts

  • Snyk4d

    Risk: LOW · No issues

Provenance

Signed by skilld at 77c9436. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 45 minutes ago.

Activeupdated 5 days ago

README badge

README badge for jakeschincariol/replica-skill/replica-design