skills.rest
yikZero
yikZeroCOMMUNITY
Explore all skills by this author →
Website𝕏@yikZeroGitHub

design-engineering

Guide frontend teams to adopt a cohesive motion design framework for UI components.

Updated Mar 17, 2026
Search Tags:#design#ui#accessibility#frontend#animation#guidelines#motion
One-click install
npx skills add https://github.com/yikZero/rover --skill design-engineering-yikzero
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineering
Source: https://github.com/yikZero/rover/tree/main/.claude/skills/design-engineering
Command: npx skills add https://github.com/yikZero/rover --skill design-engineering-yikzero

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a cohesive framework and language for crafting polished UI motions, interactions, and component behavior, ensuring consistent, delightful experiences.

Core Features & Use Cases

  • Establishes a design-engineering philosophy for UI motion, transitions, and interaction details.
  • Guides decisions on timing, easing, and accessibility across common components (buttons, drawers, modals, tooltips, popovers, drag interactions).
  • Use case: when implementing new UI components, reference the guidelines to ensure consistency and accessibility.

Quick Start

Apply these guidelines to review and implement UI motion for your next component.

Frequently Asked Questions about design-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is UI motion design and how does it apply to frontend components?▼

UI motion design specifies transitions, easing, and interaction behaviors for frontend components like buttons, drawers, and modals. It establishes a cohesive framework ensuring consistent, delightful experiences across web and mobile interfaces.

How do I implement accessible animations that respect prefers-reduced-motion?▼

Implement accessible animations by specifying requirements for prefers-reduced-motion considerations in your UI components. This ensures users with motion sensitivities experience robust, maintainable interactions without unnecessary visual movement.

What's the best way to standardize transitions and easing across multiple UI components?▼

Standardize transitions and easing by adopting a cohesive motion design framework that guides decisions on timing and accessibility across common components like buttons, tooltips, popovers, and drag gestures for consistency.

Does this motion design framework work for both web and mobile interactions?▼

Yes, the motion design framework applies across web and mobile platforms. It specifies requirements for transitions, easing, and accessibility considerations to ensure consistent behavior for drawers, modals, and drag gestures.

When do I need a design-engineering framework for UI component animations?▼

You need a design-engineering framework when implementing new UI components to ensure consistency and accessibility. It guides decisions on timing, easing, and transitions across buttons, tooltips, drawers, and drag interactions.

What code practices should I follow to maintain robust UI animations?▼

Follow code practices that implement robust, maintainable animations by adhering to a cohesive framework specifying transitions, easing, and accessibility considerations. This ensures consistent motion behavior across all UI components.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

normalize

Normalize frontend UI typography, color, spacing, and components to design tokens.

Community
Advanced
FlintmereFlintmere

design-motion

Specify accessible motion specs for Flintmere surfaces with reduced-motion variants.

Official
Advanced
Shaarav4795Shaarav4795

ui-animation

Define UI motion guidelines for timing, easing, reduced-motion, and transitions.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate