# Panda CSS

> 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.

- Skill: `aiko-atami/panda-css` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add aiko-atami/panda-css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aiko-atami/panda-css/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aiko-atami (https://skillmd.com/u/aiko-atami)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/aiko-atami/panda-css

---


# 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](references/panda-css.md) when exact setup snippets, config keys, authoring patterns, token syntax, CLI commands, or troubleshooting checks are needed.