panda-recipes

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.