panda-recipes

Creates Panda CSS recipes with variants, compound variants, and M3 styling.

Updated Dec 25, 2025

Search Tags:#css #recipes #variants #panda-css #M3 #compoundVariants

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides patterns for creating Panda CSS recipes with variants, compound variants, and M3 styling, enabling scalable, type-safe component styling.

Core Features & Use Cases

Recipe vs Inline CSS: Use defineRecipe for variants instead of inline css.
Complete Recipe Example: Button recipe with variants for filled, outlined, text, elevated, tonal.
Registering Recipes: How to wire recipes in panda.config.ts.
Using Recipes: How components import and apply recipes via className.
M3 State Layers Pattern: Guidelines for hover, focus, pressed states as opacity-based layers.

Quick Start

Create a new button.recipe.ts using defineRecipe, register in panda.config.ts, and apply via Button component.