Subhan-code/oxygen-ui-solana

animate

Design and build web animations that feel right, grounded in the complete "Animations on the Web" course (animations.dev). Use proactively whenever building or improving motion — deciding whether to animate, choosing easing/duration/springs, implementing…

Quellsprache: Englisch

animation-accessibility

Reduced motion for web animation — ship every animation as two variants so motion never makes someone sick or distracted. Use when adding or reviewing `prefers-reduced-motion` handling; when deciding what an animation should become under reduced motion; when…

Quellsprache: Englisch

animation-performance

Frame budget for web motion — hold 60fps by animating composite-only properties and keeping animation off the main thread. Use when an animation is janky, choppy, or drops frames; when choosing which property to animate (`transform`/`opacity` vs…

Quellsprache: Englisch

animation-vocabulary

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding; "one shape turning into another" → Morph). Use…

Quellsprache: Englisch

css-animations

Animate with CSS alone — transitions, `@keyframes`, transforms, 3D, and `clip-path` — at the craft bar of the "Animations on the Web" course (animations.dev). Use when writing or fixing CSS motion, deciding between a transition and a keyframe animation,…

Quellsprache: Englisch

debug-animation

Diagnose an animation that feels off, janky, or broken and name the exact cause before touching code — the diagnosis loop from the "Animations on the Web" course (animations.dev). Use when an animation feels wrong but the user can't say why, when motion is…

Quellsprache: Englisch

find-animation-opportunities

Searches a UI for the few places motion would genuinely help, and names what should stay static. Read-only.

Quellsprache: Englisch

gesture-ui

Build drag, swipe, and sheet interactions that track the finger 1:1 and stay interruptible, the way the "Animations on the Web" course (animations.dev) teaches. Use when building or fixing anything the user drags, swipes, flings, holds, or dismisses with a…

Quellsprache: Englisch

improve-animations

Audits a codebase's motion against the animations.dev craft bar and writes self-contained plans another agent can execute. Read-only on source code.

Quellsprache: Englisch

motion-brief

Interview the user relentlessly about an animation before any of it gets built — one decision at a time, each with a recommended answer — until a motion brief has no blanks. Use when motion needs to be decided or stress-tested before it's implemented, when…

Quellsprache: Englisch

motion-react

Build animations with Motion for React (`motion/react`, formerly Framer Motion) the way the "Animations on the Web" course (animations.dev) teaches — and debug them when the magic misfires. Use when writing motion components, exit animations, layout or…

Quellsprache: Englisch

pick-ui-library

Picks the tool for a UI or motion task from the set the "Animations on the Web" course (animations.dev) actually uses and trusts, instead of hand-rolling a toast or installing whatever is trending. Use when choosing between CSS, WAAPI, Motion, GSAP and React…

Quellsprache: Englisch

review-animations

Reviews animation and motion code against a high craft bar derived from the "Animations on the Web" course (animations.dev). Default to flagging; approval is earned.

Quellsprache: Englisch

scroll-animations

Build scroll-triggered reveals and scroll-driven animation with the restraint and craft bar of the "Animations on the Web" course (animations.dev) — and know when a scroll animation shouldn't exist at all. Use when adding fade-in-on-scroll reveals to a…

Quellsprache: Englisch