SKILL.md
Frontend Design
Use this skill when creating or reviewing frontend UI where visual quality matters.
Workflow
- Clarify the product context, target user, and page goal.
- Establish visual hierarchy before writing code: primary action, secondary action, supporting content.
- Choose a deliberate visual direction instead of generic gradients and cards.
- Use consistent spacing, type scale, color tokens, border radius, shadows, and component rhythm.
- Design responsive states, loading states, empty states, error states, and disabled states.
- Verify the result in a browser or preview surface when available.
Review Checklist
- The page has a clear focal point and primary action.
- Components align to a consistent grid.
- Typography has enough contrast and hierarchy.
- Color is meaningful, not decorative noise.
- The UI works at common mobile/tablet/desktop widths.
- Empty/loading/error states are intentional.
PilotDeck Migration Note
- Source inspiration: Anthropic frontend-design skill and general frontend design best practices.
- This is a PilotDeck-native draft, not a verbatim copy.