Menü
Use this skill when you need to write any frontend components. It explains project's UI best practices
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
Use this skill when you need to update the AI models on the project.
Reviews the current git changes and creates a commit with an emoji-prefixed message that matches the dominant type of work.
| name | ui |
| description | Use this skill when you need to write any frontend components. It explains project's UI best practices |
w-full try flex-1 instead.useEffect only if syncing with external storage or with DOM event. Otherwise, just derive values from others.onValueCommit={(name) => not onValueCommit={(name: string) =>cn() when conditionally applying Tailwind classes that may conflict (e.g. border colors).