Ghost: Skill for Claude Code

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

Layer	Title
Primitive	Primitives / <Name>
Component	Components / <Name>
Recipe	Recipes / <Name>
Pattern	Patterns / <Name>
Token gallery	Tokens / <Topic>

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: '...'}
    },
    defaultVariants: {variant: 'default', size: 'default'}
});

export {thingVariants};

// thing.tsx
import * as React from 'react';
import {type VariantProps} from 'class-variance-authority';
import {thingVariants} from '@/components/ui/thing-variants';
import {cn} from '@/lib/utils';

export interface ThingProps
    extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof thingVariants> {}

const Thing = React.forwardRef<HTMLDivElement, ThingProps>(
    ({className, variant, size, ...props}, ref) => (
        <div
            ref={ref}
            className={cn(thingVariants({variant, size, className}))}
            {...props}
        />
    )
);
Thing.displayName = 'Thing';

export {Thing};