Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →ancoleman/theming-components
Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills.
Passed 20 of 22 test cases with the skill, and 18 of 22 without it.
and 2 more in the full report
3 fixed17 passed either way1 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
A developer is creating component-specific design tokens for a focused primary button hover state and wants to name it `--primary-button-hover-background`. What structure should be followed for component token naming?
| Checked | Without skill | With skill |
|---|---|---|
| Follow the pattern --{component}-{property}-{variant}-{state} | Missed | Passed |
| Name the token --button-bg-primary-hover | Missed | Passed |
The instructions your model reads when the skill loads.
Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.
Design tokens are the single source of truth for all visual design decisions. This skill provides:
Critical Architectural Principle:
Component Skills (Behavior + Structure) → Use tokens for ALL visual styling
Design Tokens (Styling Variables) → Define colors, spacing, typography
Theme Files (Token Overrides) → Light, dark, brand-specific values
Step 1: Reference tokens in your component:
.button {
background-color: var(--button-bg-primary);
color: var(--button-text-primary);
padding-inline: var(--button-padding-inline);
padding-block: var(--button-padding-block);
border-radius: var(--button-border-radius);
transition: var(--transition-fast);
}
test cases passed, vs 18 / 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.