About frontend-design
frontend-design is a skill for creating and reviewing frontend interfaces where visual quality matters. It guides decisions from hierarchy and visual direction through responsive states and browser checks.
Key features
- 01Clarify context, audience, and page goal
- 02Set hierarchy before coding
- 03Choose a deliberate visual direction
- 04Define consistent visual tokens
- 05Design responsive and interface states
- 06Check the result in a browser
Use cases
- 01Planning a new frontend page
- 02Reviewing visual hierarchy and typography
- 03Checking mobile and desktop layouts
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/frontend-designin Claude Code to confirm it loaded.
Details
From the project READMEFrontend 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.
Comments
Markdown supported