Animation & Graphics Agent Skills

Generates a single-frame HTML template with a cinematic film-leak aesthetic: warm light leaks, 35mm grain, 2.39:1 letterbox, and serif typography for opening titles or chapter cards.

Guides building video-generation SaaS apps with Remotion, covering framework selection, the Player component, and rendering options across Lambda, Vercel, Node.js, and Cloudflare.

Guidance for writing Remotion React markup with animation patterns, media handling, sequences, effects, and advanced features like 3D, audio visualization, and parameterized videos.

Takes a PRD, reference URL, screenshot, or keywords to produce a DESIGN.md specification, then generates production-ready web code that meets UI/UX, visual, motion, and responsive standards.

Implements accessible, performant animations and transitions in React/Next.js apps using Motion, with tokens, reduced-motion support, and device adaptation.

Builds creative browser demos with @chenglou/pretext for DOM-free text layout, enabling ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.

Loads Remotion best practices for React video creation, covering animations, composition setup, assets, audio, captions, sequencing, transitions, media metadata, Three.js, Tailwind, and rendering patterns.

Adds smooth, native-feeling animations to React apps using the View Transition API, covering shared elements, route changes, and list reordering with CSS-based control.

Creates 3D elements and interactive browser experiences with Three.js, covering scenes, materials, controls, and post-processing.

Translates Apple's fluid interface design principles—springs, interruptible motion, velocity handoff, and momentum projection—into concrete web techniques for building and reviewing gesture-driven UI.

Apply named StyleSeed motion to React components using framer-motion, with personality seeds and keyword moves from a motion library.

Animate DOM and SVG elements with GSAP's core engine: tweens, easing, staggers, transforms, and responsive matchMedia.

Animates Vue, Nuxt, Svelte, and SvelteKit components with GSAP, handling lifecycle hooks, scoped selectors, and cleanup on unmount.

Add smooth, native-feeling page transitions and animations to React apps using the browser's View Transition API, with support for shared elements, enter/exit animations, and directional navigation.

Provides portable CSS transitions for common UI patterns like dropdowns, modals, tooltips, and skeleton loaders. Each transition is a drop-in snippet with semantic CSS custom properties and a prefers-reduced-motion guard.

Creates, edits, and renders videos and animations from HTML compositions using the HyperFrames framework, handling project state, input adaptation, and workflow routing.

Provides atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) for composing animations with HyperFrames.

Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.

Creates Apple-style soft UI prototypes with squircle cards, spring motion, and ambient mesh backgrounds.

Generates a video outro frame with a logo assembled from geometric blocks, glow bloom animation, tagline reveal, and CTA, using pure CSS/SVG.

Generates a single-file HTML page with a cyberpunk glitch-art title frame, featuring chromatic aberration, scanlines, noise grain, and data-corruption animations.

Creates a 1920×1080 presentation deck with React-like component layout, strict typography and color constraints, and no template restrictions.

Provides domain-specific guidance for building videos with Remotion, covering captions, FFmpeg operations, audio visualization, and a wide range of composition techniques.

Add scroll animations, micro-interactions, or page transitions to a component using GSAP, with reduced-motion support and performance best practices.

Render a proposed redesign of a page as a self-contained static HTML file, then iterate via chat-driven commands until approved.

Port an existing Remotion (React) composition's source to HyperFrames HTML. Use only on explicit requests to migrate from Remotion; for new compositions or uncertainty, use the general HyperFrames skill.

Builds distinctive, production-grade frontend interfaces with bold aesthetics, avoiding generic AI design patterns.

Creates programmatic videos with React using Remotion, covering compositions, animations, motion graphics, and MP4 rendering, plus walkthrough and content-to-animation workflows.

Provides domain-specific best practices for creating videos with Remotion in React, covering 3D, animations, audio, captions, charts, transitions, and more.

Implements accessible, performant UI motion for React and Next.js apps, covering tokens, patterns, and modal behavior.

Provides design engineering guidance focused on animation principles, UI review, and interface craftsmanship.

Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.