raphaelsalajaCommunity·8 Agent Skills Included

userinterface-wiki

152 UI/UX rules for better animations, CSS, and interfaces

Reviews and generates web interface code against 152 prioritized UI/UX rules covering animation timing, springs, exit animations, pseudo-elements, audio feedback, typography, and visual design. Eliminates guesswork around easing curves, motion duration, hit targets, and accessibility details that make interfaces feel unpolished. Gives AI agents clear incorrect-vs-correct code examples so reviews and refactors stay consistent.

884|43

↗

npx skills add raphaelsalaja/userinterface-wiki --all -g -y

Available:

Tells the AI agent which coding, styling, and content conventions to enforce in this repo, and provides the full compiled set of 152 UI/UX rules to apply when reviewing or generating interface code.

All Skills in This Repository (8)

Pure Emerald Level Indicators

📦 In Repo

raphaelsalaja

pseudo-elements

Audit CSS pseudo-element misuse and View Transitions API violations in TSX/MDX files.

mastering-animate-presence

Audit React AnimatePresence and motion code for best-practice violations.

12-principles-of-animation

Audit web animation code against Disney's 12 principles and output file:line findings.

generating-sounds-with-ai

Audit Web Audio API code for sound synthesis best practices.

sounds-on-the-web

Audit audio feedback implementations in React and Next.js UI code.

to-spring-or-not-to-spring

Detect misapplied spring and easing timing functions in animation code.

morphing-icons

Create morphing SVG icons from three lines with rotation groups.

userinterface-wiki

Reviews UI code against 152 rules covering animation, CSS, audio, typography, and UX patterns.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install userinterface-wiki?▼

Run `npx skills add raphaelsalaja/userinterface-wiki --all -g -y` in your terminal to install the full rule set globally for your AI agent.

What does the User Interface Wiki skill do?▼

It gives your AI agent 152 prioritized UI/UX rules covering animation timing, springs, exit animations, CSS pseudo-elements, audio feedback, typography, and visual design, each with incorrect-vs-correct code examples.

Can AI review my UI animations automatically?▼

Yes. The agent checks your code against rules like the 300ms animation cap, spring physics for gestures, and AnimatePresence exit patterns, then reports file and line findings.

Does it work with Claude Code and Cursor?▼

Yes. The skill follows the standard SKILL.md format, so it runs in Claude Code, Cursor, Codex, and other compatible AI coding agents.

Do I need design experience to use these UI rules?▼

No. Each rule explains why it matters in plain language and shows a correct code example, so anyone can apply professional interface polish.