ai-developer-skill-os 7.0.1 → 7.0.2

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to the **AI Developer Skill OS** project will be documented
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [7.0.2] - 2026-07-15
+
+### Added
+- **Frontend Integration**: Added `qk-fe-api-integration` skill to strictly enforce zero-overhead base API consumption, DTO mapping, and resilient UI states.
+
 ## [7.0.0] - 2026-07-15
 
 ### Changed (The "Anti-Slop & Zero-Trust" Architecture Upgrade)

package/README.md

@@ -21,11 +21,11 @@ Bảo vệ mã nguồn khỏi thói quen "sửa vội" của AI. Lỗi bắt bu
 
 ---
 
-## 🧩 Danh sách 22 Master Skills
+## 🧩 Danh sách 23 Master Skills
 
 Các kỹ năng được quản lý cực kỳ chặt chẽ với bài kiểm tra tự động (Vitest) để đảm bảo tính nhất quán của luật lệ:
 - **Orchestration:** `qk-orchestrator`, `qk-context-loader`, `qk-policy-engine`, `qk-access-policy`
-- **Engineering / Dev:** `qk-feature-delivery`, `qk-api-lifecycle`, `qk-data-lifecycle`, `qk-design-to-code`, `qk-ui-system-builder`
+- **Engineering / Dev:** `qk-feature-delivery`, `qk-api-lifecycle`, `qk-fe-api-integration`, `qk-data-lifecycle`, `qk-design-to-code`, `qk-ui-system-builder`
 - **Validation & Standards:** `qk-validation-gate`, `qk-engineering-standard`, `qk-ui-audit`, `qk-project-health`, `qk-bug-resolution`
 - **Ops & AI:** `qk-system-evolution`, `qk-production-release`, `qk-ai-builder`, `qk-project-bootstrap`
 - **Docs & Utils:** `qk-docs`, `qk-project-memory`, `qk-help`
@@ -45,7 +45,7 @@ npx ai-developer-skill-os init
 
 ## 🧪 Testing
 
-Hệ thống được bảo vệ bằng bộ Test Suite (Vitest) để tự động kiểm toán tính hợp lệ của toàn bộ 22 file Kỹ năng trước khi xuất bản:
+Hệ thống được bảo vệ bằng bộ Test Suite (Vitest) để tự động kiểm toán tính hợp lệ của toàn bộ 23 file Kỹ năng trước khi xuất bản:
 
 ```bash
 npm test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-developer-skill-os",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Behavior Specification Format Framework, AI coding agents (Claude, Cursor, Windsurf, Antigravity) với 23 skills chuyên nghiệp.",
   "main": "bin/install.js",
   "bin": {

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

@@ -0,0 +1,55 @@
+---
+name: qk-fe-api-integration
+category: frontend
+version: 1.0.0
+description: "Chuyên biệt hóa việc tiêu thụ (consume) API Backend, quản lý State, và ghép nối vào Giao diện (UI) tuân thủ chặt chẽ Base dự án."
+---
+
+# qk-fe-api-integration
+
+## Scope
+- Consume RESTful/GraphQL APIs from Backend (Plan & Execute).
+- Automatically generate Types/Interfaces based on JSON Response.
+- Manage UI states (Loading, Success, Error) and Pagination.
+- Bind data to existing UI Components or create new ones based on the Design System.
+
+## Verbs
+- `[ANALYZE_BASE]`: Perform targeted, zero-overhead searches (e.g., grep `package.json` or check `src/api`) to rapidly identify existing API conventions (Axios, RTK Query, React Query). DO NOT execute exhaustive project scans.
+- `[GENERATE_TYPES]`: Analyze cURL/JSON payloads to construct strict, type-safe TypeScript Interfaces/Types.
+- `[INTEGRATE]`: Implement API consumption logic, execute Data Transfer Object (DTO) mapping, and bind state seamlessly to UI Components.
+
+## Constraints
+```yaml
+must:
+  - "Execute a targeted lookup to identify the project's [Base API Client] architecture before writing network logic; NEVER default to raw fetch/axios if a wrapper exists"
+  - "Define explicit TypeScript Interfaces for both Request and Response schemas prior to implementation"
+  - "Thoroughly handle all 3 UI lifecycle states: Loading, Success, Error (via toast/alert mechanisms)"
+  - "Sanitize and map Backend payloads (DTO pattern) before injecting them into Dumb Components to prevent data leakage"
+  - "Maximize the reuse of existing project UI Components (Table, Form, Modal) over creating custom ones"
+must_not:
+  - "Hardcode API Base URLs or Endpoint paths directly within UI components (enforce env vars or centralized config)"
+  - "Inject API calling logic (Smart logic) inside purely presentational components (Dumb components)"
+  - "Arbitrarily introduce new State/Fetching management libraries that conflict with the project's established standards"
+  - "Hallucinate or presume the existence of data fields not explicitly defined in the provided JSON samples"
+```
+
+## Policies
+```yaml
+prefer:
+  - "Strict architectural separation between the Services layer (API calls) and the View layer (UI display)"
+  - "Implementation of Cache Invalidation strategies after successful Mutations (POST/PUT/DELETE) for state managers like React Query/RTK Query"
+  - "Surfacing user-friendly, localized error messages (Toast/Alert) rather than raw console logs"
+  - "Utilization of Optional Chaining (?.) and Nullish Coalescing (??) to construct resilient UIs that do not crash on malformed payloads"
+```
+
+## Escalation
+```yaml
+stop:
+  - "The project's Base API Client is indiscernible or the overarching API architecture is ambiguous"
+  - "The provided Backend JSON lacks mandatory fields essential for rendering the requested UI components"
+```
+
+## Output
+- Strict Type/Interface definition files (e.g., `types.ts`).
+- Modular API Services files (e.g., `api.ts`).
+- Presentational UI Components with complete data binding and state handling.

package/skills.json

@@ -740,6 +740,40 @@
       ],
       "status": "ready",
       "description": "Cổng kiểm tra chất lượng bắt buộc (Test, Lint, Security)."
+    },
+    {
+      "name": "qk-fe-api-integration",
+      "path": "skills/qk-fe-api-integration/SKILL.md",
+      "version": "1.0.0",
+      "category": "engineering",
+      "subcategory": "frontend",
+      "behavior": "development",
+      "intent": "implement-feature",
+      "priority": "high",
+      "tags": [
+        "api",
+        "frontend",
+        "integration",
+        "ui-binding",
+        "state-management"
+      ],
+      "trigger": [
+        "ghép api",
+        "tích hợp api",
+        "consume api",
+        "gọi api",
+        "bind data"
+      ],
+      "dependencies": [],
+      "conflicts": [],
+      "platforms": [
+        "claude-code",
+        "cursor",
+        "windsurf",
+        "gemini-cli"
+      ],
+      "status": "ready",
+      "description": "Chuyên biệt hóa việc tiêu thụ (consume) API Backend, quản lý State, và ghép nối vào Giao diện (UI) tuân thủ chặt chẽ Base dự án."
     }
   ],
   "categories": {
@@ -763,7 +797,8 @@
       "qk-design-to-code",
       "qk-feature-delivery",
       "qk-project-bootstrap",
-      "qk-ui-system-builder"
+      "qk-ui-system-builder",
+      "qk-fe-api-integration"
     ],
     "validation": [
       "qk-production-release",
@@ -788,8 +823,8 @@
     "lastAudited": "2026-07-02",
     "auditedBy": "kilo-auto/free",
     "specCompliance": "4.0",
-    "totalSkills": 22,
-    "readySkills": 22,
+    "totalSkills": 23,
+    "readySkills": 23,
     "archivedSkills": 22
   }
 }