Skills
.Work. You
Rest

theme-var

Community

Manage CSS variables across themes.

Design & Creative#theming#frontend#design system#css#variables#globals.css
Authorebenfc
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers manage CSS custom properties (variables) for theming, ensuring consistency across multiple themes and modes, and streamlining the process of adding new variables.

Core Features & Use Cases

  • Find Existing Variables: Quickly identify the correct CSS variable for a specific color need (e.g., page background, primary text).
  • Add New Variables: Guides the process of adding new CSS variables consistently across all 14 theme blocks (7 themes x 2 modes).
  • Understand Theming Principles: Provides insights into color design principles for each theme and dark mode rules.
  • Use Case: When a designer requests a new accent color for the "bold" theme's dark mode, this Skill can help find the appropriate variable name and ensure it's added correctly to all relevant CSS blocks.

Quick Start

Use the theme-var skill to find the CSS variable for a card background.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: theme-var
Download link: https://github.com/ebenfc/bird-photo-gallery/archive/main.zip#theme-var

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.