Frontend Design

This is a visual design guardrail skill, not a domain workflow skill. Domain skills own required product structure, terminology, workflows, and output views. This skill owns visual quality and must be applied inside that structure.

Mandatory References

Before visual planning or implementation, read both files. Skipping either file is a skill violation.

• .agents/skills/frontend-design/references/visual-style-references.md
• .agents/skills/frontend-design/references/shadcn-setup-and-theming.md

Required Workflow

1. Read the active task, domain context, and selected domain skills.
2. Read .tasks/domain.md when it exists. Extract brand colors, company name, domain tone, terminology, workflows, entities, statuses, roles, and constraints.
3. Read both frontend-design references.
4. Produce the design pass before coding:
   • Vision: domain-specific product and visual direction. Reject generic SaaS purple, card-heavy dashboards, and generic admin shells.
   • First-version features: working screens, controls, routes, dialogs, and localStorage-backed state.