# 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'. - Skill: `psylch/ux-interaction-taste` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add psylch/ux-interaction-taste` - Raw SKILL.md: https://api.skillmd.com/api/skills/psylch/ux-interaction-taste/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: psylch (https://skillmd.com/u/psylch) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/psylch/ux-interaction-taste --- # UX Interaction Taste ## Language **Match user's language**: Respond in the same language the user uses. ## Overview 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. ## Workflow 1. **Identify scope** — Ask what to review: - **Path**: Scan directory for component/page files (.tsx, .vue, .svelte, .html). Auto-detect framework from package.json. - **URL**: Requires browser tools. If unavailable, ask for source code path instead. - **"Current project"**: Detect framework from package.json, scan src/ or app/ directories. 2. **Scan code** — Read key files. Evaluate against the 3-tier framework below. 3. **Browser check (optional)** — If browser tools are available and a dev server is running, take screenshots to verify actual rendered behavior. 4. **Produce report** — Structured findings with priority and actionable fixes. ## Review Framework: Foundation → Craft → Polish ### Tier 1: Foundation — Does it work? 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: - [ ] Loading state (skeleton, spinner, or progress for > 500ms ops) - [ ] Empty state (helpful guidance, not just "No data" or blank) - [ ] Error state (human-readable message + actionable next step, not raw stack trace) - [ ] Disabled state on buttons during submission (prevent double-submit) **Interactive feedback** — For every clickable/tappable element: - [ ] Hover state exists (visual change on mouse-over) - [ ] Focus state exists (visible keyboard focus indicator) - [ ] Active/pressed state (feedback on click/tap) - [ ] Cursor style correct (`pointer` on clickable, `not-allowed` on disabled) **Keyboard accessibility**: - [ ] All interactive elements reachable via Tab - [ ] Tab order follows visual/logical order - [ ] Escape dismisses modals/drawers/dropdowns - [ ] Enter/Space activates buttons and links - [ ] Focus trapped in modals (can't tab behind overlay) - [ ] Focus restored to trigger element after modal closes ### Tier 2: Craft — Is it well-designed? **Feedback timing**: - Input response feels instant (< 100ms) - Loading indicator appears for operations > 500ms - Optimistic updates where appropriate (don't wait for server round-trip) **Form UX**: - Labels associated with inputs (clickable labels) - Validation timing appropriate (on blur or submit, not on every keystroke) - Error messages appear near the relevant field, not just at top - Required fields are marked - Successful submission has clear confirmation **Focus management**: - Opening a modal moves focus into it - Closing returns focus to the trigger - Route changes move focus to new content or page top - Skip-to-content link exists for keyboard users **Responsive behavior**: - Touch targets >= 44x44px on mobile - No horizontal scroll on standard viewports - Navigation adapts (hamburger menu, bottom nav, etc.) - Content remains readable and usable across breakpoints **Animation quality** (when animation exists): - Duration 150-300ms for micro-interactions - Ease-out for entrances, ease-in for exits - Respects `prefers-reduced-motion` - Serves a purpose (guides attention, shows state change) — not decorative ### Tier 3: Polish — Does it feel right? **Micro-interactions**: - User actions are acknowledged (button state change, ripple, etc.) - Transitions between states feel smooth, not jarring - Progressive loading (skeleton → content, not blank → full page flash) **Error recovery**: - Failed actions can be retried without re-entering data - Network errors suggest checking connection, offer retry - Form data preserved on validation failure - Undo available for destructive actions (or confirmation dialog) **Flow intentionality**: - User always knows where they are (breadcrumbs, active nav state) - User always knows what to do next (clear CTAs, progressive disclosure) - Back button works as expected - No dead ends (every state has a path forward) ## Anti-patterns (common in AI-generated code) 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 | ## Completion Report ``` [UX Interaction Review] Complete! Target: Framework: Foundation: Craft: Polish: Top priorities: 1. 2. 3. 💡 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. ## Detailed findings format For each finding: ``` [Tier] Category — Issue title File: path/to/file.tsx:42 What: Why: Fix: ``` ## Integration with design-taste-frontend 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-frontend` for 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. ## References Read `references/interaction-checklist.md` for the full expanded checklist with code-level detection patterns.