Create Recipe

Step 2: Research UI Library Inspiration

Ask the user: "Which UI libraries should I study for inspiration? Provide URLs to specific component pages."

Suggest these common references:

• Nuxt UI: https://ui.nuxt.com/components/<name>
• Shadcn/ui: https://ui.shadcn.com/docs/components/<name>
• Radix Themes: https://www.radix-ui.com/themes/docs/components/<name>
• Chakra UI: https://v2.chakra-ui.com/docs/components/<name>
• Mantine: https://mantine.dev/core/<name>/

For each URL the user provides, use WebFetch to retrieve the page. Extract:

• Variant axes — What props/variants does this library expose? (color, size, variant/style, radius, etc.)
• Variant values — What options exist for each axis? (e.g., sizes: sm/md/lg or xs/sm/md/lg/xl)
• Visual styles — How do solid, outline, soft, ghost variants look?
• Sub-parts — Does the component have named parts (header, content, footer, trigger, etc.)?
• Interactive states — What hover/focus/active/disabled behaviors exist?
• Accessibility patterns — ARIA roles, keyboard navigation, focus management

Summarize findings to the user before proceeding.

Phase 2: Design

Based on discovery, design the recipe structure. Present this to the user for approval before implementing.

Classification Decisions

Determine and document:

1. Component type classification (interactive / static / container / layout / minimal)
2. Variant axes:
   • color — which colors (semantic, non-semantic, or none)
   • variant — which visual styles (solid/outline/soft/subtle/ghost/link)
   • size — which sizes (xs/sm/md/lg/xl or subset)
   • Custom axes — orientation, shape, density, boolean states (active, disabled, block)
3. Base style template — which base pattern to use (interactive/static/container)
4. Compound variant strategy — colors.flatMap() for semantic, manual for non-semantic, mixed for both
5. Default variants — what the zero-config instance should look like
6. Sub-recipes — which sub-parts need their own createUseRecipe call vs plain selectors
7. HTML element — what element the component renders as (div, span, button, etc.)

Present Design to User

Show a structured summary:

Component: <Name>
Type: <interactive|static|container|layout|minimal>
Colors: <list>
Variants: <list>
Sizes: <list>
Custom axes: <list or "none">
Sub-recipes: <list or "none">
Default: color=<x>, variant=<y>, size=<z>

Wait for user approval before proceeding to implementation.

Phase 3: Implementation

Implement all 7 deliverables in order. Each deliverable must follow the exact patterns documented below.

Deliverable 1: Recipe TypeScript File(s)

Path: theme/src/recipes/<component-name>/use<ComponentName>Recipe.ts

File Template

import { createUseRecipe } from "../../utils/createUseRecipe";

const colors = [
	"primary",
	"secondary",
	"success",
	"info",
	"warning",
	"error",
] as const;

/**
 * <Brief description of the recipe>.
 */
export const use<ComponentName>Recipe = createUseRecipe("<component-name>", {
	base: {
		// Shared CSS properties applied to all variants
	},
	variants: {
		color: {
			primary: {},
			secondary: {},
			success: {},
			info: {},
			warning: {},
			error: {},
		},
		variant: {
			// Choose variant styles appropriate for this component type.
		},
		size: {
			// Choose appropriate sizes for the component (3-5 sizes).
		},
	},
	compoundVariants: colors.flatMap((color) => [
		// One entry per variant style per color
	]),
	defaultVariants: {
		color: "primary",
		variant: "solid",
		size: "md",
	},
});

Formatting Rules

• Use tabs for indentation (not spaces).
• Use double quotes for all string values.
• Add as const on the colors array.
• Add as const on every variant value inside match objects: variant: "solid" as const.
• The recipe name (first argument) is kebab-case matching the component.
• The exported constant follows the pattern use<ComponentName>Recipe.
• Use colors.flatMap() to generate compound variants dynamically for semantic colors. For non-semantic-only components, write all compound variants manually.

Base Style Templates

Interactive Component Base (button, menu item, toggle):