slurpyb/pandacss
Panda CSS skills for scaffolding, configuring, and hardening type-safe styling in TypeScript and JavaScript apps.
Author, consume, and enforce a DESIGN.md design system spec (Google Labs open format, package @google/design.md). This skill should be used when the project has a DESIGN.md at the root or under docs/, when the user mentions "design tokens", "design system spec", "DESIGN.md", "tokens.json", needs to translate a design system into Tailwind theme config, export tokens to DTCG, lint token consistency, diff design system revisions, or check WCAG contrast on component color pairs. Acts as the upstream source of truth for the impeccable sub-commands (colorize/typeset/audit/critique), web-design-guidelines, and shadcn.
Author or review Elena component ownership, props, templates, events, lifecycle, accessibility, frameworks, SSR, and tests in this repository.
Author or review Elena component CSS, recipe transposition, token use, scoped ownership, progressive rendering, layout, motion, and visual verification.
Change or verify Elena build configuration, package exports, CEM and declarations, registration, SSR, framework fixtures, and release validation.
Work with @fullsnacklab/components and @fullsnacklab/design-system. Use when selecting, authoring, extending, composing, wrapping, integrating, or diagnosing Full Snack Lab component families and theme contracts.
Use when styling interfaces with Panda CSS, creating React components around recipes, or deciding among generated JSX, patterns, recipes, slot recipes, style context, tokens, semantic tokens, named styles, conditions, utilities, and configuration.
Storybook 8+ — writing stories (CSF3), configuring main.ts / preview.ts, addons (essentials, a11y, designs, MSW), parameters, args/argTypes, decorators, doc blocks, test-runner / Vitest integration, and framework setup (React/Vite, Next.js, SvelteKit, Vue). Use when authoring or debugging stories, configuring Storybook, mocking network requests, or wiring component tests.
Authors and extends portable Panda CSS patterns with typed properties, token-aware transforms, responsive behavior, preset registration, and behavioral tests. Use when creating, modifying, reviewing, or debugging patterns in any Panda project or preset.