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

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.
Scan code — Read key files. Evaluate against the 3-tier framework below.
Browser check (optional) — If browser tools are available and a dev server is running, take screenshots to verify actual rendered behavior.
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: <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.

Detailed findings format

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>

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.

ux-interaction-taste