frontend-designlisted

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.
thiientv/godmode · ★ 95 · Web & Frontend · score 81

Install: claude install-skill thiientv/godmode

# Frontend Design Build an interface with a point of view and a usable system, not a collection of default cards. ## Before writing UI code 1. Inspect the existing product, design tokens, routes, components, assets, fonts, and responsive conventions. Preserve a real system unless a scoped redesign is intended. 2. Identify product type, user context, primary action, content hierarchy, brand constraints, supported viewport range, and available visual assets. 3. 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: ```bash python3 skills/frontend-design/scripts/extract_design_system.py ./src ``` Read [design-system-extraction.md](references/design-system-extraction.md) before replacing or normalizing an existing token system. 4. 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: ```bash 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 [des