Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →aiskillstore/css-development-create-component
This skill should be used when creating new styled components or adding new CSS classes.
Passed 15 of 22 test cases with the skill, and 12 of 22 without it.
and 4 more in the full report
5 fixed10 passed either way5 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
When defining a new .modal-backdrop CSS class in styles/components.css, what documentation header comment should be added directly above the rule?
| Checked | Without skill | With skill |
|---|---|---|
| Includes a CSS header comment displaying component usage markup. | Missed | Passed |
The instructions your model reads when the skill loads.
Guides you through creating new CSS components following established patterns:
@applyThis is a sub-skill of css-development - typically invoked automatically via the main skill.
Use when:
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
When this skill is invoked, create a TodoWrite checklist and work through it step-by-step.
First, announce that you're using this skill:
"I'm using the css-development:create-component skill to guide creating this new CSS component."
test cases passed, vs 12 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.