panda-css

What it does

This skill enables AI agents to interact with Panda CSS, a utility-first CSS framework designed for building scalable and maintainable stylesheets. It allows agents to generate, manipulate, and apply styling tokens directly within the Panda ecosystem.

When to use it

• Generating consistent design systems across large codebases using atomic CSS tokens.
• Automating style updates when design tokens change in a centralized configuration file.
• Creating responsive layouts by leveraging utility classes defined in the Panda schema.
• Integrating with AI workflows that require strict adherence to predefined styling constraints.

Key capabilities

• Access to Panda CSS's utility-first class system for rapid UI development.
• Direct manipulation of design tokens (colors, spacing, typography) via code generation.
• Support for dynamic theme switching and component-based styling patterns.
• Integration with build pipelines to enforce consistent styling rules automatically.

Example prompts

• "Generate a responsive navigation bar using Panda CSS utility classes."
• "Update all primary button styles by modifying the 'colors.primary' token in Panda CSS."
• "Create a card component layout that adapts to different screen sizes using Panda's spacing utilities."

Tips & gotchas

Ensure your project is initialized with the @pandacss/dev tool before attempting to generate or modify styles. Be aware that changes to design tokens may require rebuilding the application to reflect updates in real-time.