Slash Command

/design-review

Review a screenshot, code file, or UI description for design quality using Refactoring UI principles

Install

npx claudepluginhub timbrinded/kiln --plugin ui-refactor

Details

Argument[screenshot-or-code-path] [optional-focus-area]

Allowed Tools

ReadGrepGlob

Prompt Preview

Review the given input for UI design quality using the ui-refactor skill.

**Determine the mode from arguments:**

- If `$ARGUMENTS` contains an image path (`.png`, `.jpg`, `.jpeg`, `.webp`, `.gif`) → Visual review mode
- If `$ARGUMENTS` contains a code file path (`.css`, `.scss`, `.tsx`, `.jsx`, `.vue`, `.svelte`, `.html`) → Code review mode
- If `$ARGUMENTS` contains text description → Advisory mode
- If no arguments → Prompt the user to provide a screenshot, file path, or description

**Optional focus area (second argument):**
If the user specifies a focus area (e.g., "typography", "colo...

Command Content

Other plugins with /design-review

/design-review

Reviews UI files or components interactively for design, usability, code quality, and performance issues. Configures via sequential questions on focus, context, and platform.

ui-design

32.9k

/design-review

architecture/

Conducts structured design review of module, feature, or system: maps boundaries, evaluates principles/anti-patterns/scalability, outputs score, strengths, concerns, recommendations, Mermaid diagram.

claude-code-toolkit

1.4k

/design-review

Reviews visual design quality—layout, typography, spacing, colour, consistency—for provided URL or detected dev/deployed app, producing severity-ranked issues report with fixes.

frontend

689

/design-review

Audits designs for accessibility, usability, visual consistency, content, and motion via visual AI critique and code review. Accepts HTML files, Figma URLs, previews, or screenshots.

ReadWriteEdit+4

naksha

247

/design-review

Reviews and interactively edits design_doc.json: displays formatted overview, components, patterns, ADRs, and interfaces; supports modifications via prompts.

plan-cascade

/design-review

Reviews design document by resolving open questions, finalizing tasks, and advancing status from Draft to Review or Accepted.

backlog

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitFeb 17, 2026

Actions

View Source View Plugin View on GitHub View README

Review the given input for UI design quality using the ui-refactor skill. **Determine the mode from arguments:** - If `$ARGUMENTS` contains an image path (`.png`, `.jpg`, `.jpeg`, `.webp`, `.gif`) → Visual review mode - If `$ARGUMENTS` contains a code file path (`.css`, `.scss`, `.tsx`, `.jsx`, `.vue`, `.svelte`, `.html`) → Code review mode - If `$ARGUMENTS` contains text description → Advisory mode - If no arguments → Prompt the user to provide a screenshot, file path, or description **Optional focus area (second argument):** If the user specifies a focus area (e.g., "typography", "colo...

Review the given input for UI design quality using the ui-refactor skill.

Determine the mode from arguments:

If $ARGUMENTS contains an image path (.png, .jpg, .jpeg, .webp, .gif) → Visual review mode
If $ARGUMENTS contains a code file path (.css, .scss, .tsx, .jsx, .vue, .svelte, .html) → Code review mode
If $ARGUMENTS contains text description → Advisory mode
If no arguments → Prompt the user to provide a screenshot, file path, or description

Optional focus area (second argument): If the user specifies a focus area (e.g., "typography", "color", "spacing", "hierarchy", "depth", "polish"), narrow the review to that dimension and load only the relevant reference file.

For visual review (screenshot):

Read the screenshot
Load the ui-refactor skill's SKILL.md for the review framework
Run the Quick Anti-Pattern Checklist first
Evaluate across all 6 dimensions (or focused dimension if specified)
Load specific reference files as issues emerge
Output: What Works Well → Issues Found (What/Why/Fix) → Quick Wins

For code review:

Read the target file(s)
Load the ui-refactor skill's SKILL.md
Check against specific code-level patterns:
- Spacing values: Should come from the scale (4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256)
- Font sizes: Should come from the type scale (12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72)
- Line-heights: Should vary by font size (not a single global value)
- Shadows: Should use a defined elevation system (not one shadow for everything)
- Colors: Should come from a palette with shade variations (not ad-hoc hex values)
- Borders: Check if spacing or box-shadow would be cleaner alternatives
- Grey values: Should have saturation > 0% for temperature
Load specific reference files as issues emerge
Output: What Works Well → Issues Found with file:line references → Quick Wins

For advisory mode (description):

Identify which dimension(s) the description maps to
Load the relevant reference file(s)
Provide the specific principles, concrete values, and reasoning
If the description is vague ("looks amateur"), run the Quick Anti-Pattern Checklist

Every issue must include a concrete CSS/Tailwind fix and an explanation of WHY — so the user learns the principle, not just the fix.