Agent Skills

Panda ships three official skills that teach AI coding agents how to write Panda: one for styling, one for theme and recipe architecture, one for the v1 to v2 upgrade.

They exist because the usual failures are invisible. An agent writes css({ color: brandColor }), the class lands on the element, and no CSS is emitted. Panda reads your source at build time, and a value it can't read produces nothing.

Install

npx skills add chakra-ui/panda

That installs all three. Each loads on its own triggers, so you never have to name one.

Skills use the open Agent Skills (opens in a new tab) format and work with any agent that supports it, including Claude Code, Cursor, and VS Code.

Available skills

panda-css

Day-to-day styling in a project that already has Panda set up.

It reads your config and generated output before writing anything, so token names come from styled-system/types/tokens.d.ts instead of from guesswork. It covers choosing between css(), a pattern, and a recipe, and it covers the extraction rules that decide whether a style reaches the stylesheet at all.

Loads when you're building or changing components, when a style renders a class name but no CSS, or when styles don't apply.

panda-css-theming

The decisions that are hard to reverse once a codebase has a few hundred call sites.

Where a value belongs across primitives, semantic tokens, composite styles, and recipes. How to name things so a rebrand touches the config instead of every component. Dark mode and multiple themes. And when a style graduates from a css() call to a cva, to a config recipe, to a slot recipe.

Loads when you're setting up theming, adding brand colors, wiring dark mode, shipping more than one theme, designing a variant API, or cleaning up a theme that's drifted.

panda-css-migrate

Upgrading v1 to v2, and debugging a project that worked on 1.x and breaks on 2.x.

An ordered checklist, then the old-to-new list: hooks moving onto plugins, createStyleContext splitting in two, template literal styles going away, panda ship becoming panda lib. It links Upgrading to v2 rather than restating it.

Loads when you're upgrading to v2, when a build fails after upgrading, or when CSS output changes.

LLMs.txt and MCP

Three surfaces, three questions:

• LLMs.txt: what is this API?
• MCP Server: what exists in this project right now?
• Agent Skills: how do I do this correctly?

Skills point at the other two rather than duplicating them.

Wire up the linter

@pandacss/eslint-plugin catches unresolved tokens, nested selectors missing &, files outside include, deprecated APIs, and hardcoded values that have tokens.

A rule that runs beats a rule an agent might read. Use both: the skills stop the mistake being written, the linter stops it being merged. See Linting.

Add your project's rules

Skills load on their own. A line in your repo's AGENTS.md, or whatever file your agent reads first, still helps it orient before it starts:

This project uses Panda CSS. Use the official Panda skills (`panda-css`, `panda-css-theming`). Prefer css(), patterns,
and recipes. Never invent token names or write Tailwind classes.

If your team has conventions the skills can't know, such as which recipes are off limits or which scales are frozen, that file is where they go. The skills teach Panda. Only you can teach your project.