Panda CSS
Use this skill to configure, author, or debug Panda CSS in JavaScript and TypeScript projects.
Workflow
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
1---2name: panda-css3description: Use this skill for Panda CSS work: setting up or migrating @pandacss/dev, editing panda.config.* files, integrating PostCSS or the Panda CLI, using generated styled-system imports, css/cva/recipes/patterns/jsx APIs, tokens and semantic tokens, staticCss or dynamic styling, and troubleshooting missing generated styles or extraction issues.4---56# Panda CSS78Use this skill to configure, author, or debug Panda CSS in JavaScript and TypeScript projects.910## Workflow11121. Inspect the existing setup before changing anything:13 - Package manager and repo instructions, especially AGENTS.md.14 - `package.json` scripts and dependencies.15 - `panda.config.*`, `postcss.config.*`, framework config, root CSS imports, `tsconfig.json`, and generated `styled-system` usage.162. 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.173. 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.184. 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`.195. 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.206. Verify the actual failure path: generated files, CSS layer import, content globs, TypeScript include paths, and runtime import paths.2122## References2324Read [references/panda-css.md](references/panda-css.md) when exact setup snippets, config keys, authoring patterns, token syntax, CLI commands, or troubleshooting checks are needed.
aiko-atami