---
name: design-engineering-systems
description: Use when the task asks to implement a premium UI in React, Next.js, Tailwind, CSS, Framer Motion, GSAP, or a similar frontend stack with strong responsiveness, maintainability, and production quality.
---

# Design Engineering Systems

Use this skill when the task is no longer just about direction. The design now needs to become clean, responsive, maintainable frontend code.

Primary goal: preserve the visual ambition while making the implementation scalable and readable.

## Design-To-Code Workflow

Work in this order:

1. Define the visual thesis and page anatomy.
2. Translate that into layout primitives and section boundaries.
3. Create tokens first: colors, spacing, radius, type scale, motion timings.
4. Build the static composition before adding motion.
5. Add motion and 3D only after the hierarchy works without them.
6. Tune mobile and tablet layouts before polishing edge details.

## System Rules

- Prefer CSS variables for theme values and atmospheric effects.
- Keep typography and spacing scales consistent across sections.
- Split sections by narrative role, not arbitrary component count.
- Use semantic HTML and accessible interaction patterns first, then decorate.
- Give every effect a containment boundary so it does not leak complexity across the app.
- Avoid abstractions that hide the structure of a visually unique page.

## Responsive Execution

- Design mobile intentionally; do not just stack desktop blocks.
- Collapse complexity, not meaning.
- Reduce blur, masks, sticky regions, and scene count on smaller screens.
- Keep one strong visual anchor on mobile instead of trying to preserve every flourish.
- Ensure headline breaks and CTA grouping are manually checked at common widths.

## Styling Heuristics

- Establish page-level background treatment first.
- Use section wrappers for spacing rhythm and tonal transitions.
- Create reusable utility classes only when repetition is real.
- Prefer explicit component styling over vague utility soup in premium one-off sections.
- When using Tailwind, organize with readable class groupings and extract only where it improves clarity.

## Motion Integration

- Add motion to existing structure; do not let animation define layout.
- Prefer a small motion vocabulary reused across the page.
- Keep entrance, hover, and scroll systems consistent in easing and intensity.
- Guard expensive scenes behind viewport entry and reduced-motion checks.

## Review Checks

- Could another engineer understand the section architecture quickly?
- Are tokens centralized, or scattered through magic numbers?
- Does the page remain legible before assets, video, or 3D finish loading?
- Is the implementation premium because of structure, not because of effect spam?
- Would removing 30 percent of the code make the same design easier to maintain?