What problem does it solve? Web interfaces often ship with subtle quality issues: animations that exceed 300ms, missing exit animations in AnimatePresence, incorrect easing curves, poor typography defaults, and violations of established UX laws. This Skill provides a structured rulebook of 152 UI/UX best practices across 12 categories so AI agents can review, generate, or refactor frontend code consistently. ## Core Features & Use Cases - Prioritized Rule System: 152 rules organized by impact (CRITICAL to LOW) across animation principles, timing functions, exit animations, CSS pseudo-elements, audio feedback, sound synthesis, morphing icons, container animation, laws of UX, predictive prefetching, typography, and visual design. - Code Examples for Every Rule: Each rule file includes incorrect vs. correct implementations in CSS, TypeScript, and React/Motion (Framer Motion) for direct application during code review. - Quick Reference Index: SKILL.md provides prefixed rule IDs (e.g., timing-under-300ms, exit-requires-wrapper) for fast lookup, with a full compiled guide in AGENTS.md. - Use Case: When reviewing a React component with a modal, apply the exit animation rules to verify AnimatePresence wrapping, exit prop symmetry, and ease-in timing, then report findings as file:line references. ## Quick Start Ask the agent to review your React component's animations and CSS against the userinterface-wiki rules and report violations with file and line references.
