reimagine-it-lock

Featured

Design DNA capture — extracts palette, type stack, motifs, motion, and 3D signatures from a shipped HTML file and saves them as a reusable reference pack. Use when the user says /reimagine-it lock, "lock this design", "save design DNA", "capture this look", or wants to reuse a shipped design on a different target. Locks capture palette, type, motif, and motion from a shipped HTML file. Part of the reimagine-it Content-Derived Design suite.

Web & Frontend 134 stars 25 forks Updated today MIT

Install

View on GitHub

Quality Score: 92/100

Stars 20%
71
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# /reimagine-it lock **Parent:** [../SKILL.md](../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: ```bash npx reimagine-it lock -i house-style.html -o house.lock.json npx reimagine-it -i my-page.html --ref house.lock.json...

Details

Author
Kayforkind
Repository
Kayforkind/reimagine-it
Created
3 weeks ago
Last Updated
today
Language
JavaScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Featured

reimagine-it

Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers, links, emails, and colors already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html; also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it", "reinvent this", "redesign this page", "make an infographic", wants a content-aware redesign or a visual leap instead of a mood board. Tokens: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, plus leftover words as a brief. Also /reimagine-it audit for quality checks. Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace. Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.

134 Updated today
Kayforkind
Web & Frontend Featured

reimagine-it-generate

Generate one Content-Derived Design direction from an HTML source, or let Auto choose the strongest direction. Use when the user says /reimagine-it generate, "redesign this page", "make it a landing page", "turn this into an infographic", names a token (webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing), or wants a content-aware redesign instead of a mood board. CLI: npx reimagine-it --auto -i page.html -o out.html. Part of the reimagine-it Content-Derived Design suite.

134 Updated today
Kayforkind
Data & Documents Featured

reimagine-it-extract

Emit the content signals reimagine-it reads from an HTML file — title, anchors, proper nouns, dates, numbers, emails, links, source hex colors, and the derived palette — as JSON without generating a redesign. Use when the user says /reimagine-it extract, "what does the engine see in this page", "extract the palette", "pull the facts from this page", or wants content analysis for research, migration, or design-system work. CLI: npx reimagine-it extract -i page.html -o signals.json. Part of the reimagine-it Content-Derived Design suite.

134 Updated today
Kayforkind