From ux-interaction-taste
Review and audit the interaction quality and UX of web applications. Evaluates states coverage, interaction feedback, keyboard accessibility, form UX, responsive behavior, error recovery, and loading experience. Use when: 'review UX', 'check interaction quality', 'audit UX', '走查交互', '检查用户体验', '交互体验怎么样', 'UX review', 'interaction audit'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ux-interaction-taste:ux-interaction-tasteThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Match user's language**: Respond in the same language the user uses.
Match user's language: Respond in the same language the user uses.
A structured UX interaction review skill focused on how things work, not how they look. Evaluates interaction completeness, feedback quality, and user experience robustness of web applications built with AI coding tools.
Complements visual design skills (like design-taste-frontend) — this skill handles interaction/UX, that skill handles visual aesthetics. Recommend pairing them for full coverage.
If Foundation has 3+ failures across different categories, stop and report Foundation issues first. Do not evaluate Craft/Polish until Foundation is acceptable.
States coverage — For every data-fetching view or async operation, check:
Interactive feedback — For every clickable/tappable element:
pointer on clickable, not-allowed on disabled)Keyboard accessibility:
Feedback timing:
Form UX:
Focus management:
Responsive behavior:
Animation quality (when animation exists):
prefers-reduced-motionMicro-interactions:
Error recovery:
Flow intentionality:
Flag these if found — they are strong signals of interaction debt:
| Anti-pattern | Why it matters |
|---|---|
| No loading state anywhere | Users think the app is broken during fetches |
onClick handler with no loading/disabled logic | Double-submit, race conditions |
No onError / error boundary | White screen of death |
Empty catch {} blocks | Swallowed errors, no user feedback |
No aria-label on icon buttons | Screen readers say "button" with no context |
| Links styled as buttons (or vice versa) | Breaks keyboard/screen reader expectations |
outline: none / outline: 0 without replacement | Keyboard users lose focus visibility |
| Autofocus on wrong element in modals | Keyboard user starts in wrong place |
| Infinite scroll with no keyboard alternative | Keyboard users trapped |
| Alert/confirm dialogs for user decisions | Blocks thread, poor UX, inaccessible |
[UX Interaction Review] Complete!
Target: <path or URL>
Framework: <React/Vue/Svelte/HTML...>
Foundation: <PASS / X issues>
Craft: <PASS / X issues>
Polish: <PASS / X issues>
Top priorities:
1. <most impactful issue + specific fix>
2. <second issue + fix>
3. <third issue + fix>
💡 For visual design quality, pair with `design-taste-frontend`.
Keep the top priorities list to 3-5 items max. Don't dump 30 findings — prioritize by user impact.
For each finding:
[Tier] Category — Issue title
File: path/to/file.tsx:42
What: <specific problem found>
Why: <impact on user experience>
Fix: <concrete code-level suggestion>
If visual issues are noticed during review (AI slop patterns, poor color choices, typography problems), note them briefly but recommend:
If installed:
"Visual design issues detected. Run
design-taste-frontendfor detailed visual quality review."
If not installed:
"Visual design issues detected. For detailed visual review, install:
npx skills add leonxlnx/taste-skill -g -y"
Do not duplicate visual design review work.
Read references/interaction-checklist.md for the full expanded checklist with code-level detection patterns.
npx claudepluginhub psylch/ux-interaction-taste-skill --plugin ux-interaction-tasteAudits usability of existing front-end code or live websites using 15 principles, identifies component/system issues, rates severity, and suggests fixes.
Reviews UX/UI with Nielsen's heuristics, WCAG 2.1 accessibility, keyboard and screen reader audits, user flow analysis, and form usability evaluation. Use before release or to assess accessibility compliance.
Audits frontend code for design consistency, accessibility (WCAG AA), responsive behavior, and UI/UX best practices before deployment or after design system changes.