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…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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,…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

find-animation-opportunities

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

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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.

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية

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.

لغة النص الأصلي: الإنجليزية

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…

لغة النص الأصلي: الإنجليزية