Frontend Design
Build an interface with a point of view and a usable system, not a collection
of default cards.
Before writing UI code
Inspect the existing product, design tokens, routes, components, assets,
fonts, and responsive conventions. Preserve a real system unless a scoped
redesign is intended.
Identify product type, user context, primary action, content hierarchy,
brand constraints, supported viewport range, and available visual assets.
Extract the existing visual system before inventing one. Inspect CSS
variables, theme configuration, type loading, spacing, radii, breakpoints,
component variants, and recurring layout patterns. Use the dependency-free
helper when the system is spread across source files:
python3 skills/frontend-design/scripts/extract_design_system.py ./src
Read design-system-extraction.md
before replacing or normalizing an existing token system.
Choose a visual direction and record the reason: type pairing, color role,
density, shape language, imagery, and motion voice. Use the local
scripts/design_system.py helper for a deterministic starting brief when a
project has no design system:
python3 skills/frontend-design/scripts/design_system.py \
--product "analytics dashboard" --tone "technical" --stack react
Search the small bundled design-intelligence catalog when a choice needs
comparison; read design-intelligence.md
for the supported domains and limits. Do not treat a catalog result as a
substitute for inspecting the existing product.
Define semantic tokens before scattering raw values through components.
Sketch the primary flow and all meaningful states: loading, empty, error,
disabled, success, permission, and long-content cases.
Build the system
- Use real content, realistic dimensions, and an intentional type scale.
- Prefer composition and hierarchy over decorative gradients, excessive
shadows, or nested card stacks.
- Make controls semantic, keyboard reachable, focus-visible, and labeled.
- Design mobile and intermediate widths as first-class states, not a desktop
layout squeezed into a phone.
- Make motion explain state or spatial continuity; provide reduced motion.
- Use icons consistently and never substitute emoji for product controls.
Read design-system.md for direction, tokens,
and anti-generic heuristics. Read interaction-states.md
for state and accessibility detail. Read stack-adapters.md
only for the detected implementation stack. Use browser-testing for a real
browser flow and ui-ux-review for a separate quality pass.
Visual verification
Render the actual route at the narrow, intermediate, and desktop widths. Check
hierarchy, overflow, focus, contrast, state transitions, content wrapping, and
reduced-motion behavior. Exercise the primary task with keyboard-only input and
run the project's accessibility tooling when available. Capture the state and
viewport matrix from runtime-validation.md.
Record screenshots or observations; source inspection alone cannot prove a
visual claim.
Completion condition
The primary flow is usable, visual decisions are coherent and intentional,
states and responsive behavior are covered, accessibility is not traded for
appearance, and relevant rendered evidence is fresh.
1---2name: frontend-design3description: Designs, builds, or refactors user-facing web or application interfaces with deliberate visual direction, typography, color and spacing tokens, content hierarchy, responsive behavior, accessible interaction states, and real rendered-surface verification. Use for pages, components, dashboards, landing pages, design systems, and frontend polish. Not for backend logic, API-only work, or visual claims that cannot be rendered or inspected.4---56# Frontend Design78Build an interface with a point of view and a usable system, not a collection9of default cards.1011## Before writing UI code12131. Inspect the existing product, design tokens, routes, components, assets,14 fonts, and responsive conventions. Preserve a real system unless a scoped15 redesign is intended.162. Identify product type, user context, primary action, content hierarchy,17 brand constraints, supported viewport range, and available visual assets.183. Extract the existing visual system before inventing one. Inspect CSS19 variables, theme configuration, type loading, spacing, radii, breakpoints,20 component variants, and recurring layout patterns. Use the dependency-free21 helper when the system is spread across source files:2223 ```bash24 python3 skills/frontend-design/scripts/extract_design_system.py ./src25 ```2627 Read [design-system-extraction.md](references/design-system-extraction.md)28 before replacing or normalizing an existing token system.294. Choose a visual direction and record the reason: type pairing, color role,30 density, shape language, imagery, and motion voice. Use the local31 `scripts/design_system.py` helper for a deterministic starting brief when a32 project has no design system:3334 ```bash35 python3 skills/frontend-design/scripts/design_system.py \36 --product "analytics dashboard" --tone "technical" --stack react37 ```3839 Search the small bundled design-intelligence catalog when a choice needs40 comparison; read [design-intelligence.md](references/design-intelligence.md)41 for the supported domains and limits. Do not treat a catalog result as a42 substitute for inspecting the existing product.43445. Define semantic tokens before scattering raw values through components.456. Sketch the primary flow and all meaningful states: loading, empty, error,46 disabled, success, permission, and long-content cases.4748## Build the system4950- Use real content, realistic dimensions, and an intentional type scale.51- Prefer composition and hierarchy over decorative gradients, excessive52 shadows, or nested card stacks.53- Make controls semantic, keyboard reachable, focus-visible, and labeled.54- Design mobile and intermediate widths as first-class states, not a desktop55 layout squeezed into a phone.56- Make motion explain state or spatial continuity; provide reduced motion.57- Use icons consistently and never substitute emoji for product controls.5859Read [design-system.md](references/design-system.md) for direction, tokens,60and anti-generic heuristics. Read [interaction-states.md](references/interaction-states.md)61for state and accessibility detail. Read [stack-adapters.md](references/stack-adapters.md)62only for the detected implementation stack. Use `browser-testing` for a real63browser flow and `ui-ux-review` for a separate quality pass.6465## Visual verification6667Render the actual route at the narrow, intermediate, and desktop widths. Check68hierarchy, overflow, focus, contrast, state transitions, content wrapping, and69reduced-motion behavior. Exercise the primary task with keyboard-only input and70run the project's accessibility tooling when available. Capture the state and71viewport matrix from [runtime-validation.md](references/runtime-validation.md).72Record screenshots or observations; source inspection alone cannot prove a73visual claim.7475## Completion condition7677The primary flow is usable, visual decisions are coherent and intentional,78states and responsive behavior are covered, accessibility is not traded for79appearance, and relevant rendered evidence is fresh.
thiientv