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.
Best for Automated code reviewWorks with GitHubLow risk
⌘source
- author
@gsd-build- repo
- gsd-build/gsd-2
- language
- TypeScript
★7.2kstars
737forks
May 6, 2026
✦overview.md
Key Features
- ·152 UI/UX rules
- ·12 categories prioritized by impact
- ·File:line findings for code review
- ·Covers animations, CSS, audio, typography
- ·Includes cognitive psychology principles
Use Cases
- →Reviewing animation implementations for performance and accessibility
- →Auditing typography, spacing, and responsive design
- →Evaluating predictive prefetching strategies
- →Checking icon component morphing patterns
- →Implementing exit animations with AnimatePresence
Best for
- ✓Automated code review
- ✓UI consistency enforcement
- ✓Frontend teams
Not ideal for
- !Backend-only projects
- !Non-web interfaces
FAQs
name
userinterface-wiki
description
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.
license
MIT
metadata:{"author":"raphael-salaja","version":"3.0.0"}
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- |
$install
1-click copynpx skills add gsd-build/gsd-2 --skill userinterface-wikiSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.