Agent skill · design visual · raphaelsalaja
userinterface-wiki
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
Why this skill is useful
Provides 152 specific UI/UX rules and guidelines that enhance design consistency and effectiveness in web interfaces.
What it needs
About 7k tokens when loaded. Last updated 2026-07-29. 868 stars on the source repository.
What this skill does
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 Priority Category Impact Prefixes ---------- ---------- -------- ---------- 1 Animation Principles CRITICAL timing-, physics-, staging- 2 Timing Functions HIGH spring-, easing-, duration-, none- 3 Exit Animations HIGH exit-, presence-, mode-, nested- 4 CSS Pseudo Elements MEDIUM pseudo-, transition-, native- 5 Audio Feedback MEDIUM a11y-, appropriate-, impl-, weight- 6 Sound Synthesis MEDIUM context-, envelope-, design-, param- 7 Morphing Icons LOW morphing- 8 Container Animation MEDIUM container- 9 Laws of UX HIGH ux- 10 Predictive Prefetching MEDIUM prefetch- 11 Typography MEDIUM type- 12 Visual Design HIGH visual- Quick Reference 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills raphaelsalaja/skills