claude-ecommerce-replicator

A Claude Code / Agent skill that converts an e-commerce screenshot or a rough HTML prototype into a real, working web application — replicating the original with high fidelity: exact colors and color grading, typography, spacing, word-for-word text, and every component, with nothing dropped.

• Animations are OFF by default — added only when you explicitly ask.
• Output stack is TRD-driven — a Technical Requirements Document (or your inline specifics) decides the framework/conventions; falls back to a single self-contained HTML + Tailwind file for instant verification.
• Token-efficient — extract once, build in one pass, fix with targeted edits.
• Mirrors the quality bar of ui-ux-pro-max (reference style; self-contained, no dependency).

Install

One command — installs into your user skills folder (~/.claude/skills/):

npx claude-ecommerce-replicator

Or install globally and run anytime:

npm install -g claude-ecommerce-replicator
claude-ecommerce-replicator init

Install options

| Command | Effect | |---|---| | npx claude-ecommerce-replicator | Install for the current user (~/.claude/skills/) | | npx claude-ecommerce-replicator --project | Install into the current project only (./.claude/skills/) | | npx claude-ecommerce-replicator --dir <path> | Install into a custom skills directory | | npx claude-ecommerce-replicator uninstall | Remove the installed skill | | npx claude-ecommerce-replicator --help | Show help |

After installing, restart any open Claude Code session so it picks up the new skill.

Use it

In Claude Code (CLI or the VS Code extension — they share the same config):

/ecommerce-replicator

…then drop a screenshot or an HTML prototype, optionally with a filled-in TRD (see references/trd-template.md). It also auto-triggers on prompts like "convert this screenshot into a website" or "replicate this store from this image."

Works in Claude Code (terminal + IDE extensions). The standalone Claude Desktop app uses a separate skills system and is not targeted by this installer.

How it works (the process is the accuracy)

1. Intake — detect input type; lock the output contract from the TRD / your specifics.
2. Visual Audit — a written spec: zone map, exact color palette, typography table, spacing/grid, full text transcription.
3. Component Inventory — checklist of every e-commerce component so nothing is silently dropped.
4. Build — one structured pass against the spec, in the specified stack.
5. Self-Verification — a section-by-section diff against the spec before declaring done.

What's inside

skill/
├── SKILL.md                      # the workflow (loads every time)
└── references/
    ├── visual-audit.md           # extraction methodology
    ├── component-library.md      # e-commerce checklist + asset handling
    ├── animation-rules.md        # opt-in animation conventions
    └── trd-template.md           # output-spec template

License

MIT © Vineel Kumar Polavarapu