skills.rest
gavin100305
gavin100305COMMUNITY
Explore all skills by this author →
GitHub

userinterface-wiki

Enforce web UI best practices for motion, styling, accessibility, and UX heuristics during code review.

1|Updated May 24, 2026
Search Tags:#typography#ui guidelines#animatepresence#framer motion#ux heuristics#animation timing#css pseudo-elements
One-click install
npx skills add https://github.com/gavin100305/traffic --skill userinterface-wiki-gavin100305
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: userinterface-wiki
Source: https://github.com/gavin100305/traffic/tree/main/agents/.agents/skills/userinterface-wiki
Command: npx skills add https://github.com/gavin100305/traffic --skill userinterface-wiki-gavin100305

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid inconsistent, sluggish, or inaccessible UI experiences by enforcing detailed, automation-friendly best practices for animation timing, CSS patterns, audio feedback, icon morphing, container animation, typography, and core UX heuristics.

Core Features & Use Cases

  • UI animation and motion correctness: ensures user actions stay under 300ms, uses springs vs easing appropriately, and applies correct AnimatePresence exit patterns to prevent stale elements and layout issues.
  • UI implementation guidance across common components: covers CSS pseudo-elements (including View Transitions and native pseudo elements), morphing icon structure, and measure-and-animate container patterns using ResizeObserver.
  • UX and accessibility polish: enforces cognitive-load-friendly UX principles (Fitts/Hick/Miller/Doherty, progressive disclosure) and responsible audio feedback rules (reduced motion, settings toggles, visual equivalents).

Quick Start

Use the userinterface-wiki skill to audit a UI component and return rule-by-rule findings in terms of animation timing, exit behavior, pseudo-element correctness, and UX best-practice alignment.

Frequently Asked Questions about userinterface-wiki

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for Framer Motion AnimatePresence exit animations?▼

Correct AnimatePresence exit patterns prevent stale elements and layout issues by ensuring components animate out properly before unmounting. This maintains DOM consistency and avoids visual glitches during UI transitions.

How do I keep UI animation timing under 300ms for user interactions?▼

Keep UI animation timing under 300ms by selecting springs versus easing appropriately for each interaction type. This enforces responsive feedback and prevents sluggish motion experiences during user interactions.

Does this UI review skill check CSS pseudo-elements and View Transitions?▼

Yes, it audits CSS pseudo-elements including View Transitions and native pseudo elements. It enforces correctness for pseudo-element implementation alongside morphing icon structure and measure-and-animate container patterns using ResizeObserver.

How do I audit a UI component for UX heuristics and accessibility?▼

Audit a UI component by checking cognitive-load-friendly principles like Fitts, Hick, Miller, and Doherty laws alongside progressive disclosure. Responsible audio feedback rules with reduced motion and visual equivalents are also enforced.

When should I not use easing and prefer spring animations in Framer Motion?▼

Prefer spring animations over easing in Framer Motion for interactive user actions requiring natural motion feel. Easing suits decorative or status transitions, while springs match deterministic timing rules for interaction responsiveness.

Why does my AnimatePresence exit animation leave stale elements in the DOM?▼

AnimatePresence leaves stale elements when exit patterns are incorrectly applied, preventing proper unmounting. Enforcing correct exit behavior ensures components complete exit animations before removal, resolving layout issues and DOM inconsistencies.

Related Skills

Explore More Design & Creative Skills→
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
wibus-weewibus-wee
54

userinterface-wiki

Guide web UI/UX design with animation, typography, and CSS best practices.

Community
Advanced
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
vh2224vh2224
1

userinterface-wiki

Analyze web interfaces against structured UI/UX rules for motion, accessibility, typography, and visual design.

Community
Advanced