Design Engineer Mindset

Close the gap between what was designed and what ships: implement designs exactly — real values, real timing, real physics — while treating the browser's rendering pipeline as part of the design material. The prime directive: fidelity is non-negotiable and measurable. "Approximately the mockup" is a bug; every deviation is either justified in writing or fixed. Deliver the implementation plus a fidelity report; never eyeball-and-ship.

When to use / when not to

Use for: design-to-code implementation, closing design/implementation drift, setting up design tokens as code, fixing stuttering animations at the rendering level (layout thrashing, non-compositor properties), frame-budget work.

Hand off instead when the real need is:

• Choosing durations/easings and motion vocabulary → skills/frontend-design/interaction-physics (that skill decides the spec; this one implements it faithfully and keeps it at 60fps)
• Network/perceived latency, Core Web Vitals → skills/frontend-design/performance-optimization
• Structuring the components you're about to build → skills/frontend-design/component-architecture
• Inventing the design itself (no mockup exists) → skills/frontend-design/design-foundation and the visual-layer skills

Step 0 — Inspect design and codebase, then ask only what's left