Coding standards, frameworks, refactoring, and code review (16.4K skills)
Migrate existing Remotion video compositions to HyperFrames HTML and GSAP. Checks source code for unsupported patterns, maps animation and media features, compares rendered videos for visual similarity, and documents translation gaps.
Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.
Create and review GSAP code that animates webpage elements and SVG graphics. Covers movement, fades, easing that controls speed changes, staggered effects, playback controls, and adaptations for screen size and reduced-motion preferences.
Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.
Build coordinated animation sequences with GSAP timelines. Set when each movement starts, overlap effects, name key moments, combine smaller sequences, and control playback, including pause, reverse, restart, and jumps to a specific point.
Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.
Implement web animations with GSAP plugins, including animated layout changes, draggable elements, text effects, and SVG drawing or shape transitions. The skill explains plugin registration, configuration, cleanup, and development tools for inspecting animation timelines.
Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.
Integrate FLUX image generation and editing into applications through the BFL API. The guide covers authentication, checking asynchronous results, completion notifications through webhooks, request limits, error handling, regional endpoints, and downloading generated images before their URLs expire.
Build custom visual effects in Three.js using shaders, programs that control shape and surface appearance. Add animated waves, glowing edges, gradients, or dissolving surfaces, and extend existing materials with custom rendering behavior.
Animate 3D objects in Three.js using timed keyframes, bone movement, and shape changes. Play animations stored in GLTF models, control playback speed and looping, blend actions, and create motion through code.
Style Three.js objects with realistic, cartoon, or custom materials. Choose material types, adjust textures and reflections, create glass or metal effects, and use shader code for custom appearance while considering rendering performance.
Build asset loading for Three.js scenes, including 3D models, textures, and HDR images for backgrounds and reflections. Coordinate multiple files, track loading progress, reuse cached assets, and handle failures with retries or fallback files.
Add mouse, touch, and keyboard interaction to Three.js scenes. Implement object picking, camera navigation, dragging, and transform handles, with examples for selection feedback, coordinate conversion, and limiting the cost of interaction checks.
Set up lighting and shadows in Three.js scenes. Choose light types, create outdoor or studio lighting, use environment images to illuminate materials, and tune shadow settings to balance appearance with rendering performance.
Implement animation in React with Framer Motion examples based on Disney's 12 animation principles. Add squash and stretch, preparatory movements, smooth acceleration, overlapping motion, and hover or tap responses with defined timing.
Configure images and videos as surface textures in Three.js, and use environment images for backgrounds and reflections. Adjust placement, color settings, repetition, and filtering, then manage texture memory through compression, reuse, and disposal.
Add glow, depth-based blur, color correction, and other finishing effects to Three.js scenes. Covers combining effects with EffectComposer, writing custom shaders for screen effects, handling window resizing, and adjusting rendering workload.
Write, review, and refactor React and Next.js code using performance guidelines from Vercel. Prioritized rules help identify sequential data requests, oversized JavaScript bundles, unnecessary re-renders, and other opportunities to improve loading and responsiveness.
Create Three.js shapes, custom meshes, 3D text, and point clouds. Explains vertex editing and geometry utilities, plus instancing, a technique for efficiently drawing many copies of the same shape with different positions, sizes, or colors.
Review web interface code against the latest Web Interface Guidelines to identify issues in design, usability, and accessibility. Specify files or a file pattern, and receive concise findings with file names and line numbers.
Build reusable interface components with Tailwind CSS v4, using shared design values for colors, corners, and themes. Covers buttons, forms, responsive layouts, accessibility, and dark mode to help standardize interfaces across a project.
Refactor React components with too many true-or-false options into reusable parts. Provides guidance on component composition, shared state, and flexible interfaces, with examples of good and problematic implementations and specific guidance for React 19.
Helps agents build the foundations of a Three.js scene, including cameras, rendering settings, object grouping, and movement. Code examples cover coordinate systems, resizing, animation timing, resource cleanup, and basic performance improvements for browser-based 3D projects.