Shade — new component / pattern checklist

Shade — new component / pattern checklist

Before marking a Shade component or pattern done, this checklist must pass.

Files and naming

• File: kebab-case (dropdown-menu.tsx) — matches ShadCN CLI output. Don't rename for casing.
• Exported identifier: PascalCase (DropdownMenu).
• Hooks, functions, variables: camelCase.
• Sibling <name>.stories.tsx is required (same folder).
• A component file exports only components and types, so Fast Refresh can hot-update it (ESLint enforces this). An exported cva() config goes in a sibling <name>-variants.ts; exported hooks, contexts and helpers go in their own sibling module (sidebar-context.ts). These siblings belong to the component; they aren't Recipes.
• Inside Shade itself, import via the @/ alias (@/lib/utils, @/components/ui/input-surface).

Storybook title prefix

Required on every story file:

• tags: ['autodocs']
• parameters.docs.description.component — short one-line summary
• Per-story parameters.docs.description.story — one-liner explaining when to use that variant
• One story per important variant/state. Many small focused stories > one prose-heavy story.

Component shape

// thing-variants.ts
import {cva} from 'class-variance-authority';

const thingVariants = cva('base-classes-here', {
    variants: {
        variant: {default: '...', destructive: '...'},
        size: {default: '...', sm: '...'}