Agent skill

panda-css

Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/panda-css

Metadata

Additional technical details for this skill

triggers 
{
    "type": "domain",
    "keywords": [
        "panda-css",
        "panda css",
        "pandacss",
        "@pandacss"
    ],
    "priority": "medium",
    "enforcement": "suggest",
    "intent-patterns": [
        "\\b(use|style|create|configure)\\b.*?\\bpanda(-| )?css\\b",
        "\\bcss\\b.*?\\b(recipe|pattern|token)s?\\b"
    ]
}

SKILL.md

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

Didn't find tool you were looking for?

Be as detailed as possible for better results