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

review

Review the UI and style files changed in the working tree against this repo's own design system, before they are saved or committed. Runs the same deterministic check as the CLI's --check flag (no tokens, about a second): hardcoded colours where a token exists, near-identical colour twins, off-scale spacing, radii, font sizes and shadows, typefaces outside the system, arbitrary Tailwind values, static inline styles, !important, duplicate component definitions and imports of the copy to avoid, new tokens that copy an existing one, chart colours written by hand where the repo keeps a chart palette (and one calm warning asking for a palette where it keeps none), on a repo built on MUI, Mantine, Chakra or Ant Design, colours or pixel sizes written onto kit components where the theme has a value, and on a Tailwind theme or a shadcn repo, palette classes such as text-gray-500 where the theme names a colour of that kind. Findings name the file, the line and the fix. This is the small, fast check for what just changed; the roast skill is the full scan of the whole repo with a report.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.8 KB

SKILL.md(原文)

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

Review my UI changes

You are checking the files that changed against the design system this repo already has. The engine does the judging; you explain the findings and help fix them.

Steps

  1. Locate the repo root (the directory with package.json; the current working directory unless the user pointed elsewhere). The check reads the git diff against HEAD plus untracked files, so it needs a git repository. If the user wants a different base (a branch, a commit), tell them the check compares with HEAD and suggest git stash or a branch checkout; do not fake it.

  2. Run the review (deterministic, read-only, needs only Node 18 or newer):

    node ${CLAUDE_PLUGIN_ROOT}/skills/roast-my-design-system/scripts/review/index.mjs <repo-root>
    

    ${CLAUDE_PLUGIN_ROOT} is the plugin's own folder. Installed by hand rather than as the plugin (the two skill folders copied side by side), that variable is unset: then the engine is in the roast-my-design-system folder next to this one, so run node <that folder>/scripts/review/index.mjs <repo-root> instead. Exit code 1 means findings, 0 means none. The output lists each changed file with its findings, a Checked: line naming every rule that ran, and a note for files left unjudged (email, print, artwork, pictures drawn with code).

  3. Report in chat, file by file. For each finding: the line, what was found, and the fix the engine names. Keep the engine's numbers and paths exactly; never add findings of your own or soften the engine's. If there are no findings, say so in one line and quote the Checked: list, so "clean" is never mistaken for "certified".

  4. Offer to fix, then re-run. When the user wants the fixes made, apply them in the kit's or the repo's own vocabulary as the finding says (a token, a spacing step, a theme path), never by deleting the code. Re-run step 2 after the edits and show that the count dropped. A finding the user calls deliberate stays, with a one-line comment in the code saying why.

  5. Keep it short. This is a two-second check, not a roast: no verdict paragraph, no score. If the user wants the whole repo scored, point them to the roast skill.

Rules

  • Every number and path you state comes from the engine's output.
  • A file the engine left unjudged is named as such, not passed as clean.
  • Nothing here writes to the repo except the fixes the user asked for.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Roast the current repo's design system with real data. Runs a deterministic scanner (no tokens, ~1s) that counts everything that betrays a design system, from colours and their near-identical twins to greys, spacing values, typefaces, duplicated and never-imported components, inline styles, !important and arbitrary Tailwind values, and compares them against Ideal Design System norms, a benchmark of 119 public repos (a 34-repo core fleet plus groups for shadcn, Tailwind, MUI, Mantine, Chakra, Ant Design and web components) and 10 reputable design systems, generates a shareable HTML diagnosis, and can generate design-system-rules.md, the agent rules file that stops the mess regrowing.

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

gregkozakiewicz/roast-my-design-system272026年10月6日 更新

gregkozakiewicz のスキルをすべて見る

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