panda-css

Build styles with Panda CSS. Use when creating, editing, or reviewing any code that uses Panda CSS — css(), cva(), sva(), recipes, patterns, tokens, semantic tokens, config, theming, or JSX styled components. Supports React, Vue, Svelte, Solid, and any framework with PostCSS.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "panda-css" with this command: npx skills add finnan444/skills/finnan444-skills-panda-css

Panda CSS

Reference Panda CSS LLM-optimized docs before writing or reviewing Panda CSS code.

Docs Sources

First fetch https://panda-css.com/llms.txt — this is the index of all available LLM docs.

Then fetch the relevant section-specific docs based on the task:

SectionURLWhen to use
Full docshttps://panda-css.com/llms-full.txtGeneral reference, broad tasks
Overviewhttps://panda-css.com/llms.txt/overviewSetup, installation, framework integrations
Conceptshttps://panda-css.com/llms.txt/conceptscss(), recipes (cva/sva), patterns, conditions, cascade layers, style merging, JSX style context
Theminghttps://panda-css.com/llms.txt/themingTokens, semantic tokens, text styles, layer styles, animation styles
Utilitieshttps://panda-css.com/llms.txt/utilitiesStyle properties, shorthands, spacing, sizing, typography, effects, gradients, focus ring
Customizationhttps://panda-css.com/llms.txt/customizationCustom conditions, utilities, patterns, presets, config functions, theme overrides
Guideshttps://panda-css.com/llms.txt/guidesMigration, dynamic styling, debugging, advanced patterns
Referenceshttps://panda-css.com/llms.txt/referencesCLI commands, panda.config.ts options, full config reference

Use WebFetch to retrieve the correct reference before starting any task. If the index lists different section URLs, follow the index and ignore the table above.

Usage

  1. Fetch llms.txt index to check for any new/updated doc URLs.
  2. Confirm Panda CSS is installed by checking for @pandacss/dev in package.json/lockfiles. If missing, pause and alert the user before proceeding.
  3. Note the installed Panda version (v0 vs v1+). If docs don’t match the installed major version, flag it before continuing.
  4. In monorepos or multiple apps, inspect the relevant package path or ask the user which app to target.
  5. Check for panda.config.ts (or .js/.mjs) to understand tokens, recipes, patterns, and framework config. If absent, ask whether to scaffold a minimal config.
  6. Fetch the matching section-specific docs for the task at hand (reuse a cached copy during the session unless llms.txt changed).
  7. Read the relevant sections for the features needed.
  8. Write or review code following the documented patterns.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

skeleton-dev

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Repository SourceNeeds Review
160.9K94.2Kanthropics
Coding

remotion-best-practices

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Repository SourceNeeds Review
148.3K2.1Kremotion-dev
Coding

azure-ai

Service Use When MCP Tools CLI

Repository SourceNeeds Review
136.4K155microsoft