ai-developer-skill-os 7.0.2 → 7.5.0

package/.agents/skills/qk-fe-api-integration/SKILL.md

@@ -0,0 +1,326 @@
+---
+name: qk-fe-api-integration
+category: frontend
+version: 7.5.0
+description: "Consume API Backend, quản lý State, bind vào UI — tuân thủ kiến trúc Base dự án"
+platforms: [antigravity, claude-code, cursor, windsurf, kilo-code]
+execution_mode: deterministic
+
+cost: medium
+latency: medium
+risk: low
+side_effects: edit_files
+produces: [code]
+consumes: [json-payload, context-graph]
+
+token_budget:
+  max_files_read: 3
+  max_lines_per_read: 100
+  max_shell_commands: 1
+  stop_early: true
+
+exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
+skill_version: 7.5.0
+runtime_version: 1
+schema_version: 2
+---
+
+# qk-fe-api-integration — Frontend API Consumer
+
+> **Language rule:** Code, identifiers, file names → English. Explanations, summaries → Vietnamese.
+
+---
+
+## Preconditions
+- [ ] Backend JSON payload hoặc API endpoint schema được cung cấp
+- [ ] Project's API client pattern được xác định (Axios wrapper, RTK Query, React Query, etc.)
+
+```
+On missing precondition:
+  EXIT: BLOCKED
+  Message: "Cần cung cấp: JSON response mẫu VÀ xác nhận API client pattern hiện tại của dự án."
+```
+
+---
+
+## Scope
+- ✅ Identify existing API client pattern (NEVER default to raw fetch if wrapper exists)
+- ✅ Generate strict TypeScript interfaces from JSON payload
+- ✅ Implement service layer (API calls separated from UI)
+- ✅ Handle all 3 UI states: Loading, Success, Error
+- ✅ Map backend payload → DTO before injecting into UI components
+
+## Non-Goals
+- ❌ Hardcode API Base URLs in UI components — use env vars or centralized config
+- ❌ Inject API logic inside presentational (dumb) components
+- ❌ Introduce new state management libraries without explicit user approval
+- ❌ Hallucinate data fields not in provided JSON payload
+- ❌ Create Node.js/Python scripts to patch — edit files directly
+- ❌ Read entire files > 100 lines — use targeted reads
+- ❌ Default to raw fetch if wrapper exists — ALWAYS reuse existing client
+
+---
+
+## Priority Order
+
+| Priority | Task | Skip Threshold |
+|----------|------|----------------|
+| P1 | Identify existing API client (grep package.json, src/api/) | Never |
+| P2 | Generate TypeScript interfaces from JSON payload | Never |
+| P3 | Implement service layer (API calls) | Never |
+| P4 | Bind to UI with Loading + Success + Error states | Budget < 30% |
+| P5 | Cache invalidation after mutations (POST/PUT/DELETE) | Budget < 60% |
+| P6 | DTO mapping (backend payload → clean UI data) | Budget < 70% |
+
+---
+
+## Workflow
+
+### Phase 1 — Identify Base Architecture
+
+**Steps:**
+1. `grep_search` in `package.json` → identify: axios, react-query, rtk-query, swr, or custom
+2. `view_file[src/api/]` (first 30 lines) → confirm wrapper pattern
+3. Identify: base URL config, auth header injection, error interceptor location
+
+**Decision:**
+```
+IF wrapper/client found (e.g., apiClient.ts, axiosInstance.ts)
+  → Use it. NEVER bypass with raw fetch/axios.
+  → Confidence: HIGH → go to Phase 2
+
+ELSE IF no wrapper found
+  → Confirm with user: "Dùng raw fetch hay tạo wrapper mới?"
+  → Confidence: MEDIUM → go to Phase 2
+
+ELSE IF conflicting patterns found (mix of fetch + axios + rtk)
+  → EXIT: BLOCKED — ask which pattern to follow
+```
+
+**Exit When:**
+- API client pattern identified → go to Phase 2
+- `max_files_read` reached → go to Phase 2 with MEDIUM confidence
+
+---
+
+### Phase 2 — Generate Types
+
+**Steps:**
+1. Parse provided JSON payload → extract all fields with types
+2. Generate TypeScript interface (Request + Response)
+3. Flag any field that could be `null` or optional
+
+**Decision:**
+```
+IF all fields clearly typed from JSON
+  → Confidence: HIGH → go to Phase 3
+
+ELSE IF some fields ambiguous (null | undefined)
+  → Mark as optional (?:) + add comment "// verify with backend"
+  → Confidence: MEDIUM → go to Phase 3
+
+ELSE IF nested objects contain mixed null/non-null patterns
+  → EXIT: BLOCKED — cannot safely generate types without backend clarification
+```
+
+---
+
+### Phase 3 — Implement Service + UI Binding
+
+**Steps:**
+1. Create/update service file (API calls only — no UI logic)
+2. Bind to component: implement Loading state (skeleton/spinner)
+3. Bind Success state: render data using generated types
+4. Bind Error state: handle HTTP errors per table below
+
+**HTTP Error Handling (mandatory for ALL integrations):**
+```
+401 Unauthorized → redirect to login or show auth error toast
+403 Forbidden    → show permission error toast
+404 Not Found    → show empty state component (not a crash)
+422 Validation   → map field errors to form fields
+500 Server Error → show generic error toast + retry button
+Network Error    → show offline banner or retry prompt
+```
+
+**Decision:**
+```
+IF all 3 states (Loading, Success, Error) implemented + service created → go to Phase 4
+ELSE IF error state incomplete → EXIT: PARTIAL — missing HTTP error handling
+ELSE → EXIT: BLOCKED — cannot complete binding
+```
+
+**Exit When:**
+- All 3 states implemented + service created → go to Phase 4
+
+---
+
+### Phase 4 — Self-Audit
+
+**Steps:**
+1. Re-read service file: confirm no hardcoded URLs, no UI logic
+2. Re-read component: confirm no API calls inside JSX
+3. Verify cache invalidation if mutation (POST/PUT/DELETE)
+
+**Decision:**
+```
+IF all audit points pass → EXIT: SUCCESS
+ELSE IF 1–2 minor issues → fix inline → EXIT: SUCCESS
+ELSE IF architectural violation found → fix → EXIT: PARTIAL
+ELSE IF hardcoded URL (http://localhost, 127.0.0.1) found → EXIT: FAILED — do not ship
+```
+
+---
+
+## Confidence Model
+
+| Level | Condition | Action |
+|-------|-----------|--------|
+| HIGH | API client found, JSON payload complete, all types inferred | Implement directly |
+| MEDIUM | Some fields ambiguous, wrapper partially identified | Note assumptions, proceed |
+| LOW | No JSON payload provided OR conflicting API patterns OR nested nulls unresolved | EXIT: BLOCKED |
+
+---
+
+## Severity
+
+| Level | Definition | Example |
+|-------|-----------|---------|
+| CRITICAL | Security data leakage from improper DTO mapping | Auth token in dumb component |
+| HIGH | Missing error state causes white screen of death | No 500 handler |
+| MEDIUM | Hardcoded URL breaks in production | `axios.get("http://localhost:3000/api")` |
+| LOW | Missing cache invalidation after mutation | Stale data after POST |
+
+---
+
+## Evidence Format
+
+```
+[SEVERITY] path/to/component.tsx:LINE
+Issue:      [specific violation]
+Confidence: [HIGH|MEDIUM|LOW]
+Fix:        [one-line suggestion]
+```
+
+**Example:**
+```
+[HIGH] src/pages/Dashboard.tsx:45
+Issue:      API call `axios.get('/api/data')` inside JSX render — violates smart/dumb separation
+Confidence: HIGH
+Fix:        Move to `src/services/dashboard.service.ts`, inject via hook
+```
+
+---
+
+## Retry Policy
+
+```
+API call fails (runtime verification)
+  └─ Check error type
+       ├─ Network error → show retry button (user-triggered retry, not auto)
+       ├─ 401/403 → do NOT retry — redirect or show permission error
+       ├─ 500 → auto-retry once after 1s delay
+       │        └─ Still fails → show error toast with "Try again" button
+       └─ Never auto-retry more than 1 time (avoid hammering server)
+
+Skill execution fails
+  └─ Check failure type
+       ├─ Syntax error in generated code → fix and retry once
+       └─ Architectural mismatch → EXIT: FAILED, do NOT retry
+```
+
+---
+
+## Escalation Rules
+
+```
+BLOCKED: Cannot determine API client pattern
+Missing:
+  - package.json contents OR
+  - Location of existing API client file (e.g., src/lib/api.ts)
+Questions:
+  1. Dự án dùng thư viện nào để gọi API? (axios / fetch / react-query / rtk-query)
+  2. Có file API wrapper/client nào sẵn không? (ví dụ: src/api/client.ts)
+Recommended Assumptions (if proceeding):
+  - Create new Axios instance with interceptors for auth + error handling
+```
+
+---
+
+## Handoff Contract
+
+### Consumes
+```json
+{
+  "from": "user or qk-context-loader",
+  "required_fields": ["json_payload_sample", "api_endpoint"],
+  "optional_fields": ["existing_api_client_path", "component_to_bind"]
+}
+```
+
+### Produces
+```json
+{
+  "to": "user",
+  "output_fields": ["types_file", "service_file", "component_file", "states_implemented", "exit_code"]
+}
+```
+
+---
+
+## Output Format
+
+```
+🔌 FE API Integration
+─────────────────────────────────────────────────
+API Client:  [identified — axiosInstance.ts | created new]
+Types:       [src/types/[resource].types.ts]
+Service:     [src/services/[resource].service.ts]
+
+States implemented:
+  ✅ Loading (skeleton/spinner)
+  ✅ Success (data rendered)
+  ✅ Error (toast/empty state per HTTP code)
+  ⚠️ [any state skipped — reason]
+
+Assumptions:
+  - [any assumption made]
+
+Exit Code:   [SUCCESS | PARTIAL | BLOCKED | FAILED]
+```
+
+---
+
+## Exit Codes
+
+| Code | Meaning | When |
+|------|---------|------|
+| SUCCESS | Types + service + UI binding complete with all 3 states | Full integration |
+| PARTIAL | Integration done, missing error/loading state or cache invalidation | Follow-up needed |
+| BLOCKED | No JSON payload or conflicting API patterns | Ask user |
+| FAILED | Cannot integrate without breaking existing architecture | Escalate |
+
+---
+
+Consume backend API safely in frontend: identify existing client, generate types, implement service layer, and bind to UI with proper states.
+Triggered when user needs to integrate a backend API endpoint into a frontend application. Requires JSON payload sample and knowledge of existing API client patterns.
+- JSON payload sample (request/response)
+- API endpoint specification
+- Existing API client path (if any)
+- Component to bind (if specified)
+- Context graph (for existing patterns)
+1. **Identify:** Find existing API client or confirm need for new one
+2. **Generate:** Create TypeScript interfaces from JSON payload
+3. **Implement:** Build service layer with proper HTTP methods
+4. **Bind:** Connect to UI with Loading/Success/Error states
+5. **Audit:** Verify no hardcoded URLs, no API in JSX, proper error handling
+- NEVER bypass existing wrapper with raw fetch/axios
+- MUST generate strict TypeScript interfaces (no `any`)
+- MUST handle all 3 UI states: Loading, Success, Error
+- MUST NOT exceed token_budget (max 3 files, 100 lines each, 1 shell command)
+- MUST stop early if confidence threshold reached
+- Zero-Trust: Use existing client pattern, never invent new one without approval
+- Type Safety: All API responses must have explicit TypeScript types
+- Error Handling: All HTTP errors must be handled per mandatory table
+- Separation: Service layer only — no API calls in presentational components
+---

package/.agents/skills/qk-feature-delivery/SKILL.md

@@ -0,0 +1,305 @@
+---
+name: qk-feature-delivery
+category: fullstack
+version: 7.5.0
+description: "Phát triển tính năng mới end-to-end: Requirements → Context → Design → Implement → Self-audit."
+platforms: [antigravity, claude-code, cursor, windsurf, kilo-code]
+execution_mode: deterministic
+
+cost: high
+latency: slow
+risk: medium
+side_effects: edit_files
+produces: [code, report]
+consumes: [context-graph, design-md, user-description]
+
+token_budget:
+  max_files_read: 5
+  max_lines_per_read: 150
+  max_shell_commands: 2
+  stop_early: false
+
+exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
+skill_version: 7.5.0
+runtime_version: 1
+schema_version: 2
+---
+
+# qk-feature-delivery — End-to-End Feature Builder
+
+> **Language rule:** Code, identifiers, file names → English. Explanations, summaries → Vietnamese.
+
+---
+
+## Preconditions
+- [ ] Feature requirement is specific enough to implement (not just "add something")
+- [ ] `DESIGN.md` exists with required tokens if UI work is involved (colors, spacing, typography)
+- [ ] Context graph available OR `qk-context-loader` run first (for logic work)
+
+```
+On missing precondition:
+  EXIT: BLOCKED
+  Message: "[Precondition] missing. See Escalation Rules."
+```
+
+---
+
+## Scope
+- ✅ Deliver a complete, verifiable feature end-to-end (FE + BE + API)
+- ✅ Adhere to project architecture from context graph
+- ✅ Adhere to DESIGN.md for any UI components
+- ✅ Self-audit before marking done
+
+## Non-Goals
+- ❌ Mix refactoring into feature work
+- ❌ Add dependencies without asking user first
+- ❌ Emit generic AI-slop UI or unverified logic
+- ❌ Ignore backward compatibility on existing APIs
+- ❌ Proceed with ambiguous requirements without user confirmation
+- ❌ Break existing API contracts — version or deprecate instead
+
+---
+
+## Priority Order
+
+| Priority | Task | Skip Threshold |
+|----------|------|----------------|
+| P1 | Core feature logic (happy path) | Never |
+| P2 | Error/loading/empty UI states | Budget < 30% |
+| P3 | Edge cases and validation | Budget < 50% |
+| P4 | Regression prevention (existing tests) | Budget < 60% |
+| P5 | Backend contract validation (API schema, DB migrations) | Budget < 60% |
+| P6 | Documentation + comments | Budget < 70% |
+
+---
+
+## Workflow
+
+### Phase 1 — Requirements Clarification
+
+**Steps:**
+1. Parse user request → extract: what, where, acceptance criteria
+2. Check ambiguity: Can I implement this without assumptions?
+
+**Decision:**
+```
+IF requirements are specific (what + where + expected behavior)
+  → Confidence: HIGH → go to Phase 2
+
+ELSE IF 1–2 ambiguous points
+  → ASK USER clarifying questions
+  → Confidence: MEDIUM → WAIT for user response
+  → Do NOT proceed to Phase 2 until clarified
+
+ELSE IF core requirement unclear
+  → EXIT: BLOCKED — ask clarifying questions
+```
+
+**Exit When:**
+- Requirements understood → go to Phase 2
+
+---
+
+### Phase 2 — Context Loading
+
+**Steps:**
+1. If logic work: read context graph from `qk-context-loader` output
+2. Identify: entry point, affected modules, existing patterns to reuse
+3. If UI work: read `DESIGN.md` → extract tokens for this component
+4. Document rollback plan — which files to revert if feature fails
+
+**Decision:**
+```
+IF context graph available
+  → Use it, proceed to Phase 3
+
+ELSE IF no context graph but simple task
+  → Simple task = modifies ≤ 1 file, no new dependencies, no new API contracts
+  → grep_search for entry point → minimal manual map
+  → Confidence: MEDIUM → proceed to Phase 3
+
+ELSE IF complex task without context graph
+  → EXIT: BLOCKED — run qk-context-loader first
+```
+
+---
+
+### Phase 3 — Implementation
+
+**Steps (in order):**
+1. Create/modify files using `replace_file_content` / `multi_replace_file_content`
+2. Follow existing code patterns (from context graph)
+3. For UI: use DESIGN.md tokens only — no hardcoded colors/sizes
+4. Implement backend error handling: try/catch, transaction rollback, input validation
+5. Handle all 3 UI states: Loading + Success + Error
+
+**Exit When:**
+- Happy path implemented → go to Phase 4
+- Blocked by missing dependency → EXIT: BLOCKED, ask user
+
+---
+
+### Phase 4 — Self-Audit
+
+**Steps:**
+1. Re-read the code written (targeted view, ≤ 150 lines)
+2. Check against: backward compat, DESIGN.md compliance, error states
+3. Verify test coverage meets project threshold (default: ≥ 80%)
+
+**Decision:**
+```
+IF all checks pass
+  → EXIT: SUCCESS
+
+ELSE IF minor issues found (missing error state, style token)
+  → Fix immediately, EXIT: SUCCESS
+
+ELSE IF significant issue (breaks existing API, wrong architecture)
+  → Fix, note change in output, EXIT: FAILED — do not ship breaking changes as PARTIAL
+
+ELSE IF missing backend error handling
+  → Fix immediately, EXIT: SUCCESS
+```
+
+---
+
+## Confidence Model
+
+| Level | Condition | Action |
+|-------|-----------|--------|
+| HIGH | Context graph available, DESIGN.md read, requirements clear | Implement directly |
+| MEDIUM | Some assumptions made (≤ 2) | Note assumptions in output |
+| LOW | Unclear requirements or missing context OR assumptions > 2 | EXIT: BLOCKED |
+
+---
+
+## Severity (for self-audit findings)
+
+| Level | Definition |
+|-------|-----------|
+| CRITICAL | Feature breaks existing functionality |
+| HIGH | Missing required states (error/loading) or missing backend error handling |
+| MEDIUM | Not following DESIGN.md or project patterns |
+| LOW | Missing comments or minor style issue |
+
+---
+
+## Evidence Format (Self-Audit)
+
+```
+[SEVERITY] path/to/file.ts:LINE
+Issue:      [what was found]
+Confidence: HIGH
+Fix:        [applied immediately OR noted for follow-up]
+```
+
+---
+
+## Escalation Rules
+
+```
+BLOCKED: [specific reason]
+Missing:
+  - [What's needed — context graph / DESIGN.md / clear requirements]
+Questions:
+  1. [Specific clarifying question]
+  2. [Second question if needed]
+Recommended Assumptions (if proceeding):
+  - [Safe assumption 1]
+  - [Safe assumption 2 — note these will be in output]
+```
+
+---
+
+## Handoff Contract
+
+### Consumes
+```json
+{
+  "from": "qk-context-loader + user",
+  "required_fields": ["feature_description", "context_graph"],
+  "optional_fields": ["design_md_path", "acceptance_criteria"]
+}
+```
+
+### Produces
+```json
+{
+  "to": "qk-validation-gate",
+  "output_fields": ["changed_files", "assumptions_made", "self_audit_result", "exit_code"]
+}
+```
+
+---
+
+## Output Format
+
+```
+🚀 Feature Delivery
+─────────────────────────────────────────────────
+Feature:     [feature name]
+Confidence:  [HIGH | MEDIUM]
+
+Implementation:
+  ✅ [file:line — what was added/changed]
+  ✅ [file:line — what was added/changed]
+
+Assumptions made:
+  - [assumption 1 — safe/risky]
+
+Self-Audit:
+  ✅ Backward compatible
+  ✅ Error/Loading states handled
+  ✅ DESIGN.md tokens used
+  ✅ Backend error handling implemented
+  ⚠️ [Any noted issue]
+
+Exit Code:   [SUCCESS | PARTIAL | BLOCKED | FAILED]
+```
+
+---
+
+## Exit Codes
+
+| Code | Meaning | When |
+|------|---------|------|
+| SUCCESS | Feature complete, self-audit passed | All states handled, patterns followed |
+| PARTIAL | Feature works but with minor gaps | Medium confidence, some skipped |
+| BLOCKED | Cannot proceed — missing context/design/requirements | Stop and ask user |
+| FAILED | Cannot implement — breaks existing system | Architectural conflict or API break |
+
+---
+
+Deliver a complete, verifiable feature end-to-end (FE + BE + API) while adhering to project architecture and DESIGN.md.
+This skill is the primary execution skill for building new features. It requires clear requirements, context graph for architecture understanding, and DESIGN.md for UI work.
+- Feature description with acceptance criteria
+- Context graph (from qk-context-loader)
+- DESIGN.md path (if UI involved)
+- Existing codebase patterns
+- User approval for new dependencies
+1. **Clarify:** Parse requirements, identify ambiguities, ask user if needed
+2. **Load:** Read context graph and DESIGN.md tokens
+3. **Implement:** Build feature following existing patterns
+4. **Audit:** Self-audit for backward compat, error states, DESIGN.md compliance
+- MUST have context graph OR explicit confirmation for simple tasks
+- MUST have DESIGN.md tokens if UI is involved
+- MUST handle all 3 UI states: Loading, Success, Error
+- MUST NOT exceed token_budget (max 5 files, 150 lines each, 2 shell commands)
+- MUST NOT break existing API contracts without versioning
+- Zero-Trust: No assumptions without user confirmation
+- Backward Compat: Never break existing public APIs
+- Design First: UI must use DESIGN.md tokens only
+- Error Handling: Backend must have try/catch, validation, rollback
+## Retry Policy
+```
+Fix applied
+  └─ Static verification (re-read fixed section)
+       ├─ PASS → EXIT: SUCCESS
+       └─ Issue detected → attempt 1 correction
+            └─ Re-verify
+                 ├─ PASS → EXIT: SUCCESS
+                 └─ FAIL → EXIT: PARTIAL + report both attempts
+                      └─ Do NOT attempt 3rd fix — ESCALATE to user
+```
+
+---