메뉴
화면 설계에서 route/API/구조 문서까지 연결하는 범용 스킬
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
외부 API, 스키마, 모델명, 컬럼명을 코드에 직접 박기 전에 계약과 런타임을 검증하는 스킬
Use when a route, schema, env var, worker path, or UI surface change can ripple across code, docs, and verification, and you need an explicit impact map before editing.
코드 변경 후 어떤 문서를 같이 고쳐야 하는지 change class 기준으로 좁혀주는 점검 스킬
Use before saying work is done, especially after code or document changes, to confirm executed verify commands, changed docs, assumptions, residual risks, and a clear release verdict.
Use when wiring page data fetch/mutation, loading timing, and stale/refresh behavior.
Use when hardening error boundaries, retry paths, and user-visible recovery messages.
| name | design-to-code |
| description | 화면 설계에서 route/API/구조 문서까지 연결하는 범용 스킬 |
| user_invocable | true |
| tags | ["design","ui","route-map","frontend","planning"] |
| trigger | 새 화면 설계, 리디자인, 프론트엔드 구조화가 필요할 때 |
| version | 1 |
| ID | Screen | User Flow | Priority |
|---|---|---|---|
| S-001 | Login | entry -> auth -> dashboard | P0 |
중요한 건 "코드 전에 화면을 보게 만드는 것"이다.
docs/ref/DESIGN-DECISIONS.md 또는 비슷한 문서에 기록:
| Screen ID | Front Route | API | Method | Notes |
|---|---|---|---|---|
| S-001 | /login | /api/auth/login | POST | email/password |
권장 위치:
docs/ref/ROUTE-MAP.md라우트맵 기준으로 파일 구조를 만든다.
색, spacing, radius, type scale은 하드코딩보다 tokens 파일에 둔다.
stub로 표시하고 route 중심으로 먼저 진행