Why does it enforce mobile-first design?

Mobile-first design ensures leaner code and better performance by establishing base styles for small screens and adding complexity only as viewport size increases.

Does this skill require CSS preprocessors like Sass?

No, this skill is designed specifically for modern vanilla CSS, leveraging native features like CSS variables to provide the same power without a build step.

How does it handle dark mode?

It uses a semantic variable approach where colors are defined in :root and updated via [data-theme='dark'] or prefers-color-scheme media queries.

Is this compatible with React or Vue components?

Yes, the component-scoped CSS organization and BEM naming conventions are ideal for modern JavaScript frameworks that utilize component-based styling.

Vanilla Web CSS & Design Tokens

Name: Vanilla Web CSS & Design Tokens
Author: AlexanderStephenThompson

byAlexanderStephenThompson

デザインツール

Implements scalable vanilla CSS architectures using native design tokens, BEM naming conventions, and mobile-first responsive patterns.

概要

This skill provides a comprehensive framework for writing clean, maintainable, and high-performance vanilla CSS without the need for preprocessors or utility frameworks. It enforces a strict 'Design Tokens First' approach using CSS variables for colors, typography, and spacing, while standardizing layout through a mobile-first philosophy. By utilizing BEM-inspired naming and native CSS Grid/Flexbox patterns, it helps developers build robust component-based interfaces that are accessible, themeable (with dark mode support), and easy to scale across large projects.

主な機能

0 GitHub stars
Native design token system using CSS variables for consistent theming
Accessibility-first patterns including focus indicators and reduced motion
Built-in dark mode implementation with system preference detection
Mobile-first responsive breakpoints using min-width media queries
BEM-inspired naming conventions for clean component scoping

ユースケース

Refactoring legacy CSS into a modern, token-based design system
Implementing accessible and responsive UI components using vanilla web standards
Architecting a new web project with a framework-agnostic CSS foundation

概要

主な機能

0 GitHub stars
Native design token system using CSS variables for consistent theming
Accessibility-first patterns including focus indicators and reduced motion
Built-in dark mode implementation with system preference detection
Mobile-first responsive breakpoints using min-width media queries
BEM-inspired naming conventions for clean component scoping

ユースケース

Refactoring legacy CSS into a modern, token-based design system
Implementing accessible and responsive UI components using vanilla web standards
Architecting a new web project with a framework-agnostic CSS foundation