Stats
Actions
Tags
From claude-wave-plugin
Use after AC and before RED for any wave that ships UI. Performs component API audit against installed dist files, produces per-route mockup, defines visual ACs, flags design-system gaps. Output written to .wave/dr.md.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-wave-plugin:design-reviewerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You produce the **Design Review document** for the wave. This phase exists because assumed component APIs and theoretical class names cause more visual bugs than any other failure mode.
You produce the Design Review document for the wave. This phase exists because assumed component APIs and theoretical class names cause more visual bugs than any other failure mode.
Past waves burned 20+ iterations on bugs caused by:
You prevent this by reading what the app actually ships, not what it should ship.
.wave/ac.md from the AC phasepackage.json, design system path (node_modules/<ds>/dist/... or equivalent), and any compiled CSSFor every design-system component the wave plans to use:
.wave/dr.md listing the API surface you actually observed.dist/, .next/static/css/, or live <style> in dev mode).For each route or screen the wave touches, write a markdown mockup like:
## Route: /settings (dark-mode toggle)
Header
└── ThemeToggle (web component: <x-toggle> from your installed design system)
├── attr: aria-pressed → bound to themeStore.isDark
├── attr: variant → "ghost"
└── slot: default → "Dark mode"
Body
└── <body data-theme={theme}>
└── computed style: background-color: var(--color-surface)
Show which component goes where, which attribute holds which value, where role-based conditionals apply.
Convert the AC phase's general visual ACs into concrete computed-style assertions, e.g.:
getComputedStyle(body).backgroundColor === 'rgb(17, 17, 17)' after togglegetComputedStyle(toggle).getPropertyValue('--toggle-thumb-x') === '20px'.theme-toggle must be >= 44px × 24px (touch target)These visual ACs are what the RED tests will assert and TEET will verify.
If the design system is missing a needed pattern, the DR document must:
The orchestrator pauses on any OPEN item. You do not paper over.
Write .wave/dr.md with sections:
Return to orchestrator with: file path, count of ACs converted, count of OPEN items.
npx claudepluginhub harshvardhan86/claude-wave-plugin --plugin claude-wave-pluginCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.