Userinterface Wiki

This is a comprehensive reference for UI/UX decisions during code review or generation. It covers 152 rules across animations, typography, audio feedback, and UX patterns, each tagged with priority levels from critical to low. The categorization is genuinely useful: you can quickly check whether springs or easing curves fit your use case, verify exit animation setup in AnimatePresence, or validate that your audio feedback respects accessibility standards. The rules are concrete, like "timing-under-300ms" or "pseudo-over-dom-node", making them easy to search and apply. Most valuable when you're implementing motion or need to systematically review interface code against established patterns rather than guessing at best practices.

skills.sh installs: 4.7K
GitHub stars: 947
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add raphaelsalaja/userinterface-wiki --skill userinterface-wiki --agent claude-code

Installs into .claude/skills of the current project.

Files

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