design__kicking-off

Generate a frontend UI scaffold with BEM naming and token-based styles.

1|1|Updated Mar 16, 2026

Search Tags:#frontend #ui-design #design-system #component-library #css-architecture #bem #token-based-styling

Ready to run

npx skills add https://github.com/erikhazzard/vasir --skill design-kicking-off

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of a robust frontend UI by delivering a canonical, production-grade scaffold that enforces BEM naming, strict class budgets, and token-based styling, removing the guesswork from starting a new project.

Core Features & Use Cases

Establishes a solid design system foundation for new projects or bootstrapped component libraries.
Enforces consistent naming, a controlled CSS contract, and token-driven theming to ensure scalable UI surfaces.
Use cases include kicking off a fresh codebase, defining visual identity, and rapidly scaffolding reusable UI primitives.

Quick Start

Describe your project and instruct the AI to generate a canonical frontend design-system scaffold ready to drop into your repository.

Frequently Asked Questions about design__kicking-off

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

FAQPage Schema

What is a token-based design system and how does BEM naming enforce a CSS contract?▼

A token-based design system uses centralized variables for theming, while BEM naming enforces a strict CSS contract by structuring class names into blocks, elements, and modifiers to prevent styling conflicts and ensure scalable UI surfaces.

How do I bootstrap a component library with a strict CSS architecture?▼

To bootstrap a component library with a strict CSS architecture, generate a canonical frontend scaffold that enforces BEM naming rules, token-based styling, and controlled class budgets to define clear, reusable UI primitives ready for production.

Can I use utility classes or Tailwind with this frontend design system scaffold?▼

No, you cannot use utility classes or Tailwind with this scaffold. The generated CSS contract explicitly disallows utility classes, enforcing token-driven theming and strict BEM naming to maintain a controlled, production-grade frontend workflow.

What's the best way to kick off a new frontend codebase with a scalable UI foundation?▼

The best way to kick off a new frontend codebase is to generate a production-grade design system scaffold that establishes explicit naming rules, token-based styles, and a documented CSS contract, removing the guesswork from defining your visual identity.

Does this design system starter require any specific frontend framework dependencies?▼

No, this design system starter has zero dependencies. It generates a canonical, production-grade frontend UI foundation built on pure CSS architecture and token-based styles, making it framework-agnostic and ready to drop into any repository.

Why does my frontend design system need a documented CSS contract instead of inline styles?▼

A documented CSS contract replaces inline styles by enforcing explicit naming rules, class budgets, and token-based styling, which ensures consistent visual identity, prevents CSS bloat, and maintains scalable UI surfaces across new projects.