Best Claude Code skills for frontend

Use when the user builds, restyles, reviews or says a UI \"looks off\", \"generic\" or \"needs polish\": pages, components, dashboards, landing pages. Sets a spacing grid, type scale and single accent before writing any CSS, then enforces them in the code. Reads profile.md for brand, accent colour, vibe and framework.

## Workflow

1. Write a token block first: spacing, type scale, colours, radius. Show it in five lines before any component.
2. Spacing: multiples of 4px only (4, 8, 12, 16, 24, 32, 48, 64, 96). Use `gap` in flex and grid layouts instead of margins between siblings.
3. Type scale: choose a ratio and keep it. Default 1.25: 14, 16, 20, 25, 31, 39, 49. Body text is 16px minimum with 1.5 line height; headings use 1.1 to 1.2 line height and slightly negative tracking at 32px and above. Use at most two font families and three weights.
4. Colour: derive neutrals from one hue, tinted toward the accent by a few percent. The accent covers at most about 10 percent of any screen. Text against its background must reach 4.5:1 contrast, large text 3:1.
5. Layout: one primary action per view. Content width for reading text is 60 to 75 characters. Align to a column grid and keep gutters equal.
6. States: every interactive element has default, hover, focus-visible, active and disabled. Touch targets are at least 44px.
7. Build the component, then audit it against the rules below and fix before showing.

## Banned unless the user asks

- Gradients, including gradient text and gradient buttons.
- Heavy drop shadows; use a 1px border or one soft shadow at low opacity.
- More than one accent colour.
- Margins used for spacing between siblings.
- Off-scale values like 13px or 22px.
- Centered body text in blocks longer than three lines.
- Never use filler text; write real copy for every element.