ReddRadar
Agent skill
using-panda-css
Panda CSS type safety rules for token references. Use when styling with css(), cva(), or token paths.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/using-panda-css
SKILL.md
Using Panda CSS
CRITICAL: Token Type Safety
Panda CSS's css() and cva() functions are NOT type-safe for token references due to the AnyString escape hatch.
The Problem
// styled-system/types/style-props.d.ts
type AnyString = (string & {})
maxWidth?: ConditionalValue<... | AnyString> // ❌ Accepts ANY string!
FORBIDDEN - String Literals
// These compile but are NOT type-safe:
css({ maxWidth: 'sizes.container.wide' }) // ❌ AnyString escape hatch
css({ paddingInline: '4' }) // ❌ Would accept 'INVALID' too
REQUIRED - token() Function
import { token } from '../styled-system/tokens'
css({ maxWidth: token('sizes.container.wide') }) // ✅ Type-safe
css({ paddingInline: token('spacing.4') }) // ✅ Type-safe
// css({ color: token('colors.INVALID.500') }) // ❌ TypeScript error!
Rule
If a string looks like a token path (contains . and starts with a token category like sizes, spacing, colors, fontSizes), it MUST use token().
Only exceptions: literal CSS values like '100%', 'auto', 'bold', numeric values.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?