reimagine-it

# reimagine-it — Content-Derived Design

**Content-Derived Design:** reads existing HTML and derives palette, motifs, and motion from concrete nouns, dates, numbers, and colors already in the content. Writes a standalone HTML page. Not a mood board.

You are loading **reimagine-it**, one Agent Skill. Progressive disclosure. Do not ingest extra files until the procedure says so.

## First 30 seconds

1. This file only.
2. Install **one** folder: `skills/reimagine-it/` (directory name must stay `reimagine-it`).
3. Read `skills/reimagine-it/SKILL.md` in full when the user says `/reimagine-it`, "reimagine it", "reinvent this", "reimagine this page", or points at **HTML** and asks to redesign it. **Run `npx reimagine-it`; do not hand-author the page.**
4. Load `references/notes.md` and `references/forms.md` when the skill says to.
5. Load `references/webpage-craft.md` for HTML output. Packs in `references/forms/` for pdf / document / slides are **host-conversion playbooks**, not CLI features — use them only if the user asked and the toolchain exists. Do not present those packs as engine tokens.
6. Load `references/domains/<domain>.md` and/or `references/modifiers/<name>.md` if the user gave those tokens.
7. Load `references/locks/<name>.md` if the user passed `--ref <name>`.
8. Load `examples.md` if the form is still unclear.

```bash
npx skills add Kayforkind/reimagine-it
```

Native plugin wrappers (same skill inside):

```text
/plugin marketplace add Kayforkind/reimagine-it
/plugin install reimagine-it@reimagine-it
```

```bash
codex plugin marketplace add Kayforkind/reimagine-it
codex plugin add reimagine-it@reimagine-it
droid plugin marketplace add https://github.com/Kayforkind/reimagine-it
droid plugin install reimagine-it@reimagine-it --scope user
```

Cursor wrapper: `.cursor-plugin/plugin.json` (same `skills/reimagine-it/` chair). Marketplace / cursor.directory submit from the GitHub repo URL. Daily install remains `npx skills add Kayforkind/reimagine-it`.

**MCP server** (any MCP-compatible agent): `npx reimagine-it mcp` (or the equivalent bin `npx reimagine-it-mcp`) — exposes 8 tools: `reimagine`, `design_auto`, `design_variations`, `design_lock`, `extract_content`, `list_tokens`, `audit_html`, `list_rules`. Add to your MCP client config:
```json
{ "mcpServers": { "reimagine-it": { "command": "npx", "args": ["reimagine-it-mcp"] } } }
```

Fallback: copy `skills/reimagine-it/` into the host skills root. Never into `~/.cursor/skills-cursor/`.

## Job

Open a creative mind on **this HTML** — webpage, infographic, SVG, Three.js canvas, or playable simulation. Ship a leap the user did not know to ask for. Lists of vibes are a fail. Do not claim the engine redesigns PDF, PPTX, or DOCX.

Interview only if the user passed `interview`.

## Quality

Run `npx reimagine-it audit <output-file.html>` on any shipped webpage to validate 19 deterministic checks (no LLM, no API key). Zero failures must pass. Run `python gold/five/run.py` for non-webpage gold fixture smoke tests.

**[CHANGELOG.md](CHANGELOG.md)** — version history. **[ROADMAP.md](ROADMAP.md)** — improvement plan.


## Visuals in this repo

- `gold/hero.svg` — the metaphor (a vibe list dies, one artifact ships).
- `docs/flow.svg` — the decision path.
- `gold/five/RUN.svg` and `gold/five/03-ledger/index.svg` — regenerated by `python gold/five/run.py` from live fixture output. If you change a fixture, re-run the suite so the images stay honest.
- `gold/webpage/compare.png` — the sober before/after (default spine).
- `gold/domains/strip.png` — four domain aesthetics from the same brief.
- `gold/domains/motion-strip.png` — three-frame animation proof (per domain).
- `gold/domains/cinematic/hero.png` — the WebGL2 cinematic domain full-shot.
- `gold/modifiers/` — domain + modifier combinations (e.g. `cinematic-glassmorphism/`).
- `gold/forms/` — same `gold/webpage/before.html` as SVG, Three.js (vendored r185), and a playable simulation. Re-shoot: `python gold/forms/shot.py`. Static proof: `gold/forms/strip.png`; live motion proof: open `gold/forms/see.html`. The GIF generator remains available for social previews but is not the primary product proof.

Never invent a screenshot. If a screenshot cannot be regenerated from a fixture in this repo, it does not go in the README.