raphaelsalaja/skill
7 skills2.2k installs224 starsGitHub
Install
npx skills add https://github.com/raphaelsalaja/skillSkills in this repo
112 Principles Of Animation12-principles-of-animation is a MIT-licensed agent skill (version 2.0.0) that reads specified animation source files, evaluates them against Disney's 12 principles adapted for web interfaces, and outputs prioritized findings in file:line format. The skill groups checks into rule categories with priority prefixes so reviewers can triage timing, easing, staging, and related motion issues quickly. Developers reach for 12-principles-of-animation when implementing or reviewing CSS, JavaScript, or framework animation code and want an objective checklist instead of subjective motion critique. Trigger it during PR review, animation refactors, or accessibility and performance passes on interactive UI motion.1.2kinstalls2Morphing IconsMorphing Icons is an agent skill for solo builders shipping polished micro-interactions in React or similar frontends. It encodes a constraint-based design system: each icon is exactly three lines in a 14×14 viewbox, with spare lines collapsed to invisible center points so transitions interpolate real geometry rather than fading between unrelated paths. You define IconLine tuples, IconDefinition records with optional rotation and group keys, and wire animation between named states when users ask for morphing icons, icon transitions, or transform-between-icons behavior. The approach suits nav toggles, play/pause swaps, and theme controls where brand consistency matters. It assumes comfort with SVG attributes and component props—not a drop-in icon font. MIT licensed reference material ties back to morphing-icons MDX source for deeper patterns.230installs3Mastering Animate Presencemastering-animate-presence is a focused reviewer skill for solo builders shipping polished React interfaces with Motion or Framer Motion. The agent reads specified files or patterns, then checks conditional motion trees against four rule families prefixed exit-, presence-, mode-, and nested-. Common failures—mounting motion.div without AnimatePresence, missing exit props, wrong presence modes, or nested exit timing—are illustrated with fail and pass snippets so fixes are obvious. Output is deliberately mechanical: file:line findings you can triage like a linter. Invoke it when reviewing PRs that touch dialogs, drawers, route transitions, or any UI that unmounts with animation. It does not replace visual QA in the browser, but it prevents the structural mistakes that make exits snap or flash. Pair with your component tests and a quick manual modal pass before launch.203installs4To Spring Or Not To SpringTo Spring or Not To Spring is a checker skill for solo builders shipping polished web and mobile UI who want motion that feels intentional, not accidentally springy or sluggish. It reads animation-related code you point at, then applies a prioritized rule set across spring selection, easing selection, duration, and cases where animation should be disabled entirely. The core question is whether motion reacts to the user or communicates system state—gestures and drags should survive interruption with springs, while toasts and route changes need predictable easing endpoints. Outputs are concrete file:line findings so Claude Code, Cursor, or Codex can patch violations in place. Use it while implementing interactions, when animations feel wrong, or during Ship review before release. Intermediate familiarity with CSS transitions, WAAPI, or motion libraries helps, but the skill encodes the decision logic so you do not memorize timing theory.155installs5Pseudo ElementsPseudo-elements is a frontend review skill for solo builders who want lint-like rigor on CSS decorations and page transitions without adopting a full design-system audit. The agent reads user-specified files or patterns, applies three rule families—before/after pseudo rules, View Transitions API usage, and native styling conventions—and returns pass/fail examples with concrete file:line locations. It fits when you are reviewing hover effects, decorative layers, or route-level transitions before merge, especially in React or CSS-module codebases where extra spans often replace ::before overlays. Complexity is intermediate because you must point the skill at the right stylesheets and components. Use during Ship review after feature work in Build frontend, or when iterating Operate-side UI regressions. It does not replace accessibility or performance budgets; it tightens pseudo and transition hygiene so agents and humans fix the same class of visual debt consistently.152installs6Sounds On The WebSounds on the Web is an agent skill for solo builders shipping interactive web or app UIs who add subtle audio feedback without breaking accessibility or annoying users. It reads specified source files—or asks you for paths—then audits against prioritized rule categories spanning accessibility (visual equivalents, disable toggles), whether sound is appropriate for the action, implementation quality, and matching sonic weight to UI importance. Findings land as file:line citations you can paste into fixes. Use it during code review before ship, when refactoring notification or game-like micro-interactions, or when validating that sound never replaces visible state changes. It complements visual design review rather than replacing sound design tooling.127installs7Generating Sounds With AiGenerating Sounds with AI is a checker skill for solo builders shipping web apps, games, or extensions that use procedural UI audio. Install it when you or your agent need a structured pass over Web Audio API usage—shared AudioContext lifecycle, envelopes, oscillator design, and parameter sweeps—instead of subjective listening alone. The workflow reads target files (or asks you for paths), applies four prefixed rule families, and emits actionable file:line violations with pass/fail examples in the skill doc. It suits intermediate front-end devs who already wrote synthesis code and want review parity before merge. It does not generate sample libraries or replace a sound designer; it enforces best practices for in-browser synthesis. Pair it with implementation work in the Build phase, then run it again in Ship before release.120installs