@pandacss/mcp

What it does

The Panda CSS MCP server integrates Panda's build-time, type-safe CSS-in-JS system with Claude. It allows Claude to understand your project's design tokens, recipes (pre-built component styles), and styling patterns, then generate type-safe CSS or suggest style improvements that comply with your design system. The server reads your Panda configuration and can access your filesystem to provide context-aware recommendations.

Who it's for

Frontend engineers building user interfaces with Panda CSS who want Claude to assist with styling decisions, design token selection, and component design. Teams using Panda for design system governance will benefit from having Claude enforce token usage and styling consistency.

Common use cases

• Generate type-safe CSS using Panda patterns and tokens that match your design system
• Draft responsive component styles using Panda's recipes and variants
• Query design tokens to ensure color, spacing, and typography consistency
• Review component styles for compliance with your design system
• Extend or refactor existing Panda configurations

Setup pitfalls

• Panda must be initialized in your project with a valid panda.config.ts file and complete build output
• The server requires filesystem read and write access — this is classified as high risk and should be sandboxed appropriately
• Ensure your Panda project builds successfully before connecting the MCP server
• Network calls may be made to resolve dependencies — verify your environment can reach required resources