Implements build-time CSS-in-JS with Panda CSS using type-safe tokens, recipes, and patterns. Use when wanting zero-runtime CSS-in-JS, design system tokens, or type-safe component variants.
Implements build-time CSS-in-JS with Panda CSS using type-safe tokens, recipes, and patterns. Use when wanting zero-runtime CSS-in-JS, design system tokens, or type-safe component variants.
/plugin marketplace add mgd34msu/goodvibes-plugin/plugin install goodvibes@goodvibes-marketThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/recipes.mdreferences/tokens.mdBuild-time, type-safe CSS-in-JS framework with zero runtime.
Install:
npm install -D @pandacss/dev
npx panda init --postcss
Configure:
// panda.config.ts
import { defineConfig } from '@pandacss/dev';
export default defineConfig({
preflight: true,
include: ['./src/**/*.{js,jsx,ts,tsx}'],
exclude: [],
outdir: 'styled-system',
});
Use in component:
import { css } from '../styled-system/css';
function Button({ children }: { children: React.ReactNode }) {
return (
<button className={css({
padding: '12px 24px',
borderRadius: 'md',
bg: 'blue.500',
color: 'white',
cursor: 'pointer',
_hover: { bg: 'blue.600' },
})}>
{children}
</button>
);
}
import { css } from '../styled-system/css';
const styles = css({
display: 'flex',
alignItems: 'center',
gap: '4',
padding: '4',
bg: 'gray.100',
borderRadius: 'lg',
});
<div className={styles}>Content</div>
const buttonStyles = css({
bg: 'blue.500',
color: 'white',
_hover: {
bg: 'blue.600',
},
_active: {
bg: 'blue.700',
},
_disabled: {
opacity: '0.5',
cursor: 'not-allowed',
},
_focus: {
outline: '2px solid',
outlineColor: 'blue.300',
outlineOffset: '2px',
},
});
const containerStyles = css({
padding: { base: '4', md: '6', lg: '8' },
display: { base: 'block', md: 'flex' },
flexDirection: { md: 'row' },
gap: { md: '4', lg: '6' },
});
function Card({ elevated }: { elevated?: boolean }) {
return (
<div className={css({
padding: '4',
borderRadius: 'lg',
bg: 'white',
boxShadow: elevated ? 'lg' : 'sm',
})}>
Content
</div>
);
}
// panda.config.ts
import { defineConfig } from '@pandacss/dev';
export default defineConfig({
theme: {
extend: {
tokens: {
colors: {
primary: { value: '#3b82f6' },
secondary: { value: '#6b7280' },
},
spacing: {
'4.5': { value: '1.125rem' },
},
radii: {
button: { value: '8px' },
},
},
semanticTokens: {
colors: {
text: {
value: { base: '{colors.gray.900}', _dark: '{colors.gray.100}' },
},
bg: {
value: { base: '{colors.white}', _dark: '{colors.gray.900}' },
},
accent: {
value: { base: '{colors.primary}', _dark: '{colors.blue.400}' },
},
},
},
},
},
});
const styles = css({
color: 'text',
bg: 'bg',
borderColor: 'accent',
padding: '4.5',
borderRadius: 'button',
});
// button.recipe.ts
import { cva } from '../styled-system/css';
export const button = cva({
base: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'md',
fontWeight: 'semibold',
cursor: 'pointer',
transition: 'all 0.2s',
},
variants: {
variant: {
solid: {
bg: 'blue.500',
color: 'white',
_hover: { bg: 'blue.600' },
},
outline: {
border: '2px solid',
borderColor: 'blue.500',
color: 'blue.500',
_hover: { bg: 'blue.50' },
},
ghost: {
color: 'blue.500',
_hover: { bg: 'blue.50' },
},
},
size: {
sm: { px: '3', py: '1.5', fontSize: 'sm' },
md: { px: '4', py: '2', fontSize: 'md' },
lg: { px: '6', py: '3', fontSize: 'lg' },
},
},
defaultVariants: {
variant: 'solid',
size: 'md',
},
});
import { button } from './button.recipe';
function Button({ variant, size, children }: ButtonProps) {
return (
<button className={button({ variant, size })}>
{children}
</button>
);
}
// Usage
<Button variant="outline" size="lg">Click me</Button>
const button = cva({
base: { /* ... */ },
variants: {
variant: {
solid: { /* ... */ },
outline: { /* ... */ },
},
size: {
sm: { /* ... */ },
lg: { /* ... */ },
},
},
compoundVariants: [
{
variant: 'solid',
size: 'lg',
css: {
boxShadow: 'lg',
},
},
],
});
Built-in layout patterns:
import { stack, hstack, vstack, center, container } from '../styled-system/patterns';
// Vertical stack
<div className={stack({ gap: '4', direction: 'column' })}>
<div>Item 1</div>
<div>Item 2</div>
</div>
// Horizontal stack
<div className={hstack({ gap: '4' })}>
<div>Left</div>
<div>Right</div>
</div>
// Center content
<div className={center({ h: 'screen' })}>
<div>Centered</div>
</div>
// Container
<div className={container({ maxW: '4xl', px: '4' })}>
Content
</div>
// panda.config.ts
export default defineConfig({
patterns: {
extend: {
card: {
properties: {
elevated: { type: 'boolean' },
},
transform(props) {
const { elevated, ...rest } = props;
return {
padding: '4',
borderRadius: 'lg',
bg: 'white',
boxShadow: elevated ? 'lg' : 'sm',
...rest,
};
},
},
},
},
});
// Usage
import { card } from '../styled-system/patterns';
<div className={card({ elevated: true })}>
Card content
</div>
For multi-part components:
import { sva } from '../styled-system/css';
const card = sva({
slots: ['root', 'header', 'body', 'footer'],
base: {
root: {
borderRadius: 'lg',
overflow: 'hidden',
bg: 'white',
boxShadow: 'md',
},
header: {
p: '4',
borderBottom: '1px solid',
borderColor: 'gray.200',
},
body: {
p: '4',
},
footer: {
p: '4',
borderTop: '1px solid',
borderColor: 'gray.200',
bg: 'gray.50',
},
},
variants: {
size: {
sm: {
root: { maxW: 'sm' },
header: { p: '3' },
body: { p: '3' },
},
lg: {
root: { maxW: 'lg' },
header: { p: '6' },
body: { p: '6' },
},
},
},
});
// Usage
function Card({ size, children }: CardProps) {
const styles = card({ size });
return (
<div className={styles.root}>
<div className={styles.header}>Title</div>
<div className={styles.body}>{children}</div>
<div className={styles.footer}>Actions</div>
</div>
);
}
Enable styled components syntax:
// panda.config.ts
export default defineConfig({
jsxFramework: 'react',
// ...
});
import { styled } from '../styled-system/jsx';
const Button = styled('button', {
base: {
px: '4',
py: '2',
borderRadius: 'md',
},
variants: {
variant: {
primary: { bg: 'blue.500', color: 'white' },
secondary: { bg: 'gray.200', color: 'gray.800' },
},
},
});
// Usage
<Button variant="primary">Click me</Button>
// Or with Box
import { Box, Flex, Stack } from '../styled-system/jsx';
<Box p="4" bg="gray.100" borderRadius="lg">
<Flex gap="4" alignItems="center">
<Stack gap="2">
<Text>Hello</Text>
</Stack>
</Flex>
</Box>
Define recipes in config:
// panda.config.ts
export default defineConfig({
theme: {
extend: {
recipes: {
button: {
className: 'button',
base: {
display: 'inline-flex',
fontWeight: 'semibold',
},
variants: {
size: {
sm: { px: '3', py: '1' },
md: { px: '4', py: '2' },
},
},
},
},
},
},
});
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.