Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →aiskillstore/css-development
This skill should be used when working with CSS, creating components, styling elements, refactoring styles, or reviewing CSS code.
Passed 14 of 23 test cases with the skill, and 15 of 23 without it.
2 fixed12 passed either way6 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write a Jest unit test function that performs a static check verifying that the class .button-primary exists inside the main CSS file.
| Checked | Without skill | With skill |
|---|---|---|
| Uses readFileSync to load styles/components.css in the test. | Missed | Passed |
| Asserts that the loaded file content string contains .button-primary. | Passed | Passed |
The instructions your model reads when the skill loads.
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 componentscss-development:validate - Reviewing existing CSScss-development:refactor - Transforming CSS to semantic patternsClaude Code will automatically load this skill when you:
All sub-skills follow these core patterns. Reference this section when working with CSS.
.button-primary, .card-header) not utility names (.btn-blue, .card-hdr)@apply directivedark: variants for all colored/interactive elements/* Button component - Primary action button with hover states
Usage: <button className="button-primary">Click me</button> */
.button-primary {
test cases passed, vs 15 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.