Menu
화면 설계에서 route/API/구조 문서까지 연결하는 범용 스킬
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| 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 중심으로 먼저 진행외부 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.