css-development-create-componentlisted

# CSS Development: Create Component ## Overview Guides you through creating new CSS components following established patterns: - Semantic class naming - Tailwind utility composition via `@apply` - Dark mode support by default - Test coverage (static CSS + component rendering) - Composition over creation (reuse existing classes) **This is a sub-skill of `css-development`** - typically invoked automatically via the main skill. ## When This Skill Applies Use when: - Creating a new styled component (button, card, form field, etc.) - Adding new semantic CSS classes to components.css - Building reusable UI patterns - Need to ensure dark mode support and test coverage ## Pattern Reference This skill follows the patterns documented in the main `css-development` skill. Key patterns: **Semantic naming:** `.button-primary` not `.btn-blue` **Tailwind composition:** Use `@apply` to compose utilities **Dark mode:** Include `dark:` variants by default **Composition first:** Check if existing classes can be combined **Test coverage:** Static CSS tests + component rendering tests ## Workflow When this skill is invoked, create a TodoWrite checklist and work through it step-by-step. ### Announce Usage First, announce that you're using this skill: "I'm using the css-development:create-component skill to guide creating this new CSS component." ### Create TodoWrite Checklist Use the TodoWrite tool to create this checklist: ``` Creating CSS Component: - [ ] Survey existing component