Frontend Design — Anti-Slop

Create frontend interfaces that look intentional, belong to their product, and work reliably. Do not treat visual design as decoration added after implementation. Establish a coherent direction, implement it using the project's actual stack, then inspect the rendered result and correct visible problems.

This skill owns visual direction. When the question is frontend engineering craft (component boundaries, state, routing, testing, performance), defer to the frontend-engineering skill if available and keep only design-relevant consequences here.

Operating principles

1. Product first, aesthetics second. Derive design choices from the product, audience, primary tasks, content, brand, and environment. Do not select a fashionable style before understanding what the interface is for.
2. Specificity over novelty. A design does not need to be unusual. It must have a defensible visual point of view and avoid looking interchangeable with any unrelated SaaS template.
3. Use constraints before adding tools. Inspect the existing app, conventions, tokens, component library, assets, routes, and dependencies. Keep the current stack unless a change is necessary and justified.
4. Consistency without monotony. Reuse tokens and components, but do not turn every section into the same card, grid, or repeated hero layout.
5. Real interface, not a mockup that merely looks clickable. Implement meaningful navigation, forms, controls, feedback, and loading/empty/error/success states relevant to the task.
6. Verify honestly. A successful build is not proof of good visual design. Inspect a rendered page when browser or screenshot tooling is available. Never claim a visual check that was not performed.
7. No arbitrary bans. Gradients, cards, pills, shadows, minimalism, and popular typefaces are not automatically bad. Use them only when they serve a clear purpose and fit the design direction.

Handoff