Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.
.claude/skills/hashintel-panda-css/SKILL.md| Model | Eval pass | Runs |
|---|---|---|
| gemini-3.6-flash | 100% | 10 |
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -30% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -57% | 0% |
| case-12 | ✗→✓ | ▲ Improved | -49% | 0% |
| case-13 | ✗→✓ | ▲ Improved | -19% | 0% |
| case-14 | ✗→✓ | ▲ Improved | -50% | 0% |
CSS-in-JS framework with static analysis and atomic CSS output for type-safe, optimized styling.
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.
reset - CSS reset/preflightbase - Global base stylestokens - Design token CSS variablesrecipes - Component recipe stylesutilities - Atomic utility classescss() function - Inline atomic stylescva) - Multi-variant component styles with base, variants, compoundVariants_hover, _focus, _active, _disabled_before, _aftersm, md, lg, xl, 2xl breakpointscolor/opacity syntax (e.g., blue.500/50)token() function or curly brace syntaxextend keyword for customizing without losing defaults| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 11,862 | 5,381 | -55% | 1 | 1 | 0% | 2,359 | 1,648 | -30% | 0 | 0 | — |
case-02 | pass→pass | 11,900 | 5,960 | -50% | 1 | 1 | 0% | 1,655 | 1,071 | -35% | 0 | 0 | — |
case-03 | pass→pass | 13,677 | 3,637 | -73% | 1 | 1 | 0% | 2,173 | 1,279 | -41% | 0 | 0 | — |
case-04 | pass→pass | 7,717 | 4,318 | -44% | 1 | 1 | 0% | 1,201 | 1,406 | +17% | 0 | 0 | — |
case-05 | pass→pass | 5,703 | 4,970 | -13% | 1 | 1 | 0% | 701 | 1,155 | +65% | 0 | 0 | — |
case-06 | pass→pass | 8,209 | 5,183 | -37% | 1 | 1 | 0% | 827 | 1,164 | +41% | 0 | 0 | — |
case-07 | pass→pass | 11,897 | 3,366 | -72% | 1 | 1 | 0% | 952 | 1,173 | +23% | 0 | 0 | — |
case-08 | pass→pass | 5,820 | 3,917 | -33% | 1 | 1 | 0% | 699 | 1,211 | +73% | 0 | 0 | — |
case-09 | pass→pass | 5,832 | 6,238 | +7% | 1 | 1 | 0% | 763 | 1,209 | +58% | 0 | 0 | — |
case-10 | pass→pass | 4,479 | 4,030 | -10% | 1 | 1 | 0% | 644 | 1,349 | +109% | 0 | 0 | — |
case-11 | fail→pass | 33,438 | 11,395 | -66% | 1 | 1 | 0% | 2,808 | 1,201 | -57% | 0 | 0 | — |
case-12 | fail→pass | 12,162 | 3,269 | -73% | 1 | 1 | 0% | 1,947 | 990 | -49% | 0 | 0 | — |
case-13 | fail→pass | 7,755 | 4,561 | -41% | 1 | 1 | 0% | 1,196 | 967 | -19% | 0 | 0 | — |
case-14 | fail→pass | 12,855 | 3,314 | -74% | 1 | 1 | 0% | 1,941 | 967 | -50% | 0 | 0 | — |
case-15 | fail→pass | 15,646 | 2,252 | -86% | 1 | 1 | 0% | 2,437 | 998 | -59% | 0 | 0 | — |
case-16 | pass→pass | 7,153 | 42,457 | +494% | 1 | 1 | 0% | 1,144 | 1,585 | +39% | 0 | 0 | — |
case-17 | pass→pass | 8,413 | 6,759 | -20% | 1 | 1 | 0% | 1,406 | 1,756 | +25% | 0 | 0 | — |
case-18 | pass→pass | 26,010 | 5,967 | -77% | 1 | 1 | 0% | 1,184 | 1,316 | +11% | 0 | 0 | — |
case-19 | pass→pass | 26,421 | 6,079 | -77% | 1 | 1 | 0% | 934 | 1,457 | +56% | 0 | 0 | — |
case-20 | pass→pass | 20,846 | 22,181 | +6% | 1 | 1 | 0% | 2,704 | 2,263 | -16% | 0 | 0 | — |
case-21 | pass→pass | 10,279 | 10,149 | -1% | 1 | 1 | 0% | 1,800 | 2,366 | +31% | 0 | 0 | — |
case-22 | pass→pass | 12,873 | 41,826 | +225% | 1 | 1 | 0% | 1,928 | 2,632 | +37% | 0 | 0 | — |
case-23 | pass→pass | 53,534 | 12,809 | -76% | 1 | 1 | 0% | 1,469 | 2,174 | +48% | 0 | 0 | — |
case-24 | pass→pass | 13,480 | 11,193 | -17% | 1 | 1 | 0% | 2,210 | 2,434 | +10% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted. The headline lift of +25 percentage points is the difference between those two pass rates over the 24 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.