القائمة
packages/design-system 아이콘 소스, 생성 산출물, public export, SVG 입력 정책을 검증할 때 사용합니다.
التثبيت باستخدام 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 여부를 분리해 기록할 때 사용합니다.
packages/design-system 공통 컴포넌트를 Figma/이미지/상태 요구사항 기반으로 생성, 구현, story/spec/export 검증할 때 사용합니다.
필드 검증, submit, mutation, error, disabled/loading/success 상태가 있는 프론트엔드 폼 흐름을 구현할 때 사용합니다.
프론트엔드 구현 또는 리뷰 중 Toss Frontend Fundamentals의 응집도 기준으로 함께 수정되는 component, hook, type, fixture, spec, form 흐름 배치를 점검할 때 사용합니다.
| name | verify-design-system-icons |
| description | packages/design-system 아이콘 소스, 생성 산출물, public export, SVG 입력 정책을 검증할 때 사용합니다. |
디자인시스템 아이콘 작업에서 반복된 누락을 막습니다.
ic-name.svg인지 확인합니다.먼저 변경 파일을 확인합니다.
git diff --name-only HEAD -- packages/design-system/src/icons packages/design-system/scripts packages/design-system/package.json package.json .github/workflows/ci.yml docs/architecture/design-system-icons.md docs/workflows/ci.md docs/workflows/local-development.md recipes/add-icon.md
git status --short -- packages/design-system/src/icons packages/design-system/scripts
아이콘 관련 파일이 없고 icon pipeline도 아직 없으면 SKIP으로 보고합니다.
docs/architecture/design-system-icons.md를 먼저 읽습니다.recipes/add-icon.md가 있으면 아이콘 추가 절차를 확인합니다.packages/design-system/package.json에서 icon 관련 script와 ./icons export를 확인합니다.packages/design-system/src/icons/index.ts와 생성 파일을 비교합니다.packages/design-system/scripts/*icon*.mjs가 있으면 naming, validation, generation 책임을 확인합니다.package.json과 .github/workflows/ci.yml에서 check:icons 연결을 확인합니다.test -d packages/design-system/src/icons || echo "SKIP: icons directory does not exist"
test -d packages/design-system/src/icons/svg || echo "SKIP: SVG source directory does not exist"
packages/design-system/src/icons/svg가 있으면 실행합니다.
find packages/design-system/src/icons/svg -name '*.svg' -print | awk '
/\/ic-[a-z0-9]+(-[a-z0-9]+)*\.svg$/ { next }
{ print "invalid icon filename: " $0; bad=1 }
END { exit bad }
'
PASS: 모든 SVG가 ic-name.svg 형식입니다.
rg -n "<script|<foreignObject|<iframe|<object|<embed|\\son[a-zA-Z]+\\s*=|javascript:|href=\"https?://|xlink:href=\"https?://" packages/design-system/src/icons/svg
PASS: 출력이 없습니다.
아이콘 검증 script가 있으면 먼저 비파괴 검사를 실행합니다.
pnpm check:icons
PASS: source SVG, generated/, index.ts, generated/icons.manifest.json이 동기화되어 있습니다.
신규 icon source를 의도적으로 추가했거나 drift를 수정하는 중이라면 generator를 실행한 뒤 다시 검사합니다.
pnpm --filter @dongchimi/design-system icons:generate
pnpm check:icons
icons:generate는 파일을 수정할 수 있으므로 첫 번째 drift 탐지 명령으로 사용하지 않습니다.
icon script 또는 sync 로직을 바꿨다면 실행합니다.
pnpm --filter @dongchimi/design-system test:unit
아이콘 pipeline이 있으면 design-system build도 실행합니다.
pnpm --filter @dongchimi/design-system build
packages/design-system/package.json에 ./icons export가 있는지 확인합니다.packages/design-system/src/icons/index.ts에서 export되는지 확인합니다.currentColor로 생성되는지 확인합니다.| File or Pattern | Purpose |
|---|---|
packages/design-system/src/icons/svg/** | source SVG 입력 |
packages/design-system/src/icons/generated/** | generated React icon component |
packages/design-system/src/icons/index.ts | public icon export |
packages/design-system/scripts/*icon*.mjs | import/generate/check utility |
packages/design-system/package.json | workspace icon scripts and subpath export |
package.json | root check:icons script |
.github/workflows/ci.yml | CI icon sync enforcement |
docs/architecture/design-system-icons.md | icon architecture policy |
docs/workflows/ci.md | CI command policy |
docs/workflows/local-development.md | local verification command policy |
recipes/add-icon.md | icon addition procedure |
SKIP입니다.src/icons/svg와 generation script가 없는 develop baseline은 실패가 아니라 SKIP입니다.packages/design-system 검증 대상이 아닙니다.