Design Engineering

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use

• Use when the user asks for UI polish, product design critique, animation direction, or high-craft component decisions.
• Use when reviewing frontend code for motion quality, easing, duration, physicality, interaction feedback, or subtle interface details.
• Use when building or refining React, Tailwind, CSS, or Framer Motion interfaces where taste and perceived quality matter.

Limitations

• This skill provides design engineering judgment; it does not replace project-specific product requirements, accessibility testing, or real-device motion review.
• Verify framework versions, installed dependencies, and rendered behavior before treating animation or UI recommendations as production-ready.
• Do not apply these rules mechanically when an existing brand system, platform convention, or user requirement calls for a different interaction language.