Menu
Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
React patterns for design-system TSX including ds-* components, subcomponents, *.stories.tsx, and __tests__/*.browser.test.tsx. Use when editing hooks, useState, useEffect, ref prop, memoization, controlled state, or event handlers in @drivenets/design-system.
Write and update Storybook stories for design-system components. Use when editing `*.stories.tsx`, adding story variants, decorators, or removing Storybook play functions.
Check Ark UI primitives via MCP and integrate them in ds-* components without duplicating internal state. Use before building a custom component, wrapping Ark primitives, or when the user mentions Ark UI MCP.
Write and extend Vitest browser tests for design-system components. Use when adding or editing `*.browser.test.tsx`, writing behavioral coverage, or moving assertions out of Storybook.
Apply when preparing a PR, reviewing code changes, running git diff, or generating a changeset. Use when user says "review", "PR prep", "code review", or "changeset".
Design public props for ds-* components in *.types.ts files. Use when editing ds-*.types.ts, Ds*Props interfaces, variant as const arrays, locale prop, onXChange callbacks, or changing component public API.
| name | component-scaffold |
| description | Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component. |
Orchestrator only — read linked skills fully before each step.
Component name → kebab-case files, PascalCase identifiers.
ds-{name} · Component: Ds{Name}packages/design-system/src/components/ds-{name}/ds-{name}/
├── index.ts
├── ds-{name}.types.ts
├── ds-{name}.tsx
├── ds-{name}.module.scss
├── ds-{name}.stories.tsx
└── __tests__/ds-{name}.browser.test.tsx # when behavior matters
Copy structure from ds-button or ds-checkbox when unsure.
| Step | Action | Read fully |
|---|---|---|
| 1 | Ark vs custom | ark-ui |
| 2 | Create empty files per manifest | — |
| 3 | ds-{name}.types.ts | component-api, ts-standards |
| 4 | ds-{name}.tsx | react-patterns; ark-ui if primitive |
| 4b | displayName on export | Ds{Name}.displayName = 'Ds{Name}' (each compound member: Ds{Name}.Sub.displayName = 'Ds{Name}.Sub') |
| 5 | ds-{name}.module.scss | scss |
| 6 | ds-{name}.stories.tsx | storybook — import from ./index when barrel/HOC exists; meta.component = public export |
| 7 | __tests__/*.browser.test.tsx | browser-tests — skip if presentational only |
| 8 | Barrel | index.ts exports; add export * from './components/ds-{name}' to packages/design-system/src/index.ts (alphabetical) |
| 9 | Validate | AGENTS.md#code-quality-checkers on touched paths |
index.tsWhen the public export is a plain re-export:
export { default as Ds{Name} } from './ds-{name}';
export type { Ds{Name}Props } from './ds-{name}.types';
When wrapped with withResponsiveProps (or similar HOC):
import { withResponsiveProps } from '../../utils/responsive';
import Ds{Name}Base from './ds-{name}';
export const Ds{Name} = withResponsiveProps(Ds{Name}Base, ['size']);
Ds{Name}.displayName = 'Ds{Name}';
export type { Ds{Name}Props } from './ds-{name}.types';
Set displayName on the component in ds-{name}.tsx (or index.ts if wrapped). Stories must import from ./index when a barrel/HOC is the public API.
Use .ts extension on barrel file, not .tsx.
pnpm eslint packages/design-system/src/components/ds-{name}/
pnpm --filter @drivenets/design-system typecheck
With browser tests:
pnpm --filter @drivenets/design-system test packages/design-system/src/components/ds-{name}/__tests__/ds-{name}.browser.test.tsx --run