​
/verify + /run — Confirm feature works

Skill mới trong bộ claudekit — Type-check pass ≠ feature works. /verify chạy tests, /run thực sự launch app + quan sát UI. Together: đảm bảo code không chỉ correct mà còn usable.

​
Tổng quan

Hai skill bổ sung cho nhau:
  • /verify — “Code có chạy không?”
    • Type-check pass
    • Unit tests pass
    • Linting clean
    • Build succeed
    • ✅ Proof: code valid & logic correct
  • /run — “Feature có dùng được không?”
    • Launch dev server
    • Manually drive UI / API
    • Observe real behavior
    • ✅ Proof: feature usable end-to-end
Khi dùng:
  • Sau refactor → /verify (lên máy từng bộ phận)
  • Sau UI change → /run (thấy UI trên browser)
  • Sau API endpoint change → /verify + /run (test API, test từ frontend)
  • Trước ship → cả hai (proof + confidence)

​
Prefix & flags

​
Workflow

1

Bước 1: Type-check

/verify bắt đầu:
  • TypeScript compile check
  • ESLint pass
  • Import/export validation
  • ❌ Nếu fail → fix type errors
2

Bước 2: Unit tests

Tiếp tục:
  • Jest / Vitest run
  • Test coverage check
  • ❌ Nếu fail → fix logic
3

Bước 3: Build

Verify production build:
  • Build optimizer pass
  • No unused code warnings
  • ✅ If pass → code valid
4

Bước 4: Launch app

  • Start dev server (hot reload)
  • Browser open tự động
  • Console ready for debugging
5

Bước 5: Manual test

Drive UI:
  • Click buttons, fill forms
  • Check network requests
  • Observe console (no errors)
  • Test happy path + edge cases
✅ Nếu all works → feature ready

​
Ví dụ thực tế

​
Case 1: Sau UI change

Workflow:
  1. Edit PageHeader.tsx: change button color, position
  2. /verify → “Types OK, button test pass”
  3. /run → Open browser, click button, confirm visually
  4. Close dev server, ship PR

​
Case 2: Sau API endpoint refactor

Workflow:
  1. Refactor /api/sites/:id/pages endpoint
  2. /verify --coverage → “All tests pass, 85% coverage”
  3. /run → Open app, create page via UI, check network tab for correct request/response
  4. Try edge case (invalid input), confirm error handling
  5. Ship PR

​
Case 3: Complex form, many edge cases

Workflow:
  1. Just need to see form in browser
  2. /run → Dev server live
  3. Fill form: valid → submit ✅
  4. Try invalid: empty field → error message ✅
  5. Try cancel → modal closes ✅
  6. Reload page → form state persisted? (if required)
  7. All good → ship

​
So sánh với skill khác

Tóm tắt:
  • /verify = dev validation, local only
  • /run = dev interactive test, local only
  • /qa-full:verify-issue = QA sign-off, staging, formal

​
Common pitfalls

Sai lầm phổ biến:
  • Skip /verify vì “types compile”: TypeScript compiler ≠ linter + tests. Full verify catch more
  • Skip /run vì “tests pass”: Test pass ≠ UI works. Refactor could break layout / visual
  • Use /run nhưng không test manually: /run launch app, nhưng dev phải drive UI manually. Không auto-test
  • Chạy /verify trên dirty worktree: Staged vs unstaged files → verify result unreliable. Commit trước
  • Verify port conflict: /run default port 3000 taken → use --port 3001
  • Forget to close dev server: /run keep listening → take resource. Kill process sau testing

​
FAQ

A: Tùy tình huống:
  • Pure backend (API endpoint) → /verify enough
  • Pure frontend (UI / component) → /run enough
  • Full feature (API + UI) → cả hai tốt nhất
Tip: Chạy /verify trước (faster), rồi /run nếu cần visual confirmation
A: Không. Dừng tại /verify:
  1. Fix type errors / test failures
  2. /verify lại đến khi pass
  3. Rồi mới /run
/run là bước sau /verify pass
A: /run check:
  • Port available? → start new server
  • Port taken? → error, ask kill existing hoặc use --port
Best practice: pkill node trước /run
A: Có, dùng flag:
Sẽ chạy e2e tests thay vì interactive. (Tương tự /verify)
A: Output ở:
  • Console: summary
  • File: coverage/ folder (HTML report)
  • CI: Uploaded to coverage dashboard nếu CI configured
Check coverage/index.html để xem detail

​
Xem thêm