Menu
packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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으로 승격하지 않습니다.