raphaelsalaja/userinterface-wiki

3291

userinterface-wiki UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetch…

raphaelsalaja/userinterface-wiki

4.2K

2

12-principles-of-animation Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animatio…

raphaelsalaja/userinterface-wiki

291

3

generating-sounds-with-ai Audit Web Audio API code for sound synthesis best practices. Use when reviewing procedural audio, implementing UI sou…

raphaelsalaja/userinterface-wiki

185

4

sounds-on-the-web Audit UI code for audio feedback best practices. Use when reviewing sound implementation, checking audio UX decisions…

raphaelsalaja/userinterface-wiki

161

5

to-spring-or-not-to-spring Audit animation code for correct timing function selection. Use when reviewing motion implementations, debugging anim…

raphaelsalaja/userinterface-wiki

159

6

mastering-animate-presence Audit Motion/Framer Motion code for AnimatePresence best practices. Use when reviewing exit animations, modals, or pr…

raphaelsalaja/userinterface-wiki

153

7

pseudo-elements Audit CSS for pseudo-element best practices and View Transitions API usage. Use when reviewing hover effects, decorat…

raphaelsalaja/userinterface-wiki

146

8

morphing-icons Build icon components where any icon morphs into any other through SVG line transformation. Use when asked to "create…

raphaelsalaja/userinterface-wiki

127

9

web-design-guidelines Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "aud…

raphaelsalaja/userinterface-wiki

9

10

vercel-react-best-practices React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing…

raphaelsalaja/userinterface-wiki

2

11

next-best-practices Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route…

raphaelsalaja/userinterface-wiki

1

12

next-cache-components Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

raphaelsalaja/userinterface-wiki

1

13

next-upgrade Upgrade Next.js to the latest version following official migration guides and codemods

raphaelsalaja/userinterface-wiki

1

14

skill-creator Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an ex…

raphaelsalaja/userinterface-wiki

1

15

vercel-composition-patterns React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flex…

raphaelsalaja/userinterface-wiki

1

16

vercel-react-native-skills React Native and Expo best practices for building performant mobile apps. Use when building React Native components, …

raphaelsalaja/userinterface-wiki

1