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: <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.