m3-tokens

Provide Material Design 3 token values and color roles for light and dark themes.

Updated Dec 25, 2025

Search Tags:#theme #tokens #palette #semantic-tokens #material design 3

One-click install

npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill m3-tokens

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: m3-tokens
Source: https://github.com/Tasty-Maker-Studio/Discourser-Design-System/tree/main/.claude/skills/m3-tokens
Command: npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill m3-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides Material Design 3 token values and the color values used by the design system, enabling semantic color usage and consistent theming across light/dark modes.

Core Features & Use Cases

Seed and Source of Truth: Tokens derived from docs/material-theme.json with Seed Color #63A002.
Light/Dark Theme Values: Semantic color roles for primary, surface, onSurface, etc.
Semantic Tokens Pattern: How to map color roles to Panda semantic tokens for UI recipes.

Quick Start

Reference docs/material-theme.json and load values into your Panda token transform; use semantic tokens like primary and onPrimary in component recipes.