userinterface-wiki
152 UI/UX best practices rules across 12 categories, prioritized by impact for code review and generation.
- Covers animation principles, timing functions, exit animations, CSS pseudo-elements, audio feedback, sound synthesis, morphing icons, container animation, UX laws, predictive prefetching, typography, and visual design
- Each rule includes a prefix (e.g.,
timing-under-300ms,spring-for-gestures) for automated detection and outputs file:line findings - Prioritized by impact: CRITICAL rules for animation principles, HIGH for timing functions and UX laws, MEDIUM for audio and typography
- Designed for reference during implementation or automated code review; individual rule files contain explanations, incorrect and correct code examples
User Interface Wiki
Comprehensive UI/UX best practices guide for web interfaces. Contains 152 rules across 12 categories, prioritized by impact to guide automated code review and generation.
When to Apply
Reference these guidelines when:
- Implementing or reviewing animations (CSS transitions, Motion/Framer Motion)
- Choosing between springs, easing curves, or no animation
- Working with AnimatePresence and exit animations
- Writing CSS with pseudo-elements or View Transitions API
- Adding audio feedback or procedural sound to UI
- Building morphing icon components
- Animating container width/height with dynamic content
- Designing UI that respects cognitive psychology (Fitts's, Hick's, Miller's laws)
- Implementing predictive prefetching for perceived performance
- Setting up typography, OpenType features, or numeric formatting
Rule Categories by Priority
More from raphaelsalaja/userinterface-wiki
12-principles-of-animation
Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
282generating-sounds-with-ai
Audit Web Audio API code for sound synthesis best practices. Use when reviewing procedural audio, implementing UI sounds, or checking audio parameter quality. Outputs file:line findings.
181sounds-on-the-web
Audit UI code for audio feedback best practices. Use when reviewing sound implementation, checking audio UX decisions, or auditing accessibility. Outputs file:line findings.
156to-spring-or-not-to-spring
Audit animation code for correct timing function selection. Use when reviewing motion implementations, debugging animations that feel wrong, or choosing between springs and easing. Outputs file:line findings.
156mastering-animate-presence
Audit Motion/Framer Motion code for AnimatePresence best practices. Use when reviewing exit animations, modals, or presence state. Outputs file:line findings.
151pseudo-elements
Audit CSS for pseudo-element best practices and View Transitions API usage. Use when reviewing hover effects, decorative layers, or page transitions. Outputs file:line findings.
144