Stats
Actions
Tags
Review and improve frontend UI for visual quality, UX best practices, accessibility, and responsiveness. Use when building UI components, reviewing frontend code, creating dashboards, or when the user asks about design quality, styling, layout, or user experience.
How this skill is triggered — by the user, by Claude, or both
Slash command
/developer-craft-toolkit:frontend-design-reviewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Ensure UI built by agents meets professional design standards through visual inspection, code review, and iterative refinement.
Ensure UI built by agents meets professional design standards through visual inspection, code review, and iterative refinement.
Before reviewing, internalize these priorities (ordered):
Open the page and take screenshots at key breakpoints:
1. browser_navigate → target URL (take_screenshot_afterwards: true)
2. browser_take_screenshot (fullPage: true) → capture complete layout
3. browser_resize → { width: 768, height: 1024 } → screenshot (tablet)
4. browser_resize → { width: 375, height: 812 } → screenshot (mobile)
5. browser_resize → { width: 1440, height: 900 } → restore desktop
For each screenshot, evaluate against the design checklist below.
Review the component source for:
Code Quality:
- [ ] Semantic HTML (section, nav, main, article - not div soup)
- [ ] CSS/Tailwind classes are clean and consistent
- [ ] No inline styles (except dynamic values)
- [ ] Components are reasonably sized (< 200 lines)
- [ ] Responsive utilities used correctly (not hardcoded breakpoints)
Test interactions in the browser:
1. browser_snapshot (interactive: true) → list all interactive elements
2. Test each: hover states, focus rings, click feedback
3. Tab through the page → verify focus order is logical
4. Check loading/empty/error states render properly
| Check | What to Look For |
|---|---|
| Consistent spacing | Use spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px) |
| Alignment | Elements align to a grid; no random offsets |
| Breathing room | Content not cramped against edges; adequate padding |
| Max-width | Text lines don't exceed ~70-80 characters |
| Responsive | Layout adapts gracefully; no horizontal scroll |
| Content flow | Logical reading order top-to-bottom, left-to-right |
| Check | What to Look For |
|---|---|
| Hierarchy | Clear distinction between h1 > h2 > h3 > body > caption |
| Font sizes | Minimum 14px body text; 12px minimum for secondary text |
| Line height | 1.4-1.6 for body text; 1.2-1.3 for headings |
| Weight contrast | Bold for emphasis, not color alone |
| Consistency | Same font family throughout (max 2 families) |
| Check | What to Look For |
|---|---|
| Contrast ratio | 4.5:1 minimum for normal text; 3:1 for large text (WCAG AA) |
| Color meaning | Don't rely on color alone (add icons/labels for status) |
| Palette | Max 5-6 colors; consistent use of primary/secondary/accent |
| Dark backgrounds | Text readable on all background colors |
| Status colors | Green=success, Red=error, Yellow=warning, Blue=info |
| Check | What to Look For |
|---|---|
| Buttons | Clear primary/secondary hierarchy; adequate click targets (44px min) |
| Forms | Labels for all inputs; clear error states; logical tab order |
| Tables | Header row distinct; alternating rows or borders; sortable columns indicated |
| Cards | Consistent padding; clear content grouping; hover state if clickable |
| Navigation | Current page indicated; all links working; breadcrumbs if deep |
| Modals/Dialogs | Overlay dims background; close button visible; escape key works |
| Check | What to Look For |
|---|---|
| Empty state | Helpful message, not blank space; suggest action |
| Loading state | Skeleton or spinner; content doesn't jump on load |
| Error state | Clear error message; recovery action available |
| Hover/Focus | Visual feedback on interactive elements |
| Disabled | Visually distinct; tooltip explaining why |
| Success | Confirmation message; clear next step |
| Check | What to Look For |
|---|---|
| Keyboard nav | All functionality reachable via keyboard |
| Focus visible | Clear focus ring on interactive elements |
| Alt text | Images have meaningful alt text |
| ARIA labels | Icons and non-text elements have aria-labels |
| Skip links | "Skip to content" link for screen readers |
| Form labels | Every input has an associated label |
/* Bad: Magic numbers */
.card { margin: 13px; padding: 7px 11px; }
/* Good: Spacing scale */
.card { margin: theme(spacing.3); padding: theme(spacing.2) theme(spacing.3); }
/* Bad: Too many sizes */
h1 { font-size: 28px; } h2 { font-size: 23px; } h3 { font-size: 19px; }
/* Good: Type scale (1.25 ratio) */
h1 { font-size: 2.441rem; } h2 { font-size: 1.953rem; } h3 { font-size: 1.563rem; }
<!-- Bad: Fixed widths -->
<div style="width: 800px">
<!-- Good: Fluid + max-width -->
<div class="w-full max-w-4xl mx-auto">
{items.length === 0 ? (
<div className="text-center py-12 text-gray-500">
<Icon className="mx-auto h-12 w-12 mb-4" />
<h3 className="text-lg font-medium">No items yet</h3>
<p className="mt-1">Get started by creating your first item.</p>
<Button className="mt-4" onClick={onCreate}>Create Item</Button>
</div>
) : (
<ItemList items={items} />
)}
When issues are found:
browser_snapshot(includeDiff: true) to see changesFor design iteration loops (3+ rounds of fixes), use the design-iterator subagent to handle screenshot-analyze-improve cycles efficiently.
@apply for one-off stylesclassName merging via clsx or cn for conditional stylessm:, md:, lg:) consistentlytailwind.config theme valuesaria-* attributes over custom data attributes for semantics<button> for clickable actions, <a> for navigationnpx claudepluginhub patrykkopycinski/patryks-treadmill-claude-plugins --plugin developer-craft-toolkitGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.