skills.rest
erikhazzard
erikhazzardCOMMUNITY
Explore all skills by this author →
Website𝕏@erikhazzardGitHub

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
One-click install
npx skills add https://github.com/erikhazzard/vasir --skill design-building-frontend
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
shawn-sandyshawn-sandy

css-to-class

Convert multi-class HTML strings into a single semantic CSS class.

Community
Intermediate