primitives: Skill for Claude Code

Writing Storybook Stories for Radix NG Primitives

Checklist — run through this before writing any story file

1. Any story embedded via <Canvas of={X}> must be a standalone component — props do not survive a Canvas embed. The exception is the primary Default story, which may be a small inline template using props + args, provided it is surfaced in the MDX via <Primary /> / <Controls /> (never <Canvas of={Default}>). This matches the button and checkbox references.

   // ✅ Default — small inline template with props/args, shown via <Primary/> in MDX
   export const Default: Story = {
     args: { disabled: false },
     render: (args) => ({
       props: { ...args, b: demoButton },
       template: html`
         <button rdxButton ${argsToTemplate(args)} [class]="b.base">Button</button>
       `
     })
   };
   
   // ✅ Named example — standalone component, safe to embed via <Canvas of={X}>
   export const Variants: Story = {
     parameters: source(variantsSource),
     render: () => ({
       template: html`
         <button-variants-example />
       `
     })
   };
   
   // ❌ wrong — a props-based story embedded via <Canvas of={WithScroll}> renders blank
   export const WithScroll: Story = {
     render: () => ({ props: { r: demoRadio }, template: `<div [class]="r.group">...` })
   };
   

   In the MDX: surface Default with <Primary /> (+ <Controls />) and add of={Stories} to <Meta>; embed every other example with <Canvas of={Stories.X} />.

2. One component → one file. Every standalone story component gets its own file: stories/select-default.ts, stories/select-with-scroll.ts, etc. Never put multiple story components in a single stories/<name>.ts.

   Reason: ?raw imports the entire file, so a shared file shows all source for every story.

3. ?raw import per story file. In <name>.stories.ts:

   import defaultSource from './select-default?raw';
   export const Default: Story = {
     parameters: source(defaultSource),
     render: () => ({
       template: html`
         <select-default />
       `
     })
   };