skills.rest
databio
databioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-style

Apply a universal web design framework with tokens.css, utilities.css, and BEM naming.

Updated Aug 27, 2026
Search Tags:#css#responsive#tokens#design-system#web-design#utility-classes#bem
One-click install
npx skills add https://github.com/databio/ai-sandbox --skill web-design-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-style
Source: https://github.com/databio/ai-sandbox/tree/main/workspaces/.claude/skills/web-design-style
Command: npx skills add https://github.com/databio/ai-sandbox --skill web-design-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI across projects is common; this skill provides a universal web design system using utilities.css, tokens.css, and components.css to standardize styling without inline CSS.

Core Features & Use Cases

  • Utility-first workflow: rely on existing utilities.css for layout, spacing, and typography.
  • Tokens-driven design: use design tokens for all values to ensure consistency and themeability.
  • BEM-based components: structure UI with Block__Element--Modifier naming for scalable design.
  • Use case: ensure a responsive grid of cards with consistent spacing and typography across pages.

Quick Start

Create a new project, import tokens.css and utilities.css, then begin styling with the provided utility classes for spacing and typography.

Frequently Asked Questions about web-design-style

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

FAQPage Schema
How do I standardize CSS spacing and typography across different web pages?▼

You can standardize UI styling by applying a universal web design system that uses tokens.css for consistent values and utilities.css for layout. This approach ensures uniform spacing, typography, and themeability across HTML, CSS, React, and Astro projects without relying on inline styles.

What is the best way to organize CSS components for a scalable design system?▼

Organize CSS components for a scalable design system using BEM-based Block__Element--Modifier naming conventions. This component organization method structures UI elements logically to prevent naming conflicts and ensure scalable, consistent styling across your project.

Does this universal design system framework work with React and Astro?▼

Yes, the universal web design framework works directly with React, Astro, HTML, CSS, and static sites. It applies consistent design tokens, utility classes, and BEM component naming across these platforms to maintain unified UI styling.

How do I start building a responsive web layout without using inline CSS?▼

Start building a responsive web layout without inline CSS by importing tokens.css and utilities.css into your project. Apply the provided utility classes for layout and spacing, which follow mobile-first development principles to ensure responsive design.

Why should I use design tokens instead of hardcoded CSS values?▼

Use design tokens instead of hardcoded CSS values to ensure UI consistency and themeability. Tokens centralize styling values within tokens.css, guaranteeing a unified visual language and simplifying theme updates across all components and pages.

Related Skills

Explore More Design & Creative Skills→
mrmartineaumrmartineau
2

using-zui

Build user interfaces with ZUI components and design tokens.

Community
Intermediate
slashwhyslashwhy
5

styling

Enforce CSS variables, BEM naming, and responsive design in Vue.js components.

Official
Basic
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate