Skip to content
cccskills
FreePublished on 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.

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

gregkozakiewicz/roast-my-design-system
See how to install

Files included (1)

  • SKILL.md3.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

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

roast-my-design-system

Free

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.

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

gregkozakiewicz/roast-my-design-system27Updated Oct 16, 2026

See all skills by gregkozakiewicz

Report a problem with this skill