| name | Frontend Design |
| description | Strong frontend visual-design workflow. Use when building or improving UI, landing pages, dashboards, SaaS screens, responsive layouts, typography, color systems, spacing, visual hierarchy, empty states, or design polish. |
| allowed-tools | Read, Bash, Edit, MultiEdit, Write |
Frontend Design
Use this skill to avoid generic UI output.
Operating Standard
- Define visual direction before coding: audience, brand mood, layout density, color temperature, typography, and interaction style.
- Prefer clear hierarchy: one primary action, strong section rhythm, intentional whitespace, visible affordances.
- Avoid default-looking AI UI: no generic purple gradients unless the product calls for it, no unstyled card grids, no random icons.
- Build responsive from first pass: mobile, tablet, desktop. Check empty, loading, error, and long-content states.
- Use design tokens or CSS variables for color, radius, spacing, shadow, typography, and motion.
- Use motion only where it explains state or improves perceived quality.
- After implementation, run a design review pass: alignment, contrast, typography scale, spacing consistency, hover/focus states, and scroll behavior.
Quality Bar
- SaaS-grade visual polish.
- Clear product story above the fold.
- Components reusable and named by product intent.
- Accessibility basics: contrast, labels, keyboard focus, reduced-motion safe.
- No fragile hardcoded layout hacks unless isolated and explained.
