Vanilla Extract for React Components

Use this skill when implementing or refactoring React component styling with Vanilla Extract. It emphasizes zero-runtime CSS generation, strong TypeScript ergonomics, scalable variants, and safe theming patterns.

When to Apply

Use this skill when tasks include:

• Setting up Vanilla Extract with Vite + React
• Creating component styles in .css.ts files
• Building typed variant systems (styleVariants, recipes)
• Implementing design tokens and themes (createTheme, createThemeContract)
• Runtime variable updates (@vanilla-extract/dynamic)
• Global/reset styles (globalStyle, createGlobalTheme)
• Utility-first typed atoms with optional @vanilla-extract/sprinkles

Core Mental Model

Vanilla Extract generates static CSS at build time from TypeScript style definitions.