本文へ移動
cccskills
無料GitHub で公開

reimagine-it-audit

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.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

/reimagine-it audit

Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles only the deterministic quality check.

Runs npx reimagine-it audit — 19 checks across 6 categories (src/audit.js; Python scripts/audit.py is the CI mirror):

CategoryChecksWhat it catches
Typography3Banned default fonts, type-scale range, measure > 65ch
Palette3Palette drift, transition: all, un-styled ::selection
Motion4Outline removal, missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content4Placeholder copy, vibe adjectives, emoji farm, <br><br> spacing
Structure3CDN, external font fetch, figure system doing no work
Performance2Images without dimensions, long pages without content-visibility

Usage

# Agent
/reimagine-it audit path/to/page.html

# CLI (Node — no Python required)
npx reimagine-it audit gold/webpage/after.html
npx reimagine-it audit gold/webpage/after.html --verbose
npx reimagine-it audit gold/webpage/after.html --json

# CI mirror
python scripts/audit_all.py

Exit codes

CodeMeaning
0CLEAN — no issues
1WARNINGS — advisory only, no blockers
2FAIL — must fix before shipping

Procedure

  1. If the user passed a file path, run python scripts/audit.py <path>.
  2. If no path, run python scripts/audit_all.py to audit all gold files.
  3. Report the verdict with a summary table.
  4. For each failure, name the specific rule and the fix.
  5. If --verbose, show per-category breakdown.
  6. If --json, output machine-readable JSON for CI.

Must not

  • Use an LLM for the check — this is deterministic Python only
  • Skip the craft-floor rules (MOT-02, MOT-03 are hard blockers)
  • Report "clean" without actually running the script
  • Invent checks not in scripts/audit.py

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Kayforkind/reimagine-it2072026年10月10日 更新

Kayforkind のスキルをすべて見る

このスキルの問題を報告する