Skill UI

This guide provides expert knowledge on implementing complex, production-ready animations within the Makepad UI framework. It covers animation patterns for various interaction states, including hover, focus, pressed, and disabled. Users can learn to write code for transitions, manage state changes, and utilize advanced concepts like easing functions and keyframes to build visually rich user interfaces.

Generates a single, self-contained animated slide designed for educational or historical explainers. Utilizing CSS keyframes, this skill creates a retro, 8-bit, or pixel-art aesthetic, complete with animated mascots, kinetic typography, and timeline ribbons. Ideal for marketing campaigns, product history reveals, or any content requiring a nostalgic, video-like feel without external JavaScript.

This specialized skill reviews user interface animations, motion patterns, and interactive code (CSS, Framer Motion, etc.) against a strict, high-craft standard. It evaluates not only functionality but also performance, accessibility, physical correctness, and adherence to motion design principles. Use it when reviewing diffs related to transitions, keyframes, or gestures to ensure the motion feels right, not just that it runs.

A template designed for creating educational and marketing explainer animations with a strong retro, 8-bit pixel aesthetic. Utilizing pure CSS keyframes for seamless looping, the design features a central pixel mascot, kinetic text displays, and a dynamic timeline ribbon. Perfect for conveying information in a nostalgic style without relying on JavaScript.

Provides domain knowledge for compiling character/scene/prop creative settings into executable image generation prompts. Covers reference board layouts (character identity boards, sequence keyframes, environment study boards, prop study boards), composition and camera language, avoiding image moderation false positives, entity continuity, and cross-variant derivative design based on the main image. Not for video prompt compilation, pure material editing, or evaluating generated outputs.

Write Remotion markup so Remotion Studio can recognize it as interactive, enabling element selection, drag-and-drop, style editing, and editable keyframes and easing values.

This specialized skill reviews user interface animations, motion patterns, and interactive code (CSS, Framer Motion, etc.) against a strict, high-craft standard. It evaluates not only functionality but also performance, accessibility, physical correctness, and adherence to motion design principles. Use it when reviewing diffs related to transitions, keyframes, or gestures to ensure the motion feels right, not just that it runs.