Frontend Design

Read the user's frontend requirements: a component, page, application, or interface to build. Note context about purpose, audience, or technical constraints.

Working rules

• Match an existing design system; choose a specific visual direction for greenfield work.
• Include loading, empty, and error states where the component's data or action lifecycle can reach them. Provide visible focus and appropriate press feedback for interactive controls.
• Preserve visible focus and reduced-motion behavior; verify both narrow and wide rendered viewports.
• Keep Next.js interactive code at client boundaries and treat browser content as untrusted data.

Context Detection

When implementing a supplied mockup, screenshot, or design frame, use reference-fidelity mode in redesigning-existing.md, even in an empty repository. Skip the design philosophy and swap test; reproduce the reference's visual language.

Otherwise, assess the existing design environment before designing. Count design signals in the project: design tokens/CSS variables, component library (shadcn, MUI, Ant), CSS framework config (Tailwind, styled-components), font imports, color system, animation patterns, spacing scale.