ai-developer-skill-os 7.0.0 → 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

@@ -1,93 +1,59 @@
-# 🚀 AI Developer Skill OS (ai-developer-skill-os) v6.0
-
-> **Rule-Skins v6 is a Behavior Specification Format (BSF), not a prompt library, not an agent framework, and not a programming language. It defines reusable behavioral contracts that can be interpreted by different AI runtimes while remaining implementation-agnostic.**
-
-Thay vì cung cấp các "công cụ rời rạc" (Toolbox) hoặc những prompt cồng kềnh, **Rule-Skins v6** được tái thiết kế hoàn toàn theo chuẩn **Behavior Specification Format**. Các hành vi (Behaviors) giờ đây là các bản Hợp đồng (Contracts) rõ ràng, bao gồm Policies, Capabilities, và Reasoning Boundaries.
-
----
-
-## 🏗️ Kiến Trúc 5 Tầng (Agent OS Kernel)
-
-Hệ thống được thiết kế decoupled hoàn hảo:
-
-### 1. BSF Kernel (`framework/KERNEL.md`)
-Trái tim của hệ thống định nghĩa BSF Meta-Model, OS Policy (Invariants), Knowledge Layer, Validation Rules, và Design Principles.
-
-### 2. Thư Viện Độc Lập (Library Modules)
-- `framework/bias-library/`: Sửa các lỗi tư duy mặc định của AI.
-- `framework/dial-library/`: Định nghĩa các cấu hình điều khiển hành vi.
-- `framework/rule-library/`: Các tiêu chí xuất xưởng bắt buộc.
-
-### 3. Behavior Specifications (`skills/`)
-Bộ 23 Behavior cốt lõi được cấu trúc theo chuẩn BSF (`_template/BEHAVIOR_SPEC.md`). Toàn bộ logic nội bộ được quy hoạch thành các Contracts (Quyền hạn), Policies (Quyết định, Bằng chứng) và Protocol (State Machine tùy chọn).
-
-### 4. Output Contract (Decision Summary)
-Toàn bộ kết quả trả về cho bạn đều tuân thủ Output Contract: Báo cáo bằng Tiếng Việt, bảo đảm Invariants, và vượt qua các Quality Gates.
-
----
-
-## 🧩 Danh sách 20+ Master Skills
-
-Các skill được chia thành các nhóm (Category) rõ ràng:
-- **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`
-- **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-documentation-system`, `qk-project-memory`, `qk-help`
-
----
-
-## 🔄 Luồng Handoff Pipeline Khép Kín
-
-Bất cứ một tính năng hay lỗi nào cũng được đi qua một đường ống khép kín (Abstract Pipeline):
-```text
-analyze 
-  ↓
-implement 
-  ↓
-engineering-standard (Ép chuẩn Code, Naming, SOLID)
-  ↓
-validate (Chạy Linter, Tests, Security Check)
-  ↓
-complete (Tạo báo cáo bằng tiếng Việt)
-```
-
----
-
-## 💻 Cách Cài Đặt (Installation)
-
-Sử dụng npm:
-```bash
-npm i -g ai-developer-skill-os
-```
-Hoặc sử dụng qua `npx`:
-```bash
-npx ai-developer-skill-os init
-```
-
-## 🧪 Testing
-
-This project includes a full test suite to ensure registry integrity and SKILL.md spec compliance:
-
-```bash
-npm test
-```
-
-CI runs automatically on every PR via GitHub Actions, enforcing:
-- Registry matches filesystem
-- All SKILL.md frontmatters comply with `docs/SPEC.md`
-- Install script idempotency
-
-## 🗑️ Cách Gỡ Cài Đặt (Uninstallation)
-
-Nếu bạn đã cài đặt thông qua npm global, bạn có thể gỡ bỏ bằng lệnh:
-```bash
-npm uninstall -g ai-developer-skill-os
-```
-
-## 🚀 Tra Cứu (Help)
-
-Để tra cứu danh sách toàn bộ 20+ Kỹ năng và các mẹo sử dụng, hãy gọi:
-```bash
-./qk-help "Hiển thị tất cả các skill"
-```
+# 🚀 AI Developer Skill OS (ai-developer-skill-os) v7.0.0
+
+> **V7.0.0 "Anti-Slop & Zero-Trust Architecture"**
+
+Hệ sinh thái AI Developer Skill OS đã được tái cấu trúc hoàn toàn. Thay vì cung cấp các "công cụ rời rạc" (Toolbox), phiên bản V7 được thiết kế như một **Hệ điều hành khép kín, hoạt động theo kỷ luật của một Kiến trúc sư Hệ thống (50 năm kinh nghiệm)**.
+
+---
+
+## 🏗️ Triết Lý Hoạt Động Cốt Lõi (V7 Kernel)
+
+### 1. Zero-Trust Context (Không bao giờ đoán mò)
+Mọi kỹ năng phân tích logic và backend (như `qk-feature-delivery`, `qk-orchestrator`) đều bị khoá chặt, không được phép hoạt động nếu chưa có **Dependency Graph** (Bản đồ cấu trúc) từ `qk-context-loader`. AI không được phép thay đổi code dựa trên trí tưởng tượng.
+
+### 2. Contract-First (Khế ước đi đầu)
+- **Frontend / UI**: Mọi sửa đổi giao diện đều phải dựa trên `DESIGN.md`. Nếu vi phạm (tạo ra giao diện lười biếng "slop", dùng màu mặc định sai lệch), AI sẽ tự động bị đánh trượt bài kiểm toán.
+- **Backend / API**: Mọi API phải được viết `OpenAPI/Swagger` schema trước khi viết logic thực tế (`qk-api-lifecycle`).
+- **Database**: Cấm truy vấn mù. Bắt buộc phải có Schema định nghĩa rõ ràng trước (`qk-data-lifecycle`).
+
+### 3. Repair Loop (Chu trình Sửa Lỗi Khép Kín)
+Bảo vệ mã nguồn khỏi thói quen "sửa vội" của AI. Lỗi bắt buộc phải qua chu trình điều tra nghiêm ngặt: `Observe -> Hypothesis -> Evidence -> Fix -> Verify` (`qk-bug-resolution`).
+
+---
+
+## 🧩 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-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`
+
+---
+
+## 💻 Cách Cài Đặt (Installation)
+
+Sử dụng npm:
+```bash
+npm i -g ai-developer-skill-os
+```
+Hoặc khởi tạo thông qua `npx`:
+```bash
+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ộ 23 file Kỹ năng trước khi xuất bản:
+
+```bash
+npm test
+```
+
+## 🚀 Tra Cứu (Help)
+
+Để tra cứu danh sách các Kỹ năng và luật lệ khắt khe của hệ thống V7, hãy gọi:
+```bash
+./qk-help
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-developer-skill-os",
-  "version": "7.0.0",
+  "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
   }
 }