Menu
화면 설계에서 route/API/구조 문서까지 연결하는 범용 스킬
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
외부 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 중심으로 먼저 진행