메뉴
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.
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.
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 | ark-ui |
| description | 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. |
Before custom code, check if Ark UI already provides a primitive.
list_components with framework: "react".get_component_props — framework: "react", component name.get_example — framework: "react", component name, exampleId: "basic".styling_guide — component name (data attributes for SCSS).| Topic | Action |
|---|---|
| Props to expose | Subset only — own props layer (component-api); never extends ArkRootProps |
| Internal state | Ark owns it — no mirroring with useState |
| Callbacks | Wrap and forward to own props; do not replace Ark handlers |
| Styling | data-* attrs from styling guide → scss |
| Requirement | Details |
|---|---|
| Don't duplicate Ark internal state | Inputs, selects, comboboxes, etc. |
| Don't override Ark callbacks | Hook onInputValueChange-style APIs to forward |
// Bad
const [inputValue, setInputValue] = useState('');
<Combobox.Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
// Good
<Combobox.Root onInputValueChange={({ inputValue }) => onInputChange?.(inputValue)}>
<Combobox.Input />
</Combobox.Root>
*.types.ts: component-api