Skip to main content
ClaudeWave
ES, Spanish
Slash Command1.5k estrellas del repoactualizado 5d ago

design-review

Workflow recipe — review a design end-to-end, ending in measured numbers rather than adjectives, by chaining 4 skills.

Instalar en Claude Code
Copiar
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/mohitagw15856/pm-claude-skills/HEAD/commands/design-review.md -o ~/.claude/commands/design-review.md
Después abre una sesión nueva de Claude Code; el slash command carga automáticamente.

design-review.md

Run the **Design Review** workflow recipe for: $ARGUMENTS

This is a *chain* of skills. Run each stage in order and **carry every stage's output forward as context** for the next. Open with a one-line plan of the 4 stages, then ask once for essential missing inputs (the actual hex values or a URL, the target WCAG level, whether it will ever be printed, who signs off). Don't re-ask between stages.

**Before stage 2, measure.** A design review that assesses contrast by eye is an opinion with a standards reference attached. If you have a URL or hex values, run these first and carry the numbers through every stage:

```bash
npx --yes notugly spec <url>                        # palette, type scale, radii — what it is made of
npx --yes notugly onepager <url> --out review.html  # every pairing, with the nearest passing colour
npx --yes notugly vision <url>                      # colours that merge for colour-blind viewers
```

Deterministic, zero dependencies, **no model call**. If you only have a screenshot, say so explicitly in the output — an inferred ratio is not a finding.

Run each stage under a clear `## Stage N — <name>` heading:

1. **React honestly** — apply the `design-critique` skill: what the design is trying to do, where it succeeds, and where intent and execution diverge. Do this *before* the measurements so the critique is about the design rather than about its contrast ratios.
2. **Measure what can be measured** — apply the `accessibility-audit` skill, filling every contrast row from the `notugly` output above rather than assessing it. Flag explicitly which findings are computed and which are judgement.
3. **Check the system behind it** — apply the `design-system-audit` skill: is this a one-off, or does it reveal a token problem? Run `npx notugly tokens <file>` if a token file exists; it names failing pairs semantically (`color.text.danger on surface.default is 2.99:1`), which turns a vague note into a bug with an owner.
4. **Hand it over** — apply the `design-handoff-brief` skill: the decisions, the measured values, and the open questions, in the form an engineer can build from.

Close with a **one-page verdict**: the three things to fix before ship, the measured evidence for each, and the split between *find-and-replace* fixes and fixes that need a design decision. That split is the whole reason this recipe exists — "twelve accessibility issues" gets deferred; "nine are a find-and-replace and three need Priya to pick a colour" gets scheduled.
360-feedback-templateSkill

Design a 360-degree feedback survey or write a structured 360 feedback report. Use when asked to build a 360 feedback process, write 360 feedback for a colleague, design a feedback survey, or produce a feedback report. Produces either a complete survey instrument with rating scales and open-ended questions, or a structured narrative feedback report with themes, strengths, and development areas.

401k-plan-decoderSkill

Decode a 401k or workplace retirement plan — the real cost of its funds, the match's fine print, vesting math, and the plan features worth using or avoiding. Use when someone asks 'is my 401k any good', 'decode my 401k plan', 'which funds should I look at', or 'what fees am I paying'. Produces a fee decode in dollars-over-time, match and vesting math, a fund-lineup triage by cost, and the questions for HR or the plan administrator.

ab-test-plannerSkill

Design statistically rigorous A/B tests for product features, UI changes, onboarding flows, and pricing experiments. Use when asked to set up an experiment, design an A/B test, calculate sample size, or interpret test results. Produces a complete test plan with hypothesis, variant definitions, sample size, duration estimate, guardrail metrics, and a results interpretation guide.

ab-test-readoutSkill

Analyse a finished A/B test and write the readout — the result, whether it's statistically and practically significant, what it means, and the ship/no-ship call. Use when asked to analyse experiment results, write an A/B test readout, interpret test data, or decide whether to ship a variant. Produces a clear verdict with the lift and confidence, segment cuts, the risks (peeking, novelty, sample), and a recommendation. Distinct from planning a test — this reads results.

accessibility-auditSkill

Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.

accessible-travel-plannerSkill

Plan a trip that actually works with a disability or access need — confirm real accessibility (not just 'accessible' labels), book the assistance in advance, plan for equipment and medication, and build in the contingencies for when access breaks down. Use when someone says 'plan an accessible trip', 'travelling with a wheelchair/disability', 'book assistance for my flight', or 'will this hotel actually work for me'. Produces an access-verified itinerary, an assistance-booking checklist, an equipment/medication plan, and contingency scripts. Verify specifics with providers.

accommodation-requestSkill

Request a reasonable accommodation at work or in education — frame it around the barrier and the adjustment (not your diagnosis), cite the right process, and navigate the back-and-forth constructively. Use when someone says 'I need a workplace accommodation', 'request reasonable adjustments', 'ADA/Equality Act accommodation', or 'how do I ask for accommodations for my disability/condition'. Produces the request letter, a barriers-and-adjustments map, disclosure guidance, and a plan for the interactive process. Not legal advice — routes to the formal process and to advocacy where needed.

account-planSkill

Build a structured account plan for any key customer or target account. Use when asked to create an account plan, key account strategy, strategic account review, or territory plan. Produces a complete account plan with relationship map, growth opportunities, risks, and 90-day action plan.