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, error, and press states for interactive components.
• 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

Before designing, assess the existing design environment. 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.

• 4+ signals = Existing system. Match it. Do not impose new aesthetics -- extend what's there.
• 1-3 signals = Partial system. Blend: respect existing choices, fill gaps with this skill's guidance.
• 0 signals = Greenfield. Apply the full Design Philosophy below. Product register: read design-system-routing.md before bespoke design.