design__building-frontend

Design frontend architectures with BEM, design tokens, and accessible markup.

1|1|Updated Mar 16, 2026

Search Tags:#design #architecture #accessibility #frontend #design-system #css-tokens #bem

Ready to run

npx skills add https://github.com/erikhazzard/vasir --skill design-building-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design__building-frontend
Source: https://github.com/erikhazzard/vasir/tree/main/.agents/skills/design__building-frontend
Command: npx skills add https://github.com/erikhazzard/vasir --skill design-building-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-grade frontend UI with BEM naming, strict class budgets, and tokenized styling, avoiding Tailwind and utility-class soup to ensure maintainability and design integrity.

Core Features & Use Cases

BEM-based component architecture for scalable frontends
Tokenized styling system with design tokens for consistent theming
Accessibility-minded markup and responsive layouts
Use when creating web components, pages, or apps requiring high design quality

Quick Start

Outline your aesthetic direction and component contracts before coding.

Frequently Asked Questions about design__building-frontend

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

FAQPage Schema

How do I build a maintainable frontend architecture without utility-class soup?▼

Build maintainable frontend architecture using BEM naming, strict class budgets, and tokenized styling to ensure design integrity without relying on Tailwind or utility-class soup.

What is a design token system and how does it work for scalable CSS?▼

A design token system centralizes styling values like colors and spacing into variables, enabling consistent theming and scalable CSS across web components without hardcoding values.

How do I structure accessible markup and responsive layouts using BEM?▼

Structure accessible markup and responsive layouts by applying BEM component architecture alongside accessibility-minded markup, ensuring web components remain maintainable and cohesive across different devices.

Can I use this BEM and design token approach for existing web components?▼

Yes, you can apply BEM and design token approaches to existing web components, pages, or apps that require high design quality and maintainable CSS architecture without restructuring into utility classes.

Why choose BEM and design tokens over Tailwind for production-grade frontend design?▼

Choose BEM and design tokens over Tailwind to avoid utility-class soup, ensuring strict class budgets, maintainable component architecture, and consistent theming through token-based styling.