What problem does it solve?
This skill removes uncertainty and wasted iterations when creating or redesigning frontend interfaces by providing a repeatable process that detects existing patterns, sets a concise visual and interaction plan, and verifies results visually so implementations feel intentional and cohesive.
Core Features & Use Cases
- Context Detection: Scans for design tokens, component libraries, CSS frameworks, typography, color systems, and animation libraries to classify projects as existing, partial, greenfield, or ambiguous.
- Pre-Build Planning: Generates a one-sentence visual thesis, a content plan, and a 2–3 item interaction plan before any code is written to align stakeholders and reduce rework.
- Design Guidance Core: Opinionated rules for typography, color, composition, motion, accessibility, and imagery that yield to an existing design system and user instructions.
- Modules for Output: Preset approaches for landing pages, apps/dashboards, and components, with clear defaults and anti-patterns to avoid.
- Visual Verification: One-pass visual check using available browser automation or mental litmus checks, and inclusion of a screenshot in deliverables when possible.
- Use Cases: Building a distinctive greenfield landing page, adding a component to an existing app while matching design tokens, or performing a visual pass on a redesigned UI.
Quick Start
Use the frontend-design skill to detect existing design signals, produce a visual thesis with content and interaction plans, implement components that respect design tokens and accessibility rules, and perform a single-pass visual verification.
