Design engineering quality

Use this contract after product intent, interaction logic, and an approved design direction exist. It adds frontend craft; it does not invent product strategy or visual identity.

Authority

Read the approved design brief, directions, DESIGN_SYSTEM.md, token contract, and task criteria first. The project contract wins every conflict. External skills are perspectives, not authority, and their output still requires normal review and verification.

Route the smallest capability

Do not invoke the entire collection. Select one primary capability and at most one focused specialist unless the human explicitly requests broader exploration. For substantial design-critical web UI, emil-design-eng is the first external design implementation/refinement skill when installed. Do not start with Anthropic frontend-design; keep it secondary and opt-in.

If the external collection is unavailable, follow this repository's existing design-system, interaction, frontend-quality, motion, and critique contracts. Never block ordinary UI work merely because an optional skill is not installed.

Anti-slop craft gate

For substantial design-critical web UI, use emil-design-eng when installed as a craft pass during implementation or refinement. Require specific findings about hierarchy, typography, spacing, density, composition, interaction, content, restraint, motion, accessibility, and performance. Reject generic approval such as “looks clean and modern.”

This pass does not replace discovery, user needs, UX strategy, design intake, human direction approval, design tokens, responsive/accessibility audits, Playwright evidence, or the independent final critic.

Motion gate

Before adding motion, answer:

1. What user or system change needs explanation?
2. Does motion communicate causality, continuity, feedback, hierarchy, or state?
3. Is a cheaper CSS/native transition sufficient?
4. What happens when the interaction is interrupted or reversed?
5. What is the reduced-motion behavior?

Record the interruption/reversal answer and a concrete performance budget in the candidate contract before routing external motion source code.

If the answers are weak, do not animate. Motion is never required merely to make an interface feel premium. Prefer transform and opacity, preserve input responsiveness, and verify the running behavior rather than reading code alone.

Run ./agentic design resources --need motion after the motion contract is approved. Motion Primitives may be recommended for web only when it is more appropriate than a small local CSS or native transition. Its upstream project is beta: select one exact primitive, keep a reviewed diff and immutable source revision, restyle through project tokens, and verify interruption, keyboard, screen-reader, reduced-motion, responsive, and performance behavior.

Completion

Return the capability selected, why it was the minimum sufficient route, the specific changes or findings, running-product evidence, reduced-motion and accessibility results when relevant, and remaining compromises. The builder may not self-certify final quality.