Agent skill · design visual · aiskillstore
css-development-create-component
This skill should be used when creating new styled components or adding new CSS classes. Triggers on "create component", "new button", "new card", "add styles", "style component", "build UI element". Guides semantic naming, Tailwind composition, dark mode support, and test coverage.
Why this skill is useful
Guides the creation of styled components with specific patterns and practices that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: Step-by-Step Details Step 1: Survey Existing Components Action: Use the Read tool to read styles/components.css Purpose: Understand what already exists to ensure consistency and identify reuse opportunities What to look for: Similar components that could be composed Existing naming patterns to follow Common patterns (button variants, card styles, etc.) Mark as inprogress before starting, mark as completed when done. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/css-development-create-component