菜单
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.
用 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.
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 | react-patterns |
| description | 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. |
Applies to packages/design-system/**/*.tsx (components, stories, browser tests, icons).
| Requirement | Details |
|---|---|
No unnecessary useMemo/useCallback | React Compiler handles most cases |
| Justify memoization | Only when profiling shows real benefit |
ds-table/ exception | Excluded from React Compiler (TanStack Table/Virtual) — allow to memoize |
// Bad
const filteredItems = useMemo(() => items.filter((i) => i.active), [items]);
const handleClick = useCallback(() => onChange(value), [onChange, value]);
// Good
const filteredItems = items.filter((i) => i.active);
const handleClick = () => onChange(value);
| Requirement | Details |
|---|---|
| Derived state over redundant state | Don't sync with useEffect |
No prop-to-state sync via useEffect | Use derived values or key remounting |
| Controlled vs uncontrolled | Single API delegating to external or internal state |
// Bad
const [local, setLocal] = useState(prop);
useEffect(() => setLocal(prop), [prop]);
// Good — use the shared hook in components
const [value, setValue] = useControlled(valueProp, onValueChange, defaultValue);
useControlled lives in packages/design-system/src/utils/use-controlled.ts. Controlled wrappers in tests/stories: see browser-tests and storybook — inline useState is fine there.
| Requirement | Details |
|---|---|
useLayoutEffect only for DOM reads | Or ref updates other hooks read before paint |
useId for SVG IDs | clipPath, gradient, filter |
| Extract complex hook logic | Small named pure functions |
{ passive: true } for scroll listeners | scroll, wheel, touchmove |
| Requirement | Details |
|---|---|
No forwardRef | Pass ref as a regular prop |
const DsButton = ({ ref, ...props }: DsButtonProps) => <button ref={ref} {...props} />;
| Requirement | Details |
|---|---|
| Don't spread native objects | {...file} loses File prototype |
| Event propagation | Stop propagation in nested clickable content |
| Validate, don't silently fallback | Reject bad input values |
Set displayName on every new public Ds* export (DsX.displayName = 'DsX'; compound members: DsX.Sub.displayName = 'DsX.Sub').