mcpbeat Sign in

Reimagine It Variations Agent Skill

>- Generate several distinct design directions from one HTML source plus a contrast sheet that shows every direction side by side. Use when the user says /reimagine-it variations, "show me options", "give me three takes", "which direction works best", or wants to compare design directions before Part of the reimagine-it Content-Derived Design suite.

683 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-variations

The instruction itself

4 sections, as written by the author

/reimagine-it variations

Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles only multi-direction exploration.

Generates 2–8 distinct directions from one source plus an index.html

contrast sheet that lays them out side by side with per-direction quality,

fidelity, and voice. One seed reproduces the whole set.

Usage

npx reimagine-it variations -i page.html -n 4 -o review/
npx reimagine-it variations -i page.html -n 4 --seed 42 -o review/   # reproducible
npx reimagine-it variations -i page.html -n 4 --ref house.lock.json  # on-brand

Output per run:

| File | What it is |

|------|-----------|

| variation-1-<token>.html … | One standalone page per direction |

| index.html | Contrast sheet: all directions side by side |

| variations.json | Ranked report: token, seed, voice, fit, quality, fidelity |

Procedure

  • Run with -n 3 unless the user asked for a different count.
  • Read variations.json back to the user: rank, token, quality, fidelity.
  • Name the *structural* difference between the top two — not just the colors.
  • Print the seed and tell the user how to reproduce the set.
  • Once a direction is chosen, generate it standalone with

npx reimagine-it -i page.html -t <token> --seed <seed>.

Must not

  • Present variations as options when fidelity is below 80% for any of them
  • Describe two variations as different if they share a silhouette
  • Lose the seed — the set is only reviewable if it is reproducible
  • Skip the contrast sheet; side-by-side comparison is the point

Part of reimagine-it — MIT.

How to use it

Copy the folder

Take kayforkind/reimagine-it-variations 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.