Css Tokens
Extracts CSS token values (colors, fonts, sizes) from web pages using robust parsing techniques.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add ibutters-css-tokens npx -- -y @trustedskills/ibutters-css-tokens
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"ibutters-css-tokens": {
"command": "npx",
"args": [
"-y",
"@trustedskills/ibutters-css-tokens"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill, ibutters-css-tokens, provides access to CSS tokens. It allows AI agents to utilize pre-defined and reusable CSS values. This promotes consistency and efficiency in styling tasks by avoiding repetitive declarations and ensuring a unified design language across projects.
When to use it
- Generating UI components: Create consistent button styles, form elements, or other UI components with standardized appearance.
- Theming applications: Quickly apply different themes by swapping out token values for colors, fonts, and spacing.
- Maintaining design systems: Ensure adherence to a defined design system by leveraging tokens instead of hardcoded CSS values.
- Automating style updates: Easily update styles across an entire project by modifying the underlying token definitions.
Key capabilities
- Access to pre-defined CSS tokens
- Reusable CSS values
- Consistent styling
- Theming support
Example prompts
- "Generate a button with the primary color token."
- "Apply the base font size token to this paragraph element."
- "Create a form input field using the defined spacing tokens."
Tips & gotchas
This skill requires familiarity with CSS and design systems. The specific tokens available will depend on the underlying configuration of the design system it's connected to.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.