frontend

---

name: frontend description: "Context-led frontend design: art direction derived from product, audience, brand and the existing system, not generic defaults. Named mood variants listed inside. Triggers: frontend, UI, CSS, styling, visual, theme, component, layout, responsive, accessibility, animation." allowed-tools: Read, Write, Edit, Bash, Grep, Glob kernel: kind: methodology version: 2 side_effects: none confirmation: none

1. Product: what the interface does and which action matters most.
2. Audience and use context: device, environment, familiarity, urgency, accessibility needs.
3. Brand: existing tokens, logo, type, imagery, voice, screenshots, and reference qualities.
4. Content: real density, length, hierarchy, empty/error/loading states, and localization risk.
5. Technical constraints: current stack, component library, performance budget, supported browsers.

Preserve and extend the existing design system when one exists. Do not replace a coherent brand because a variant or personal preference is louder. If the evidence is incomplete, make the smallest reversible assumption and state it; ask only when the answer changes the product direction.

• desired feeling in 2-3 plain words;
• one dominant visual idea;
• typography, color, layout, imagery, and motion choices tied to evidence;
• 2-3 defaults to avoid for this specific project.

No choice is universally premium. A system font can be correct for speed or platform familiarity. Symmetry can communicate calm. Flat color can be the strongest choice. Huge type, gradients, glass, noise, asymmetry, and animation are tools—not proof of taste.

Compose freely: any mood x any motion language, either alone, or neither. Context-fit always wins over any lens; a lens bends to the content, never the reverse. Each language's prohibition list is binding while that language is active — bans differentiate more than moves do. All languages inherit the reduced-motion hard bar: every design must survive with its motion stripped.

Motion must explain change, guide attention, or provide feedback. If it does none of those, remove it. Decorative texture, depth, and unusual composition need the same justification.

1. What evidence caused this choice?
2. Is it inherited from the product, or copied from recent model habits?
3. Would removing it make the interface clearer or more specific?

Common warning signs—not automatic bans—include purple gradient startup pages, identical rounded cards, default component-library styling, ornamental dashboards, centered-everything layouts, decorative blobs, fake testimonials, and a fashionable font with no brand reason. Change a warning sign when it is unexamined; keep it when the context earns it.

<on_complete> Report the art direction, evidence behind the dominant choices, sizes/states visually checked, and any accessibility or performance bar not verified. </on_complete>