| name | dutchy-new-component |
| description | Add a Dutchy Design System component with its Bun SSR JSX, optional vanilla JavaScript behavior, demo route, registry entry, documentation, styling source, and focused verification. |
New Dutchy Component
Create the complete component integration while following current repository patterns.
Learn The Pattern
Before editing, read:
AGENTS.md.- One structurally similar component in
src/components/.
- One similar demo route in
src/routes/components/.
src/components/componentRegistry.ts.- A similar client handler in
public/assets/js/ when interactivity is required.
- A similar component document in
docs/01-design-system/components/.
Infer naming, props, category, and script requirements from those sources unless the user specified them.
Implement
Create only the files the component needs:
src/components/<ComponentName>/index.tsx for server-rendered JSX.public/assets/js/<component>.js when browser behavior is required.src/routes/components/<route-id>/index.tsx for meaningful states and variants.- An entry in
src/components/componentRegistry.ts with exact script dependencies.
docs/01-design-system/components/<route-id>.md and relevant component indexes.
Keep SSR JSX free of React hooks and JSX event handlers. Wire behavior through stable data-* or ID contracts and vanilla JavaScript. Match accessible names, keyboard behavior, ARIA state, and focus behavior to the interaction.
Reuse existing Dutchy components in demo routes when they represent the intended control or layout. Raw semantic elements remain appropriate when no component equivalent exists.
Put design tokens and custom component CSS in src/styles/dutchy.css. Never edit or commit public/assets/css/styles.css; it is generated by the build.
Verify
Confirm that registry IDs, route paths, script paths, and client selectors agree. Run:
bun run buildbun run lintbun run typecheckbun test ./tests
For visual or interactive components, inspect the demo route in the browser at desktop and mobile sizes and check the console for errors.
Report the files changed, behavior added, checks run, and any remaining limitations.
