new-component

One component, written once, seen everywhere

The new-component skill is a checklist the coding agent follows, not a program. The build checks are what make a skipped step impossible. Below are the steps, then one real component traced from its folder to every place it shows up. The full skill file is on Skills.

The steps

Ask
Get the component’s name and one sentence on what it is for.
Study the references
Read Button.tsx and Input.tsx, the two house examples.
Makes the componentWrite the three files
The code, the styles and the stories, following the house rules: every option described, every English word replaceable, tokens only, links through the shared helper.
Design QA
Render every story in both themes, magnify corners and states, line it up against its nearest siblings, and fix what looks off. The checks refuse to start the normal Storybook until the next step, so this pass uses a raw one.
Makes the registry entryRegister it
One entry in registry.json. The nav, sitemap, README and chat all read from it.
Makes the specWrite the spec
A short section in design.md: class name, tokens and behaviour.
Makes the page and previewHand off the website page
Offer to build the showcase page with the component-doc-page skill. Once it exists, the whole build chain passes for the first time.

Button, end to end

Button is stored once, in src/components/Button/. Storybook and this site read that folder directly; everything else passes through the build chain and comes out as a copy.

1 · Written by handonce, in the repo

2 · Before every builda missing piece stops it here

3 · Generatednever edited by hand

4 · Where people see itlive read or copy

src/components/Button/Button.tsx · Button.css · Button.stories.ts

Registry entrysrc/components/registry.json

Specdesign.md

Showcase pagewebsite/src/app/components/button/

Preview tileComponentPreviews.tsx

Validatorsfolder ↔ registry · prop docs · tokens only

Generatorswrite every copy in step 3

Package exportssrc/index.ts

Schema + markdownbutton.json · button.md

shadcn entrywebsite/public/r/button.json

Prop API + READMEcomponent-api.generated.ts · README.md

Storybookfinds every stories file

This site/components/button

npmdist/, built at release

Agents + chat/api/mcp · site chat

both read the folder liveat release

Written once, checked before every build, copied where it travels.

Live or copy

A live read changes the moment the folder does; a copy changes on the next build or release.

How each surface gets Button
Surface	Gets Button from	Kind
Storybook	The component folder, directly	Live
Showcase page	The package name, which points at src	Live
npm	dist, built from src at release	Copy
Schema, markdown, shadcn, prop API	Generators reading the component	Copy
Nav, sitemap, title, README	The registry entry	Copy