mcpbeat Sign in

Reimagine It Generate Agent Skill

>- 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 simulation, artistic, cinematic, dashboard, photography, landing, editorial, gradient, showcase, motion, glass, lookbook, particles), or wants a -i page.html -o out.html. Part of the reimagine-it Content-Derived Design suite.

882 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
104
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/Kayforkind/reimagine-it --skill reimagine-it-generate

The instruction itself

5 sections, as written by the author

/reimagine-it generate

Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles only generation of a redesigned page.

The source file is the brief. The engine reads headings, facts, names, dates,

numbers, links, emails, and hex colors already in the HTML, derives a palette

and motif from them, and writes a stronger standalone page. Source facts are

not invented; only the composition changes.

Usage

# Let Auto choose, generate, verify, and explain (recommended first call)
npx reimagine-it --auto -i page.html -o redesign.html

# Pick a direction
npx reimagine-it -i page.html -t infographic -o poster.html

# Pin a creative variation
npx reimagine-it -i page.html -t landing --seed 42 -o landing.html

# Review three verified directions plus a contrast sheet
npx reimagine-it variations -i page.html -n 3 -o review/

# Keep an existing brand: lock, then reuse
npx reimagine-it lock -i house-style.html -o house.lock.json
npx reimagine-it -i page.html --ref house.lock.json -t landing -o on-brand.html

The 17 tokens

webpage · infographic · svg · 3js · simulation · artistic · cinematic ·

dashboard · photography · landing · editorial · gradient · showcase · motion ·

glass · lookbook (photoshoots/collections) · particles (living networks)

npx reimagine-it --list describes each. Auto scores every lane against

the content and forbids the same silhouette twice.

Procedure

  • Run Auto first (--auto). Read the printed rationale — it names why the

direction fits the content.

  • Check the fidelity line: the engine reports the percentage of detected

source facts preserved. It must be ≥ 80%.

  • Offer variations when the user wants choice; offer --ref when they

want an existing brand honored.

  • If the user names a token, run it directly — Auto is a default, not a gate.

Must not

  • Invent facts, statistics, or quotes not in the source
  • Override the derived palette with generic colors (ban Inter/Roboto is the

*only* taste rule; content decides the rest)

  • Ship without the fidelity check passing
  • Skip verification when the output replaces a real page (run audit)

Part of reimagine-it — MIT.

How to use it

Copy the folder

Take kayforkind/reimagine-it-generate from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.