Menü
UX/동작 규칙 E1-E9 검증. 컴포넌트, CSS, App 레이아웃 변경 후 사용.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
세션 변경사항을 분석하여 검증 스킬 누락을 탐지합니다. 기존 스킬을 동적으로 탐색하고, 새 스킬을 생성하거나 기존 스킬을 업데이트한 뒤 CLAUDE.md를 관리합니다.
todoStore↔timerStore 간 연동 및 삭제 안전성 SYNC-1~6 검증.
프로젝트의 모든 verify 스킬을 순차 실행하여 통합 검증 보고서를 생성합니다. 기능 구현 후, PR 전, 코드 리뷰 시 사용.
서버 사이드 타이머 동기화 SYNC-T1~T5 검증. 브라우저 닫아도 타이머 상태 유지, 서버 시간 기준 경과시간 계산.
프론트↔백엔드 API 연동 API-1~7 검증. todoStore, 서버 라우트 변경 후 사용.
프런트엔드·백엔드 빌드 검증 BUILD-1~4. 소스 변경 후 타입 체크와 프로덕션 빌드가 에러 없이 통과하는지 확인.
| name | verify-ui-conventions |
| description | UX/동작 규칙 E1-E9 검증. 컴포넌트, CSS, App 레이아웃 변경 후 사용. |
UI/UX 규칙(E1-E8)이 올바르게 구현되었는지 검증합니다:
src/components/ 내 파일 추가/수정 후src/App.tsx 레이아웃 변경 후| File | Purpose |
|---|---|
src/App.tsx | 메인 레이아웃 (Timer + TodoList) |
src/App.css | 전체 스타일 + 반응형 미디어 쿼리 |
src/components/Timer.tsx | 타이머 UI + 활성 TODO 표시 |
src/components/TodoItem.tsx | 개별 TODO (🍅 카운트, 인라인 편집, ▶ 버튼) |
src/components/TodoList.tsx | TODO 목록 (미완료/완료 분리) |
파일: src/App.tsx
검사: Timer + TodoList가 하나의 페이지에 렌더링, 라우팅 없음
grep -n "Timer\|TodoList" src/App.tsx
grep -rc "react-router\|BrowserRouter\|Routes" src/ --include="*.tsx"
PASS: Timer + TodoList 존재 + react-router 0건 FAIL: 라우터 사용 또는 컴포넌트 누락
파일: src/components/
검사: 파일명 + export 함수명 PascalCase
ls src/components/*.tsx
grep -n "export default function" src/components/*.tsx
PASS: 모든 파일명이 대문자 시작 + export 함수도 PascalCase FAIL: camelCase 또는 kebab-case 파일명
수정 방법: 파일명을 PascalCase로 변경 (예: todo-item.tsx → TodoItem.tsx)
파일: src/App.css
검사: @media 쿼리 존재
grep -n "@media" src/App.css
PASS: @media 쿼리 최소 1개 존재 FAIL: 반응형 규칙 없음
수정 방법: @media (max-width: 480px) { ... } 추가
파일: src/components/TodoList.tsx
검사: completed 기준 분리 렌더링
grep -n "completed" src/components/TodoList.tsx
grep -n "filter" src/components/TodoList.tsx
PASS: !t.completed + t.completed 분리 필터링 존재
FAIL: 분리 없이 단일 리스트
파일: src/components/Timer.tsx
검사: activeTodoId에 해당하는 Todo 제목 표시
grep -n "activeTodo" src/components/Timer.tsx
grep -n "todoTitle\|activeTodoTitle" src/components/Timer.tsx src/App.tsx
PASS: 활성 TODO 제목 표시 로직 존재 FAIL: 바인딩된 TODO 표시 없음
파일: src/components/TodoItem.tsx
검사: 🍅 표시 + isEditing 상태 기반 편집 모드
grep -n "completedPomodoros\|🍅" src/components/TodoItem.tsx
grep -n "isEditing\|setIsEditing" src/components/TodoItem.tsx
PASS: 🍅 카운트 표시 + 인라인 편집 모드 존재 FAIL: 누락
파일: src/stores/timerStore.ts
검사: 서버 동기화로 브라우저 재접속 시 타이머 복원
grep -c "fetchTimerState\|TIMER_API\|syncToServer" src/stores/timerStore.ts
PASS: fetchTimerState + syncToServer 로직 존재 (서버 동기화) FAIL: 타이머 상태 복원 로직 없음
파일: src/components/TodoItem.tsx, src/stores/timerStore.ts
검사:
grep -n "handleItemClick\|handleCheckbox\|setActiveTodo" src/components/TodoItem.tsx
grep -n "setActiveTodo" src/stores/timerStore.ts
grep -n "alert\|window.confirm" src/components/TodoItem.tsx
PASS: li 클릭 → setActiveTodo(선택만) + 실행중 다른 TODO 전환 시 confirm 경고 + 체크박스 → 실행중 alert 경고 존재 + 타이머 자동 시작 없음 FAIL: 리스트 클릭 시 start() 호출 또는 실행중 전환/체크박스에 경고 없음
| Step | 검사 | 판정 | 비고 |
|------|------|------|------|
| 1 | 단일 페이지 | PASS/FAIL | 상세 |
| 2 | PascalCase | PASS/FAIL | 상세 |
| 3 | 반응형 CSS | PASS/FAIL | 상세 |
| 4 | 완료 분리 | PASS/FAIL | 상세 |
| 5 | 바인딩 표시 | PASS/FAIL | 상세 |
| 6 | 🍅 + 인라인편집 | PASS/FAIL | 상세 |
| 7 | 타이머 복원 | PASS/FAIL | 상세 |
| 8 | 클릭 동작 | PASS/FAIL | 상세 |