css-development

CSS Development Plugin

CSS development workflows with Tailwind composition, semantic naming, and dark mode by default.

Installation

/plugin marketplace add 2389-research/claude-plugins
/plugin install css-development@2389-research

What This Plugin Provides

Skills for CSS development following 2389 patterns:

• css-development - Main orchestrator skill that routes to specific sub-skills
• css-development:create-component - Create new styled components
• css-development:validate - Validate CSS against patterns
• css-development:refactor - Refactor existing CSS

Patterns

This plugin enforces:

• Semantic class naming: .user-profile, .nav-menu (not .container-1, .box-blue)
• Tailwind composition: Use @apply to compose utilities into semantic classes
• Dark mode by default: Every component includes dark: variants
• Test coverage: Static analysis + component rendering tests

Quick Example

.user-profile {
  @apply flex items-center space-x-4 p-4 bg-white dark:bg-gray-800;
}
.user-profile__avatar {
  @apply w-12 h-12 rounded-full;
}
.user-profile__name {
  @apply text-lg font-semibold text-gray-900 dark:text-gray-100;
}

Documentation

• Design Document
• Implementation Plan
• Examples