frontend-design

Codify design tokens, typography, color, and accessibility into reusable UI components.

8|1|Updated Feb 28, 2026

Search Tags:#typography #accessibility #frontend #responsive #design-systems #color-theory

Ready to run

npx skills add https://github.com/belos-street/skill-kit --skill frontend-design-belos-street

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/belos-street/skill-kit/tree/main/skills/frontend-design
Command: npx skills add https://github.com/belos-street/skill-kit --skill frontend-design-belos-street

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend design inconsistencies and fragmentation across teams, resulting in patchy UI and wasted development time.

Core Features & Use Cases

Token-driven design system: establish color, typography, spacing, and component tokens to ensure visual coherence across projects.
Accessibility-first guidelines: embed WCAG-compliant patterns, semantic HTML, and keyboard focus strategies into component implementations.
Systematic design scaffolding: provide a scalable component library structure (design tokens, atoms, molecules, organisms) and practical guidance for typography, color theory, layout, and motion.

Quick Start

Execute a token-first design pass by defining a color palette, typography scale, and spacing system, then apply them to a sample UI component.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a scalable design system for web interfaces?▼

A scalable design system uses tokens for color, typography, and spacing to ensure visual coherence. It structures components into atoms, molecules, and organisms while enforcing semantic naming and accessibility guidelines for maintainable frontend code.

What's the best way to ensure frontend typography and color consistency across components?▼

Frontend typography and color consistency is achieved by establishing a token-driven design system. By defining a color palette and typography scale as reusable tokens, visual coherence is maintained across all components and marketing pages.

How do I build accessible frontend components that follow WCAG guidelines?▼

Accessible frontend components require embedding WCAG-compliant patterns, semantic HTML, and keyboard focus strategies into implementations. This accessibility-first approach ensures web interfaces are usable while maintaining design system standards.

Does this design system approach work across different frontend frameworks?▼

Yes, the design system approach applies to building web interfaces, components, and dashboards across frameworks. It uses tokens-driven styling and systematic scaffolding to ensure reusable, maintainable UI code regardless of the framework.

How do I start a token-first design pass for a new UI component?▼

To start a token-first design pass, define a color palette, typography scale, and spacing system. Then apply these established design tokens to a sample UI component to ensure visual coherence and maintainable code.

When should I not use a token-based design system for frontend development?▼

A token-based design system may be unnecessary for small, one-off pages where visual coherence and maintainable UI code are not priorities. It is designed to solve fragmentation across teams and scalable component libraries.