메뉴
packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
endpoint 문서를 기준으로 API helper, TanStack Query hook, 타입, 에러/cache 동작을 구현할 때 사용합니다.
apps/client, apps/market-owner, apps/design-system-web, 선택적 apps/admin 내부의 앱 전용 shared 컴포넌트를 생성, 스펙 작성, export, 검증할 때 사용합니다.
GitHub 브라우저 PR 리뷰에서 visible diff, review comment, check status, local verification 여부를 분리해 기록할 때 사용합니다.
필드 검증, submit, mutation, error, disabled/loading/success 상태가 있는 프론트엔드 폼 흐름을 구현할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 응집도 기준으로 함께 수정되는 component, hook, type, fixture, spec, form 흐름 배치를 점검할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 결합도 기준으로 hook 책임, props drilling, shared/design-system 승격, context, 중복 제거를 점검할 때 사용합니다.
| name | design-system-component-workflow |
| description | packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다. |
packages/design-system에 제품 비의존 공통 UI 컴포넌트를 추가하거나 변경할 때 사용합니다.
동치미에서 packages/design-system이 아직 생성되지 않았다면 이 skill은 구현 대신 Jira/spec에서 컴포넌트 책임, public API, 상태, Storybook 필요성을 확정하는 데 사용합니다.
ui 또는 layoutrecipes/add-design-system-component.mddocs/code-quality/frontend-fundamentals.mddocs/code-quality/frontend-readability.md, docs/code-quality/frontend-predictability.md, docs/code-quality/frontend-cohesion.md, docs/code-quality/frontend-coupling.mddocs/code-quality/frontend-logic-composition.mddocs/architecture/design-system.mddocs/architecture/design-system-components.mddocs/architecture/design-system-component-plan.mddocs/workflows/spec-writing.mdgen:ds-component scaffold를 사용합니다.ComponentName.spec.md를 먼저 채워 behavior, props, states, accessibility, styling constraints를 정리합니다.frontend-fundamentals-review를 추가로 적용했습니다.packages/design-system으로 승격하지 않습니다.