Define the screen purpose, user goal, and single primary action.
Choose the page structure before styling:
- top bar or context row
- intro or summary
- main working area
- supporting panels
- secondary details
Apply the design rules from references/design-system-skills.md.
Implement with reusable components, semantic tokens, responsive layout, and real states.
Final-check the screen:
- hierarchy is obvious
- accents are restrained
- cards feel like one family
- empty, loading, and error states exist
- mobile layout still works

Defaults

Use This Skill To

design internal product pages, dashboards, builders, settings, editors, tables, modals, and drawers
review UI hierarchy, spacing, tokens, states, and responsiveness
refactor noisy or inconsistent UI toward one coherent system
decide when to use cards, tabs, chips, alerts, tables, and side panels

Read references/design-system-skills.md when you need the full system:

Prefer existing product patterns when working in an established codebase.
Do not introduce decorative styles that break the system just to make one screen “special.”
Avoid colorful or noisy dashboards unless explicitly requested.
Keep output production-ready, not concept art.