reimagine-it
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers,…
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
$ npx -y skills add Kayforkind/reimagine-it --skill extract --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/extractContext preview
The summary Claude sees to decide when to auto-load this skill.
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
name: reimagine-it-extract
description: >-
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.
license: MIT
metadata:
author: Kayforkind
version: "2.15.0"
parent: reimagine-it
hosts:
- claude-code
- cursor
- codex
- copilot
- gemini-cli
keywords:
- content-extraction
- palette-extraction
- content-analysis
- design-signals
- content-derived-design
category: Data
capabilities:
- content-signal-extraction
- palette-derivation
- fact-inventory
trigger_phrases:
- /reimagine-it extract
- what does the engine see
- extract the palette
- pull the facts from this page
- analyze this page's content**Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles only the extraction surface — the honesty layer the whole method stands on.
The redesign is only as honest as its extraction. This verb emits exactly what the engine reads, as JSON, without generating anything: title, profile, density, derived palette, anchors, proper nouns, headings, dates, numbers, emails, links, and source hex colors. Every extracted fact exists in the source — property-tested against hostile and malformed input.
npx reimagine-it extract -i page.html -o signals.json cat page.html | npx reimagine-it extract -o - # stdin → stdout npx reimagine-it extract -i page.html --full -o signals.json # + prose
Payload shape (default):
{
"source": "page.html",
"title": "…",
"profile": "restaurant | saas | civic | …",
"density": "sparse | medium | dense",
"palette": { "ground": "…", "accent": "…", "muted": "…", "surface": "…", "ink": "…" },
"anchors": ["…"],
"properNouns": ["…"],
"headings": ["…"],
"dates": ["…"],
"numbers": ["…"],
"emails": ["…"],
"links": ["…"],
"sourceHex": ["#6B3A2A"],
"counts": { "paragraphs": 4, "listItems": 16 }
}`--full` adds `paragraphs` and `items` (the raw prose arrays).
1. Run it before any redesign when the user asks "what would you even use from this page?" — the JSON answers with the engine's actual inputs. 2. To audit honesty: every `dates`, `numbers`, `emails`, and `links` entry must be findable in the source. Nothing else is allowed to appear. 3. Use it for migration/research: the payload is a stable, typed summary of a page's content — no redesign attached.
in `sourceHex` were in the source; the rest is derivation
Part of [reimagine-it](https://github.com/Kayforkind/reimagine-it) — MIT.
The source file is the design brief. Turn existing HTML into a beautiful, usable page — without losing its meaning.
Content-Derived Design — reads existing HTML and writes a stronger standalone page from headings, facts, names, dates, numbers,…
Design Health — runs 19 deterministic quality checks on HTML output. Use when the user says /reimagine-it audit, "audit this…
Generate one Content-Derived Design direction from an HTML source, or let Auto choose the strongest direction. Use when the user…
Content-derived infographic poster — reads the source file and builds a statistical poster from the facts already in it. Not a…
Design DNA capture — extracts palette, type stack, motifs, motion, and 3D signatures from a shipped HTML file and saves them as a…
Generate several distinct design directions from one HTML source plus a contrast sheet that shows every direction side by side.…