frontend-design

To create a frontend design plan, the Skill detects design signals in your codebase and proposes typography, color, and spacing guidelines that respect existing patterns. It verifies visual outcomes through lightweight checks and documentation for production-ready interfaces.

To ensure UI accessibility, the Skill applies accessibility checks alongside typography and color proposals for landing pages or dashboards. It adapts to codebase signals to recommend design tokens and patterns that satisfy visual and accessibility requirements.

You can use this for both greenfield work and modifications. The Skill identifies existing design signals in the codebase and adapts its proposals for typography, spacing, and components to align with established project goals across various interactive experiences.

Design tokens and patterns solve frontend challenges by standardizing typography, color, and spacing decisions across components. The Skill recommends these tokens based on detected codebase signals, providing plan-driven guidance that ensures verifiable visual outcomes.

Yes, the Skill operates without external dependencies. It analyzes your current codebase to detect design signals and generates a production-grade frontend design plan with recommended tokens, patterns, and accessibility checks independently.

Frontend UI design lacks consistency when typography, color, and spacing decisions are not aligned with a central system. The Skill solves this by detecting codebase signals and proposing component guidelines and design tokens that unify visual outcomes across pages.