Design Engineering

What it does

This skill codifies practical rules, patterns, and accessibility guardrails for UI motion and component polish. It gives an agent concrete guidance on when to add animation, which properties to animate (transform & opacity), easing and duration conventions, and performance/accessibility considerations (prefers-reduced-motion, GPU-friendly properties). Use it to evaluate or author UI motion, write component guidelines, or audit front-end code for animation anti-patterns.

When to use it

Trigger when reviewing UI components, proposing animation details, writing CSS/Framer Motion code, or auditing performance and accessibility of motion. Useful for tasks like: recommending easing curves and durations, fixing janky animations, converting Framer shorthand to GPU-accelerated transforms, and enforcing reduced-motion.

What's included

• Scripts: none (has_scripts=false)
• References: none listed in repository (has_references=false)
• Instructions: detailed rules for easing, duration, transform usage, clip-path patterns, performance gotchas, accessibility (reduced motion), and a review checklist with concrete fixes. The skill includes CSS/TSX examples and pragmatic rules such as "never animate height/width" and "exit animations should be faster than enter."

Compatible agents

Best suited for frontend and engineering-focused agents (Cursor, Copilot, Claude Code) that author or review UI code. It's also useful to design/UX agents when deciding whether motion adds clarity or distraction.