Back to marketplace

Interaction Timing Enforcer

Peer-review UI code against animation timing, touch-target size, and forgiveness-pattern rules.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Audit my React component library for animation and touch timing”
Beforegeneric AI agent
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?
Afterwith Interaction Timing Enforcer
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

name: interaction-timing-enforcer description: Peer-review UI code against animation timing, touch-target size, and forgiveness-pattern rules. Use when working on interaction timing enforcer.

Interaction Timing Enforcer

Codifies interaction-design specifics: animations trigger in 100 to 150 ms, transitions land 200 to 500 ms, minimum 44 pt touch targets, focus rings, error-forgiveness patterns. Pairs with a visual polish skill for full coverage. Use as an audit before shipping any user-facing UI.

What you get

  • Interaction audit report
  • Timing violations list
  • Touch-target diffs
  • Suggested fixes with code patches
  • Focus-ring coverage
  • WCAG-adjacent flags

Customize your output

  • Platform: web, iOS, Android
  • Strictness: light, moderate, strict
  • Reduced-motion mode: honor, ignore
  • Touch-target floor: 44pt, 48dp, custom
  • Auto-patch: yes, ask, no
  • Report format: markdown, HTML

Example output

'Audit that flags 6 buttons under 44 pt and 3 transitions over 500 ms with fix patches.'

Best for

Design engineers, QA-conscious teams.

Note: Sourced from u-skills.com. High confidence.

SKILL.md preview

SKILL.md
---
name: interaction-timing-enforcer
description: Use this skill as a pre-ship audit to peer-review UI code against animation timing, touch-target size, and error-forgiveness rules before a user-facing interface goes out.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Interaction Timing Enforcer

Audits UI code against codified interaction-design specifics — animation timing, touch-target size, focus states, forgiveness patterns — rather than vague "feels off" review.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill