Panda CSS

Use this skill to configure, author, or debug Panda CSS in JavaScript and TypeScript projects.

Workflow

1. Inspect the existing setup before changing anything:
   • Package manager and repo instructions, especially AGENTS.md.
   • package.json scripts and dependencies.
   • panda.config.*, postcss.config.*, framework config, root CSS imports, tsconfig.json, and generated styled-system usage.
2. Prefer the integration the project already uses. For new setup, prefer PostCSS when the framework supports it; use the Panda CLI when PostCSS is unavailable or the project already uses CLI-generated CSS.
3. Respect the project's package manager and scripts. For JS/TS one-off commands, default to pnpx unless the repo instructions or lockfile clearly prefer another command.
4. Keep authored styles extraction-safe. Prefer object literals passed to generated helpers such as css, recipes, patterns, and styled; avoid constructing style keys or class names dynamically unless the config explicitly covers them with staticCss.
5. Regenerate Panda artifacts after config, token, utility, recipe, or pattern changes. Check whether the repo uses a prepare, postinstall, dev, build, or explicit panda codegen script.
6. Verify the actual failure path: generated files, CSS layer import, content globs, TypeScript include paths, and runtime import paths.

References

Read references/panda-css.md when exact setup snippets, config keys, authoring patterns, token syntax, CLI commands, or troubleshooting checks are needed.