web-design-style
OfficialUnify HTML/CSS with a universal design system.
Authordatabio
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-design-style Download link: https://github.com/databio/ai-sandbox/archive/main.zip#web-design-style Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.