Purpose
Take a single interaction pattern — a form step, a modal, a filter panel, a date picker, an onboarding flow — and return a rigorous, severity-ranked evaluation across usability, accessibility, and design system consistency, so the pattern can be fixed or approved with defensible reasoning rather than opinion.
When to Use
Invoke this skill when the user asks to:
- Evaluate or critique a specific interaction pattern or UI component
- Check whether a flow or component is accessible (WCAG / keyboard / screen reader)
- Validate a pattern before adding it to a design system or component library
- Audit a design against usability heuristics
- Compare a proposed pattern against an existing design system standard
- Diagnose why users struggle with a particular interaction
Inputs Required
Before starting, collect:
- Pattern description or screenshot: What the interaction is and how it behaves — steps, states, triggers
- Platform: Web / iOS / Android / responsive — determines applicable conventions
- User goal: What the user is trying to accomplish with this pattern
- Design system reference: Which system governs it (Material, HIG, internal system) and any relevant tokens/components, if applicable
- Known constraints: Technical limits, brand rules, or prior decisions that can't change
- Current problem (if any): Reported user struggle, drop-off, or support complaint tied to this pattern
If no design system is named, evaluate against platform-native conventions (Material for Android/web, HIG for iOS) and note the assumption. If no screenshot is provided, work from the described behavior and states.
Instructions
Step 1: Restate the Pattern and Its States
Before evaluating, confirm understanding:
- Name the pattern type (e.g., "multi-step form with inline validation")
- List every state you'll evaluate: default, focus, hover, active, error, empty, loading, disabled, success
- Identify the critical path — the sequence of actions to reach the user goal If any state is undefined in the input, flag it as a gap rather than assuming behavior.
Step 2: Heuristic Evaluation (Nielsen's 10)
Evaluate against each heuristic. For each, mark Pass / Concern / Violation and cite the specific element:
- Visibility of system status — feedback for every action (loading, saving, success)
- Match between system and real world — labels and order match user mental models
- User control and freedom — undo, cancel, back, escape available and obvious
- Consistency and standards — matches platform and internal conventions
- Error prevention — constraints, confirmations, and safe defaults before errors happen
- Recognition rather than recall — options visible, not requiring memory
- Flexibility and efficiency — accelerators for experienced users without blocking novices
- Aesthetic and minimalist design — no competing or irrelevant information
- Error recovery — errors stated in plain language with a clear path to fix
- Help and documentation — inline guidance where needed, not buried
Only list heuristics scored Concern or Violation in the final output — with the specific offending element and why.
Step 3: Accessibility Audit (WCAG 2.2 + interaction)
Check the pattern against the criteria most likely to break in interaction patterns:
- Keyboard operability: Every action reachable and operable by keyboard; logical tab order; no keyboard traps
- Focus visibility (2.4.7 / 2.4.11): Visible focus indicator on every interactive element with adequate contrast
- Target size (2.5.8): Interactive targets ≥ 24×24 CSS px (44×44 recommended for touch)
- Color contrast (1.4.3 / 1.4.11): Text ≥ 4.5:1 (3:1 large); UI components and states ≥ 3:1
- Color independence (1.4.1): State/meaning never conveyed by color alone
- Name, role, value (4.1.2): Correct semantic roles and accessible names for custom controls
- Error identification (3.3.1 / 3.3.3): Errors announced to assistive tech and described with correction guidance
- Motion and timing: No essential info behind auto-advancing or unpausable motion; respects reduced-motion
Rate each as Pass / Fail / Needs verification (use "Needs verification" when the input can't confirm implementation details like ARIA).
Step 4: Design System Consistency Check
Compare the pattern against the governing system:
- Component reuse: Is this reinventing a component the system already provides?
- Token adherence: Spacing, type scale, color, radius, and elevation drawn from tokens vs. one-off values
- Interaction consistency: Does this behave like siblings (same validation timing, same modal dismissal, same button hierarchy)?
- State coverage: Does it define every state the system requires for its component class?
- Naming and semantics: Does it map to an existing pattern name or introduce an undocumented variant?
Flag each deviation as Aligned / Deviation (justified) / Deviation (unjustified).
Step 5: Severity-Ranked Issue List
Consolidate all Concerns, Violations, and Fails into one ranked list. Assign severity:
- Critical — blocks task completion or excludes users (e.g., keyboard trap, no error recovery)
- Major — causes frequent friction, errors, or accessibility failures for many users
- Minor — cosmetic inconsistency or edge-case friction Rank Critical → Major → Minor. Each item names the element, the problem, and the affected user impact.
Step 6: Prioritized Fixes
For the top issues (Critical and Major first), give a concrete fix:
- What to change (specific element and behavior)
- Why it resolves the issue (tie back to the heuristic, WCAG criterion, or token)
- The effort estimate: Quick / Moderate / Structural
Step 7: Verdict
Give a clear disposition: Ship as-is / Ship with minor fixes / Revise before shipping / Do not add to system. Be decisive and state the single most important reason.
Output Format
- Structure: Sectioned report; issue list as a severity-ranked table; fixes as prioritized numbered items
- Length: 800–1,200 words
- Format: Structured document with one table (severity-ranked issues) and scannable subsections
- Sections: Pattern & states summary → Heuristic findings (Concerns/Violations only) → Accessibility audit → Design system consistency → Severity-ranked issue table → Prioritized fixes → Verdict
- Tone: Senior design reviewer — specific, evidence-based, direct. Cites the exact heuristic or WCAG criterion behind every finding; no vague praise or generic critique.
Quality Checklist
Before delivering output, verify:
- [ ] Every state listed in Step 1 was addressed or explicitly flagged as undefined
- [ ] Each accessibility finding cites a specific WCAG criterion, not just "not accessible"
- [ ] Every issue in the severity table names the exact element and user impact
- [ ] Issues are ranked Critical → Major → Minor, not listed arbitrarily
- [ ] Each Critical and Major issue has a concrete fix with an effort estimate
- [ ] The report ends with one clear verdict, not a hedge
Notes
- Interaction patterns fail most often on error states and keyboard operability — evaluate those before visual polish
- "Needs verification" is a legitimate accessibility rating when the input can't confirm ARIA or focus behavior; flagging it is better than a false Pass
- When a pattern deviates from the design system, the question isn't "is it different" but "is the difference justified by a real user need the system doesn't serve"
- If evaluating for design system inclusion, weight consistency and complete state coverage heavily — a pattern that works in isolation but breaks system conventions creates long-term debt
How to use this skill
This file is a Claude Code skill in Anthropic's standard format — markdown with YAML frontmatter at the top.
Installing in Claude Code:
~/.claude/skills/<folder-name>/SKILL.md— auto-loads in every session anywhere on your machine (recommended for skills you'll use across multiple projects)<your-project>/.claude/skills/<folder-name>/SKILL.md— auto-loads only when working in that project (recommended for project-specific skills)
Restart Claude Code or open a new session to register.
Using in Claude.ai, ChatGPT, Gemini, or other AI tools:
- Drag this file into a new chat, or copy and paste its contents
- Send your task or request as your next message — the AI will apply the skill where it fits
For Claude Code skill details: https://docs.anthropic.com/en/docs/claude-code/skills