メニュー
Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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