Panda CSS type safety rules for token references. Use when styling with css(), cva(), or token paths.
Enforces type-safe token references in Panda CSS by requiring the token() function for all design token paths.
/plugin marketplace add jasonkuhrt/claude-marketplace/plugin install panda-css@jasonkuhrtThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Panda CSS's css() and cva() functions are NOT type-safe for token references due to the AnyString escape hatch.
// styled-system/types/style-props.d.ts
type AnyString = (string & {})
maxWidth?: ConditionalValue<... | AnyString> // ❌ Accepts ANY string!
// These compile but are NOT type-safe:
css({ maxWidth: 'sizes.container.wide' }) // ❌ AnyString escape hatch
css({ paddingInline: '4' }) // ❌ Would accept 'INVALID' too
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!
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.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.