/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

1. Read the target file (HTML with inline CSS).
2. Extract palette: scan :root { } block and all var(--*) usage for hex values.
3. Extract type stack: scan font-family declarations; capture display, body, fallbacks.
4. Extract motifs: scan SVG <pattern>, <linearGradient>, keyframe @keyframes names.
5. Extract motion: count @keyframes blocks, note durations, check prefers-reduced-motion.
6. Extract 3D: scan for perspective, rotateX, rotateY, translateZ.
7. Extract section structure: scan semantic HTML (<header>, <main>, <section>, <footer>).
8. Write the pack to references/locks/<name>.md.
9. 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