Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it
See how to install

Files included (1)

  • SKILL.md3.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

/reimagine-it extract

Parent: ../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.

Usage

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).

Procedure

  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.

Must not

  • Add facts not present in the payload to any downstream summary
  • Present the derived palette as colors the source declared — hex colors in sourceHex were in the source; the rest is derivation
  • Round or "clean up" extracted numbers and dates; they are quotes

Part of reimagine-it — MIT.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

reimagine-it

Free

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. All 17 tokens: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, editorial, gradient, showcase, motion, glass, lookbook, particles — plus leftover words as a brief. Also /reimagine-it audit for quality checks. The agent runs the CLI; it does not hand-author the page. Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace. Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

reimagine-it-audit

Free

Design Health — runs 19 deterministic quality checks on HTML output. Use when the user says /reimagine-it audit, "audit this page", "check design quality", or wants to verify craft-floor compliance before shipping. Catches blank plates, missing focus rings, non-compositor motion, off-palette accents, dead motion, fabricated content. No LLM, no API key. CI-ready with --json and exit codes. Part of the reimagine-it Content-Derived Design suite.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

reimagine-it-generate

Free

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 (all 17: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, editorial, gradient, showcase, motion, glass, lookbook, particles), 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.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

reimagine-it-infographic

Free

Content-derived infographic poster — reads the source file and builds a statistical poster from the facts already in it. Not a dashboard, not a CV, not an AntV template. Uses common-scale encodings (Cleveland–McGill floor), ISOTYPE unit counts (Neurath), custom data glyphs (Lupi/Fragapane), and a lossless data table. Palette, glyphs, and composition are derived from the source's own content. No pies, donuts, gauges, 3D charts, or fabricated KPIs. Part of the reimagine-it Content-Derived Design suite.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

reimagine-it-lock

Free

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.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

reimagine-it-variations

Free

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 choosing one. CLI: npx reimagine-it variations -i page.html -n 4 -o review/. Part of the reimagine-it Content-Derived Design suite.

The English summary is being prepared. Showing the original description.

Kayforkind/reimagine-it209Updated Oct 22, 2026

See all skills by Kayforkind

Report a problem with this skill