菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component.
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".
| name | component-api |
| description | 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. |
Conventions for packages/design-system/src/components/**/ds-*.types.ts.
| Requirement | Details |
|---|---|
| Own props layer | Don't expose all underlying library props |
| Generic ref types | Ref<HTMLElement> when it makes sense |
| Standard props | Always support className, style, ref |
| slotProps pattern | MUI-style sub-component customization |
| Callback naming | Prefer onXChange |
null for empty callback values | (value: string | null) => void — not undefined for cleared values |
| Single deprecation comment | In types file only |
| Value props first, callbacks last | Config → slot/render → callbacks |
locale prop | When component has hardcoded user-facing text |
| Domain-agnostic naming | No product-specific terms in names or props |
| No use-case-specific props | No layout="form" — keep API composable |
as const + derived union type (Storybook argTypes.options).Ds{Name}Props interface in dedicated .types.ts.ref, className, and style. Don't restate the prop name or TypeScript type. See ts-standards for @default and export style.extends Ark/library root props → ark-ui.// Good
interface DsSelectProps {
value?: string | null;
onValueChange?: (value: string | null) => void;
ref?: Ref<HTMLElement>;
className?: string;
}
// Bad — undefined for empty value
interface DsSelectProps {
value?: string;
onValueChange?: (value: string | undefined) => void;
}
// Bad — exposes library internals
interface DsToggleProps extends SwitchRootProps {}