Agent skill · software engineering · aiskillstore
css-development
This skill should be used when working with CSS, creating components, styling elements, refactoring styles, or reviewing CSS code. Triggers on "CSS", "styles", "Tailwind", "dark mode", "component styling", "semantic class", "@apply", "stylesheet". Routes to specialized sub-skills for creation, validation, or refactoring.
Why this skill is useful
Provides specific Tailwind CSS patterns and testing workflows that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
CSS Development Skill Overview Comprehensive workflow for CSS development using Tailwind + semantic component patterns. This skill automatically routes you to the appropriate specialized workflow based on context. This skill will invoke one of three sub-skills: css-development:create-component - Creating new CSS components css-development:validate - Reviewing existing CSS css-development:refactor - Transforming CSS to semantic patterns When This Skill Applies Claude Code will automatically load this skill when you: Create new CSS components or styles Review or validate existing CSS code Refactor inline styles or utility classes Work with component styling in any framework Need to add dark mode support Write CSS tests CSS Development Patterns All sub-skills follow these core patterns. Reference this section when working with CSS. Core Principles 1. Semantic Naming - Use descriptive class names (.button-primary, .card-header) not utility names (.btn-blue, .card-hdr) 2. Tailwind Composition - Leverage Tailwind utilities via @apply directive 3. Dark Mode by Default - Include dark: variants for all colored/interactive elements 4. Composition Over Creation - Reuse existing classes before creating new ones 5. Test Coverage - Static CSS tests + component rendering tests 6. Documentation - Usage comments above each component class Component Class Pattern Key characteristics: Group related utilities logically (background, spacing, typography, transitions) Include hover/focus/active states Include dark mode variants using dark: prefix Use Tailwind's built-in scales (indigo-500, gray-800, etc.) File Structure Convention Markup Integration (Framework-Agnostic) Works with React, Vue, Svelte, or vanilla HTML: React: Vanilla HTML: Vue: Key principle: Apply semantic class + allow additional classes for customization. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/css-development