material-theme-builder
CommunityGenerate M3 color themes programmatically
Design & Creative#theme generation#material design 3#css tokens#color theme#json export#programmatic theming
Authorshelbeely
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the generation of Material Design 3 color themes from a single source color, providing complete, accessible palettes for light and dark modes.
Core Features & Use Cases
- Programmatic Theme Generation: Creates M3 color palettes using the
@material/material-color-utilitieslibrary. - Custom Color Integration: Allows for harmonizing custom brand colors with the generated theme.
- Export Options: Outputs themes as CSS custom properties or JSON tokens.
- Use Case: A developer needs to create a consistent M3 theme for a new application based on their company's brand color. They can use this Skill to generate all necessary color tokens in CSS format.
Quick Start
Generate M3 color tokens as CSS custom properties from the hex color #FF9800.
Dependency Matrix
Required Modules
@material/material-color-utilities
Components
scriptsreferences
💻 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: material-theme-builder Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#material-theme-builder Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.