Reimagine It Lock Agent Skill

/reimagine-it lock

Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles design DNA capture and reuse.

Captures a shipped design's full identity into a portable markdown pack so it can be reused on any source file:

/reimagine-it lock gold/domains/cinematic/after.html as house-cinema
/reimagine-it lock examples/end-users/horizon/auto.html as ops-console

What gets captured

| Category | What | Example |

|----------|------|---------|

| Palette | Ground, accent, support colors with hex values | #08141a ground, #3ae098 accent |

| Type stack | Display family, body family, fallbacks | Iowan Old Style, Georgia, serif |

| Motifs | Repeating visual patterns | Pulse wave, heartbeat ring |

| Motion | Animation budget, keyframe durations | alive-micro, 2–4 loops |

| 3D signature | 3D approach for the medium | matcap-hero, card-fan |

| Section structure | Page anatomy grid | Hero → Cards → Footer |

Token translation

Locks include a translation table so a webpage lock can inform another HTML token:

/reimagine-it webpage --ref house-cinema
/reimagine-it infographic --ref house-cinema
/reimagine-it dashboard --ref house-cinema

CLI (machine-readable)

The agent pack is markdown for the LLM. The CLI writes JSON the engine can apply without an agent:

npx reimagine-it lock -i house-style.html -o house.lock.json
npx reimagine-it -i my-page.html --ref house.lock.json -t landing -o on-brand.html
npx reimagine-it -i my-page.html --ref competitor.html --auto -o study.html

--ref accepts a .lock.json file or raw HTML (reverse-lock). Structure stays content-derived; only palette, type, and voice are pinned.

Procedure

• Read the target file (HTML with inline CSS).
• Extract palette: scan :root { } block and all var(--*) usage for hex values.
• Extract type stack: scan font-family declarations; capture display, body, fallbacks.
• Extract motifs: scan SVG <pattern>, <linearGradient>, keyframe @keyframes names.
• Extract motion: count @keyframes blocks, note durations, check prefers-reduced-motion.
• Extract 3D: scan for perspective, rotateX, rotateY, translateZ.
• Extract section structure: scan semantic HTML (<header>, <main>, <section>, <footer>).
• Write the pack to references/locks/<name>.md.
• Report LOCKED: <name> → references/locks/<name>.md with a summary of what was captured.

Must not

• Save outside references/locks/ (or the host's configured locks path)
• Capture invented colors not actually in the source CSS
• Overwrite an existing lock without asking
• Skip the token translation table