User Interface Wiki skill
A skill with 152 rules on animation, typography, sound and laws of UX: reviews CSS and components with findings as file and line
- 933 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is markdown rule files with no scripts
- Install adds files to the agent's skills directory through npx skills
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/user-interface-wikiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is markdown rule files with no scripts
- Install adds files to the agent's skills directory through npx skills
This is third-party code. Review the repository files before installing.
What it does
User Interface Wiki packs the userinterface.wiki site into a skill with 152 rules across 12 categories. They cover animation principles, springs and easing, exit animations and AnimatePresence, CSS pseudo-elements and View Transitions, audio feedback and sound synthesis, morphing icons, container animation, laws of UX (Fitts, Hick, Miller), predictive prefetching, typography and visual design. Categories are ordered by impact. The agent applies the skill when reviewing animations, CSS, audio, typography and icons and reports findings as file:line. Each rule in skills/rules walks through an incorrect and a correct version with code.
Who it is for. For frontend developers and design engineers who check interfaces for smoothness, typography and animation behavior.
Good fit when
- You review animations in Motion or Framer Motion and check duration (under 300 ms), stagger delays (under 50 ms per item) and the choice between a spring and easing
- A context menu or modal animates wrongly: by the rules a menu gets an exit only, no entrance, and a dialog's backdrop is dimmed
- You need to check numbers in tables and OpenType settings of text against the typography rules
- You build cursor-driven prefetching and want the six prefetch rules to lean on
- You add sound to interface events and want to check the off switch, a volume control and respect for reduced motion
Not a fit when
- You need a full WCAG accessibility audit: the skill's a11y rules concern audio feedback
- Your stack has no CSS and Motion: the examples target the web, and some rules refer to AnimatePresence
- You want to read articles with demos: they stay on userinterface.wiki, while the skill holds condensed rules
Example request
Review the components in src/components with userinterface-wiki: animation durations, springs and exit animations. Report findings with file and lineLimitations
The rules reflect the author's position and some are strict: animations under 300 ms, stagger under 50 ms, linear easing only for progress indicators. Apply them with your product in mind. The skill metadata is dated March 2026. The interactive demos and narrated articles stay on the website. The skill's front matter says 11 categories while the body lists 12, so rely on the prefix list in SKILL.md.
How to disable. Delete the userinterface-wiki folder from the agent's skills directory. The repository and website have no other effect on your system.
FAQ
How do I install User Interface Wiki in Claude Code?
Run npx skills add raphaelsalaja/userinterface-wiki. The site documentation presents the command as working with Claude Code, Codex, Cursor and other coding agents.
How many rules does the skill have and how are they organized?
152 rules in 12 categories. Each category has its own name prefix: timing-, spring-, exit-, pseudo-, a11y-, morphing-, container-, ux-, prefetch-, type-, visual-. Categories are ordered by priority from critical to low.
What does the skill say about animation duration?
The timing-under-300ms rule asks user animations to finish within 300 ms. Stagger is capped at 50 ms per item, and similar elements should use identical values.
Is the skill useful for interface sound?
Yes, it has categories for audio feedback and sound synthesis. The a11y rules ask for a way to turn sound off, a volume control, a visual equivalent and a reduced-motion check.
What does the skill check in typography?
The type- category has 16 rules on font setup, OpenType features and numeric formatting. The agent applies them when reviewing CSS and text components.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
A UI design skill: three genuinely different directions side by side, one chosen and refined against real screenshots in agents like Claude Code
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
Skills with Apple HIG, Material Design 3 and WCAG 2.2 rules for reviewing interfaces on iOS, macOS, Android, the web and more
AI Design Skills
landing-page-design
A skill for building a landing page from scratch: intake questions, page structure, conversion copy and a strict visual system
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| User Interface Wiki (this entry) | no | 933 | |
| Make interfaces feel better | no | 3,867 | a skill on small interface details: shadows, radii, optical alignment, hit areas |
| Design Motion Principles | no | 1,449 | focused on motion and builds animated components, without audio, UX laws or typography |
README in short
The repository README describes userinterface.wiki: a collection of articles and patterns on interface design built on Fumadocs and Base UI, with article narration through Eleven Labs. Articles live in content/ as MDX and readers can propose changes through pull requests. The skill itself is described in SKILL.md inside the skills folder and on the skill page of the site: the rules, category prefixes and the install command.
README badge
Original SKILL.md
--- 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 sprin