Skills
.Work. You
Rest

theme-system-design

Community

Design token contracts for reliable theming.

Design & Creative#design tokens#css custom properties#theme architecture#semantic token layering#runtime theming#token contract#front-end ui
Authorjacob-balslev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Theme systems turn design intent into stable, reusable token contracts so components can switch appearance without brittle, hard-coded styling or repeated rework.

Core Features & Use Cases

  • Token tier architecture: Define reference tokens (raw values), system/semantic tokens (intent), and component tokens (overrides) so components consume only the contract layer.
  • Runtime theming with CSS custom properties: Deliver themes via scoped custom property assignments (e.g., :root and [data-theme="..."]) to enable fast, subtree-level overrides.
  • Theme contract guarantees: Make additive changes safe and breaking changes detectable via build-time/lint-time verification, token naming discipline, and documented semantics.

Quick Start

Ask an AI to help you design a three-tier theme token system using CSS custom properties, including the semantic naming rules and the verification checks that prevent components from depending on raw hex values.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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-system-design
Download link: https://github.com/jacob-balslev/skill-graph/archive/main.zip#theme-system-design

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 471,000+ vetted skills library on demand.