메뉴
TypeScript conventions across the monorepo. Use when editing .ts or .tsx in any package, prop JSDoc in *.types.ts, as const variant arrays, Object.freeze config exports, or shared utils.
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 | ts-standards |
| description | TypeScript conventions across the monorepo. Use when editing .ts or .tsx in any package, prop JSDoc in *.types.ts, as const variant arrays, Object.freeze config exports, or shared utils. |
Applies to packages/**/*.ts and packages/**/*.tsx (design-system, eslint-plugin, vite-plugin, commitlint, etc.).
| Requirement | Details |
|---|---|
| No redundant JSDoc | Don't restate name or type; skip @interface / @type |
| Prop JSDoc on ds-* APIs | component-api — @default in *.types.ts when helpful |
| Full type references | Import named types |
Export from .types.ts | Dedicated type files for components |
| Export variant arrays | as const for Storybook argTypes.options — see component-api |
Object.freeze config exports | Prevent mutation on mapping objects |
export const loaderVariants = ['spinner', 'pulsing'] as const;
export type LoaderVariant = (typeof loaderVariants)[number];
export const circleSizeMap: Record<AvatarSize, number> = Object.freeze({
small: 24,
medium: 32,
large: 48,
});
| Requirement | Details |
|---|---|
| Let code breathe | Whitespace between logical chunks |
| Name magic numbers | Descriptive constants |
| Early returns | Simplify conditionals |
| No cross-component imports | Extract shared logic to utils |