panda-css
Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.
Best use case
panda-css is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.
Teams using panda-css should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/panda-css/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How panda-css Compares
| Feature / Agent | panda-css | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Panda CSS CSS-in-JS framework with static analysis and atomic CSS output for type-safe, optimized styling. ## LLM-Optimized Documentation Fetch these pre-compiled docs for comprehensive topic coverage: | Topic | URL | Covers | | ------------- | -------------------------------------------- | -------------------------------------------------------------------------------- | | Complete Docs | https://panda-css.com/llms-full.txt | Everything in one file | | Overview | https://panda-css.com/llms.txt/overview | Getting started, browser support, FAQ, why Panda | | Installation | https://panda-css.com/llms.txt/installation | Framework-specific setup guides | | Concepts | https://panda-css.com/llms.txt/concepts | Patterns, recipes, conditional styles, responsive design, cascade layers, hooks | | Theming | https://panda-css.com/llms.txt/theming | Design tokens, text styles, layer styles, animation styles | | Utilities | https://panda-css.com/llms.txt/utilities | All CSS utilities by category (background, border, flex, grid, typography, etc.) | | Customization | https://panda-css.com/llms.txt/customization | Custom theme, utilities, patterns, presets | | Guides | https://panda-css.com/llms.txt/guides | Practical use case guides | | Migration | https://panda-css.com/llms.txt/migration | Migrating from other CSS-in-JS libraries | | References | https://panda-css.com/llms.txt/references | CLI commands, configuration reference | For broad topic understanding, fetch the aggregated `/llms.txt/topic` URL. For specific page details, fetch `/docs/path/page.mdx`. ## Key Concepts ### Cascade Layers (specificity order) 1. `reset` - CSS reset/preflight 2. `base` - Global base styles 3. `tokens` - Design token CSS variables 4. `recipes` - Component recipe styles 5. `utilities` - Atomic utility classes ### Styling Approaches - `css()` function - Inline atomic styles - Recipes (`cva`) - Multi-variant component styles with base, variants, compoundVariants - Config recipes - JIT generation, only used variants compiled - Patterns - Layout primitives (Stack, Flex, Grid, Container) ### Conditional Styling - Pseudo-classes: `_hover`, `_focus`, `_active`, `_disabled` - Pseudo-elements: `_before`, `_after` - Responsive: `sm`, `md`, `lg`, `xl`, `2xl` breakpoints - Color opacity: `color/opacity` syntax (e.g., `blue.500/50`) ### Design Tokens - Semantic tokens with light/dark mode support - Token categories: colors, spacing, sizes, fonts, radii, shadows - Access via `token()` function or curly brace syntax ## Key Patterns - Static analysis at build time extracts styles from source - JIT CSS generation - only used styles are compiled - Type-safe APIs with generated TypeScript types - Atomic CSS output for optimal caching - `extend` keyword for customizing without losing defaults
Related Skills
zod
Zod v4 TypeScript schema validation patterns and best practices. Use when writing or modifying Zod schemas, adding schema annotations/metadata, or validating data with Zod.
writing-hashql-jexpr
HashQL J-Expr syntax for writing queries. Use when writing J-Expr code, using #literal/#struct/#list constructs, understanding function call syntax, or working with HashQL query files (.jsonc).
writing-hashql-diagnostics
HashQL diagnostic writing patterns using hashql-diagnostics crate. Use when creating error messages, warnings, Labels, Messages, Severity levels, Patches, Suggestions, or improving diagnostic quality in HashQL code.
testing-hashql
HashQL testing strategies including compiletest (UI tests), unit tests, and snapshot tests. Use when writing tests for HashQL code, using //~ annotations, running --bless, debugging test failures, or choosing the right testing approach.
skill-creator
Guide for creating effective Agent Skills. Use when users want to create a new skill (or update an existing skill) that extends an AI agent's capabilities with specialized knowledge, workflows, or tool integrations. Covers skill structure, YAML frontmatter, trigger configuration, and the 500-line rule.
mastra
Mastra TypeScript framework for AI agents with memory, tools, workflows, and RAG. Use when working with @mastra/* packages or building AI agents.
managing-git-workflow
Git workflow for HASH including branch naming, PR creation, and PR reviews. Use when creating branches, making commits, opening pull requests, or reviewing PRs.
managing-cargo-dependencies
Cargo.toml dependency management patterns for HASH workspace. Use when adding, updating, or removing dependencies, organizing Cargo.toml sections, configuring version pinning and default features, or managing public dependencies.
handling-rust-errors
HASH error handling patterns using error-stack crate. Use when working with Result types, Report types, defining custom errors, propagating errors with change_context, adding context with attach, implementing Error trait, or documenting error conditions in Rust code.
exploring-rust-crates
Generate Rust documentation to understand crate APIs, structure, and usage. Use when exploring Rust code, understanding crate organization, finding functions/types/traits, or needing context about a Rust package in the HASH workspace.
documenting-rust-code
Rust documentation practices for HASH codebase. Use when writing doc comments, documenting functions/types/traits/modules, creating error sections, using intra-doc links, or following rustdoc conventions.
ark-ui
Headless component library for React. Use when building UI components with @ark-ui/react, implementing accessible form inputs, overlays, navigation patterns, or needing guidance on Ark UI's data attributes, composition (asChild), and state management patterns.