UI Timing, Touch Target and Focus Audit
Audit UI code for animation timing, touch-target size, focus handling and undo/confirm safety, with ranked findings and code patches.
Before & after
Same prompt, same agent — the only difference is the skill.
UI animation and touch interaction timing are important for good user experience, but they're easy to get wrong. You'll want to check things like: animation trigger delays (usually 100-150ms feels responsive), transition duration (200-500ms for most UI), touch target sizes (minimum 44pt), focus ring visibility, and error recovery patterns. Different platforms have different standards - mobile vs. web, iOS vs. Android. You'd need to review your components manually or write tests. Do you have a specific component you're worried about, or do you want a full library audit?
INTERACTION AUDIT REPORT
VIOLATIONS FOUND: 14
CRITICAL (fails WCAG adjacent)
1. Button component: 32x32pt touch target (FAIL, minimum 44pt)
→ Fix: Add padding to reach 48x48pt
→ Cost: 2 component files
2. Modal dismiss (X button): 28pt size, non-clickable padding
→ Fix: Expand touch-zone via ::before pseudo-element
→ Code patch: Included below
3. Navigation menu focus ring: Missing entirely
→ Fix: Add outline-offset 2px, outline 2px solid color
WARNING (timing outside 100-500ms range)
1. Dropdown menu open: 80ms (too fast, feels janky)
→ Recommended: 120ms
→ Patch: CSS transition-duration 0.12s
2. Collapse animation: 700ms (too slow, feels sluggish)
→ Recommended: 400ms
→ Patch: CSS @keyframes duration adjust
3. Loading state: No transition between states
→ Recommended: Add 150ms fade-in
REDUCED-MOTION COMPLIANCE
• prefers-reduced-motion honored: 8/12 components
• Missing: Tooltip, Popover, Carousel
• Fix: Wrap transitions in @media (prefers-reduced-motion: no-preference)
TOUCH-TARGET FAILURES (showing actual vs minimum)
• Checkbox: 18pt -> 44pt (need 26pt padding boost)
• Link in text: 12pt -> 44pt (wrap in interactive container)
• Slider handle: 16pt -> 44pt (increase grab zone)
CODE PATCHES
PATCH 1: Button touch target
/* Add to button base */.button { min-width: 44pt; min-height: 44pt; padding: 8px 16px; }
PATCH 2: Focus ring
.button:focus { outline: 2px solid currentColor; outline-offset: 2px; }
PATCH 3: Dropdown timing
.dropdown { transition-duration: 0.12s; }
AUTO-PATCH RECOMMENDATION
Enable for timing fixes (low-risk CSS duration changes)
Manual review for touch-target changes (layout impact)About this skill
Your modal feels sluggish, people mis-tap the close button on their phones, and someone shipped outline: none again. Nobody can say exactly what's wrong because review comments stop at "feels off." This skill measures each interaction in your code, names the standard it breaks (and at which level), and gives you the patch.
What it does
- Works out the real animation duration from your code. It handles the unit traps: Framer Motion seconds vs CSS milliseconds, Tailwind defaults, and springs that have no fixed duration.
- Calculates hit areas, counting padding and pseudo-element expanders but not margin. It checks each one against the floor that actually applies: WCAG 2.2 AA 24px, AAA/iOS 44pt, or Android 48dp.
- Catches focus defects that block release: missing
:focus-visiblereplacements, low-contrast rings, clickable divs, and modals that don't trap focus, close on Escape, or return focus when closed. - Checks easing, the properties being animated (layout jank), whether animations can be interrupted, and whether reduced-motion settings are respected.
- Matches the safety pattern to the risk: undo for frequent actions, confirm for irreversible ones, type-to-confirm for catastrophic ones. Also covers dialog button labels and default focus.
- Ranks findings as Blocker, Major or Minor, and merges repeated issues into one fix in your base components.
What you get
A ranked punch list. Each item gives file and line, the element, the rule and standard level, the measured value next to the required one, and a ready-to-paste patch. It closes with what passed and what still needs a manual check.
Best for
Design engineers and frontend developers reviewing a component or PR before release, on web, React Native, SwiftUI or Compose.
SKILL.md preview
---
name: ui-timing-touch-target-focus-audit
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.