---
name: frontend-design
description: Design polished web application experiences before implementation. Use when creating or redesigning dashboards, portals, admin tools, AI interfaces, agent experiences, business applications, or responsive web workflows.
---

# Frontend Design

Design the experience before generating component code.

## Required workflow

1. Identify the primary user, their goal, the decision they need to make, and the evidence they need.
2. Write the primary journey in three to seven steps.
3. Classify information as primary, supporting, or on-demand.
4. Define the primary action, secondary actions, navigation actions, and destructive actions.
5. Choose a layout pattern because it supports the journey, not because it is visually familiar.
6. Define loading, empty, no-results, partial-data, permission, error, offline where relevant, and success states.
7. Produce a component hierarchy before implementation.
8. Validate responsive behavior and keyboard flow.

## Design rules

- Optimize for task completion and comprehension before visual novelty.
- Do not default every request to a KPI dashboard.
- Keep the most important decision and action visible.
- Reveal complexity progressively.
- Use consistent placement for page title, context, filters, and actions.
- Avoid decorative gradients, oversized hero areas, and charts without a user decision they support.
- Use plain language and action-oriented labels.
- Preserve useful information density for operational tools.

## Deliverables

Provide a concise experience brief, information architecture, page or route map, state model, component hierarchy, and acceptance criteria. If implementation is requested, hand these decisions to the implementation skills.

## References

- [Layout patterns](references/layout-patterns.md)
- [Information hierarchy](references/information-hierarchy.md)
- [Experience states](references/experience-states.md)