메뉴
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".
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.
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 | code-review |
| description | 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". |
| Requirement | Details |
|---|---|
| No force-push after review | GitHub loses review history; use merge commits instead |
| Changelog required | Run pnpm changelog before merge |
| Conventional commits | PR title must follow conventional commit format |
| Separate concerns | Unrelated changes go in separate PRs; easier revert and isolation |
| Changeset messages are user-facing | Write "Add X to Y" or "Fix X in Y", not implementation details |
skip changelog label | Use only for non-user-facing changes (CI, tests, docs); never for bug fixes |
Use --frozen-lockfile | Run pnpm install --frozen-lockfile to avoid unnecessary lockfile changes |
| Deprecation rules | Add to @drivenets/eslint-plugin-design-system when deprecating |
<!-- Good changeset message -->
Add DsCard component
<!-- Bad changeset message - implementation details -->
Refactor card to use CSS modules and fix hover state selector specificity
git diff origin/main| Changed paths | Skills |
|---|---|
ds-*.types.ts | component-api, ts-standards |
ds-*.tsx (not stories/tests) | react-patterns; ark-ui if Ark |
*.stories.tsx | storybook, react-patterns |
*.browser.test.tsx | browser-tests |
*.module.scss | scss |
/**
* REVIEW-[SEVERITY]: [ISSUE DESCRIPTION]
*/
Before submitting a PR:
pnpm changelog) with user-facing message*.browser.test.tsx where interactions matter!important.types.ts with variant arraysuseMemo/useCallback (except under ds-table/ — excluded from React Compiler; see react-patterns)overflow: hidden as a band-aid for layout bugs<img> — use DS components (e.g., DsAvatar) with fallback-webkit-* without cross-browser fallback or @supports guard