Raphael Salaja
Design engineer working on motion, interface sound and icon morphing.
7 agent skills · 3 tools
Agent skills
12-principles-of-animation
Disney's 12 principles, adapted for web interfaces.
Audits motion code against squash and stretch, anticipation, follow-through, secondary action and the rest. Outputs file:line findings.
npx skills add https://github.com/raphaelsalaja/skill --skill 12-principles-of-animation
to-spring-or-not-to-spring
Decides when springs beat easing curves, and when they don't.
Audits animation timing choices. Springs are not free, so this is the argument for each one, per interaction.
npx skills add https://github.com/raphaelsalaja/skill --skill to-spring-or-not-to-spring
mastering-animate-presence
AnimatePresence exit patterns, and the fixes for when they misfire.
Audits Motion and Framer Motion presence usage: exits that never play, popLayout, mode="wait", keys that break unmount.
npx skills add https://github.com/raphaelsalaja/skill --skill mastering-animate-presence
morphing-icons
Icons that morph between SVG shapes, line by line.
Builds icon components with smooth, line-based transformation rather than a crossfade wearing a costume.
npx skills add https://github.com/raphaelsalaja/skill --skill morphing-icons
sounds-on-the-web
Interface sound that earns its place, and can be turned off.
Audits sound feedback for UX quality, accessibility and the implementation patterns that keep it from being obnoxious.
npx skills add https://github.com/raphaelsalaja/skill --skill sounds-on-the-web
generating-sounds-with-ai
Procedural Web Audio synthesis, reviewed like code.
Audits Web Audio API code for synthesis quality, UX decisions and parameter choices instead of shipping the first oscillator that made a noise.
npx skills add https://github.com/raphaelsalaja/skill --skill generating-sounds-with-ai
pseudo-elements
::before, ::after and View Transitions, used deliberately.
Audits pseudo-element and View Transition usage for hover effects, decorative layers and transitions that would otherwise need a wrapper div.
npx skills add https://github.com/raphaelsalaja/skill --skill pseudo-elements
Tools
@web-kits/audio
Declarative audio synthesis for the web.
Raphael SalajaSoundSound built in code rather than shipped as files. The runtime counterpart to the sounds-on-the-web and generating-sounds-with-ai skills.
https://audio.raphaelsalaja.com
Calligraph
Fluid text transitions powered by Motion.
Raphael SalajaMotionTypographyText that changes without the usual crossfade-and-hope.
https://calligraph.raphaelsalaja.com
userinterface.wiki
A living manual for better interfaces.
Raphael SalajaSystemsCraftDesign principles, motion, typography and more, kept up to date.
https://userinterface.wiki