skills.rest
denish12
denish12COMMUNITY
Explore all skills by this author →
WebsiteGitHub

styling_css_stack

Architect CSS design systems with tokens, BEM, responsive rules, and dark mode.

Updated Aug 27, 2026
Search Tags:#a11y#css#responsive-design#dark-mode#design-tokens#css-modules#bem
One-click install
npx skills add https://github.com/denish12/codex-ai-agent-and-skills --skill styling-css-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styling_css_stack
Source: https://github.com/denish12/codex-ai-agent-and-skills/tree/main/locales/en/.agents/skills/styling_css_stack
Command: npx skills add https://github.com/denish12/codex-ai-agent-and-skills --skill styling-css-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies CSS best practices for design tokens, naming systems (BEM / CSS Modules), responsive layouts, dark mode, and accessibility, reducing style debt and inconsistencies.

Core Features & Use Cases

  • Establish design tokens with CSS custom properties to ensure a single source of truth for color, spacing, type scale, and shadows.
  • Provide naming conventions (BEM and CSS Modules) to keep components predictable and maintainable.
  • Cover responsive strategies, dark mode, and a11y considerations with actionable examples.

Quick Start

Create a tokens.css file with base tokens and organize component styles using BEM or CSS Modules to apply consistent tokens across the project.

Frequently Asked Questions about styling_css_stack

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

FAQPage Schema
How do I set up CSS design tokens for a large application?▼

To set up CSS design tokens, create a tokens.css file using CSS custom properties to establish a single source of truth for color, spacing, type scale, and shadows across your application.

What is the best way to structure CSS naming conventions for maintainable components?▼

The best way to structure CSS naming conventions is using BEM or CSS Modules, which keep components predictable and maintainable by enforcing clear, scoped class boundaries.

How do I implement dark mode and responsive design using CSS custom properties?▼

Implement dark mode and responsive design by defining CSS custom properties as design tokens, then overriding those tokens within media queries to adapt layouts and color schemes.

What accessibility patterns should I apply when architecting a CSS design system?▼

When architecting a CSS design system, apply a11y patterns by ensuring design tokens meet contrast standards and responsive rules support accessible layouts across large applications.

When should I use BEM versus CSS Modules for component styling?▼

Use BEM or CSS Modules based on your project requirements: BEM provides a strict naming convention for predictable classes, while CSS Modules scopes styles locally to keep components maintainable.

Related Skills

Explore More Design & Creative Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
vallafedericovallafederico

solid-styling

Guide styling SolidJS components with CSS Modules, Tailwind CSS, Sass/Less, and CSS-in-JS.

Community
Intermediate