frontend-design

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

1. Define visual direction before coding: audience, brand mood, layout density, color temperature, typography, and interaction style.
2. Prefer clear hierarchy: one primary action, strong section rhythm, intentional whitespace, visible affordances.
3. Avoid default-looking AI UI: no generic purple gradients unless the product calls for it, no unstyled card grids, no random icons.
4. Build responsive from first pass: mobile, tablet, desktop. Check empty, loading, error, and long-content states.
5. Use design tokens or CSS variables for color, radius, spacing, shadow, typography, and motion.
6. Use motion only where it explains state or improves perceived quality.
7. 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.