Menú
packages/design-system 아이콘 소스, 생성 산출물, public export, SVG 입력 정책을 검증할 때 사용합니다.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| 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 검증 대상이 아닙니다.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 흐름 배치를 점검할 때 사용합니다.