ai-developer-skill-os 2.0.1 → 3.0.0

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

@@ -1,432 +1,63 @@
----
-name: qk-feature-delivery
-purpose: Phân tích, Code và Test tính năng mới hoàn chỉnh (E2E).
-mode_supported: [quick, standard, enterprise]
-input: [Feature requirement]
-output: [Completed feature code, tests]
-workflow: [1. Requirement -> 2. Design -> 3. DB -> 4. API -> 5. UI -> 6. Test]
-allowed_tools: [write_to_file, run_command]
-handoff_to: [qk-validation-gate]
----
-
-# 🛠️ qk-feature-delivery - Quy Trình Vận Hành Chuẩn (SOP)
-
-> **Mô tả:** Phân tích, Code và Test tính năng mới hoàn chỉnh (E2E).
-
-## 🎯 1. Mục Tiêu (Goal)
-- Hoàn thành thành công tác vụ được giao liên quan đến nhiệm vụ của skill.
-- Đảm bảo chất lượng mã nguồn và tính nhất quán của hệ thống.
-
-## 🔄 2. Chuỗi Hành Động (Chain of Thought / SOP)
-*(Bắt buộc AI phải suy nghĩ và làm theo đúng thứ tự)*
-1. **Phân tích (Analyze):** Thu thập ngữ cảnh và hiểu rõ yêu cầu đầu vào.
-2. **Lên kế hoạch (Plan):** Xác định các bước cần thay đổi/tạo mới dựa trên bộ luật (rules).
-3. **Thực thi (Execute):** Tiến hành sửa đổi mã nguồn hoặc tạo tài liệu.
-4. **Xác thực (Verify):** Đảm bảo đầu ra đáp ứng đúng yêu cầu và không vi phạm quy định.
-
-## 🛡️ 3. Ràng Buộc & Quy Tắc (Constraints)
-- CẤM bỏ qua việc kiểm tra `qk-engineering-standard` trước khi viết code.
-- Mọi quyết định kỹ thuật phải dựa trên nội dung tại phần Deep Knowledge (nếu có).
-
-## 🤝 4. Giao Thức Bàn Giao (Handoff Protocol)
-- Đích đến: `qk-validation-gate`
-- Nội dung bàn giao: Chuyển toàn bộ ngữ cảnh và kết quả đã thực thi cho bước tiếp theo.
-
-## 📚 5. Kiến Thức Chuyên Sâu (Deep Knowledge)
-
-*(Nền tảng kiến thức và quy tắc chi tiết kế thừa từ kỹ sư)*
-
----
-
-
-
-# Form Builder
-
-> **Language rule:**
-> Use English for: code, identifiers, file names, architecture terms, technical decisions.
-> Use the user's language for: explanations, questions, summaries, and feedback.
-> The user may write in any language — detect and match it automatically.
-
----
-
-## Trigger
-
-Activate this skill when:
-- User says "create a login form", "add a settings page", "build a contact form"
-- User provides a data model and needs a UI to create/edit it
-- A form needs complex validation logic added
-- Refactoring a messy form into a structured library pattern (e.g., React Hook Form)
-
----
-
-## Scope
-
-- ✅ Define the form data schema and validation rules
-- ✅ Manage form state efficiently (preventing unnecessary re-renders)
-- ✅ Map form fields to the project's design system components
-- ✅ Handle submission state (loading, success, error)
-- ✅ Handle validation errors and display them accessibly
-- ✅ Integrate with `api-integration` for submission
-
----
-
-## Non-goals
-
-- ❌ Do NOT reinvent form state management if a library is present
-- ❌ Do NOT use raw HTML inputs if design system components exist
-- ❌ Do NOT skip validation (client-side validation is required)
-
----
-
-## Workflow
-
-### Phase 1 — Schema Design
-
-Define the exact shape of the data the form collects.
-Determine validation rules for each field (required, min length, email format, etc.).
-
-If the project uses Zod, Yup, or Joi, define the schema first.
-*Example:*
-```typescript
-const userFormSchema = z.object({
-  email: z.string().email("Invalid email address"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
-});
-```
-
----
-
-### Phase 2 — State Management Selection
-
-Check project dependencies for form libraries:
-1. `react-hook-form` (Preferred for React)
-2. `formik`
-3. Custom Vue/Svelte bindings
-4. Standard controlled components (`useState`) if no library exists and form is simple.
-
----
-
-### Phase 3 — Component Assembly
-
-1. Set up the form wrapper and submission handler.
-2. For each field in the schema, render the appropriate UI component (from `design-system`).
-3. Connect the UI component to the form state (register / Controller).
-4. Render error messages below fields if validation fails.
-
----
-
-### Phase 4 — Submission & Integration
-
-- Add `isLoading` state to the submit button.
-- Disable submit button during submission.
-- On success: Show success message or redirect, and optionally reset form.
-- On error: Display backend error messages (toast or form-level alert).
-
----
-
-## Decision Tree
-
-```
-Does the project use a validation library (Zod, Yup)?
-  ├── Yes → Use it to define schema and pass to form resolver
-  └── No  → Implement standard HTML5 validation or simple manual validation logic
-
-Is it a complex multi-step form (wizard)?
-  ├── Yes → Break into sub-components, use global or lifted state for form data
-  └── No  → Handle state locally within the single form component
-```
-
----
-
-## Output Format
-
-```
-📝 Form Built
-─────────────────────────────────────────────────
-Name:     [FormName]
-Schema:   [Zod / Yup / Manual]
-Library:  [React Hook Form / Formik / Native]
-
-Fields Implemented:
-  ✅ email (string, required, email)
-  ✅ password (string, required, min: 8)
-
-Integration:
-  - Validation: Client-side wired up
-  - Submission: Wired to `[submitFunction]`
-  - Loading UI: Handled on submit button
-
-🔗 Next Steps:
-  Make sure the API endpoint is ready to accept this payload.
-```
-
----
-
-## Validation Checklist
-
-- [ ] Form uses existing design system components (Inputs, Buttons)
-- [ ] Client-side validation is implemented
-- [ ] Error messages are displayed properly
-- [ ] Loading state disables the submit button
-- [ ] Accessibility: Inputs have associated labels and error ARIA attributes
-
----
-
-
-
-# Table & CRUD Generator
-
-> **Language rule:**
-> Use English for: code, identifiers, file names, architecture terms, technical decisions.
-> Use the user's language for: explanations, questions, summaries, and feedback.
-> The user may write in any language — detect and match it automatically.
-
----
-
-## Trigger
-
-Activate this skill when:
-- User says "create an admin table", "build a user list", "add data grid"
-- User needs a view to manage a list of entities with CRUD capabilities
-- A feature requires complex data presentation (sorting, filtering, pagination)
-
----
-
-## Scope
-
-- ✅ Generate a data table using design system components or libraries (e.g., TanStack Table)
-- ✅ Implement client-side or server-side pagination, sorting, and filtering
-- ✅ Add UI actions for Create, Edit, and Delete (modals or routing)
-- ✅ Integrate with `api-integration` hooks for data fetching and mutations
-- ✅ Handle loading, error, and empty states gracefully
-
----
-
-## Non-goals
-
-- ❌ Do NOT build the backend API for the CRUD operations (assume they exist or delegate)
-- ❌ Do NOT use raw `<table>` tags if a powerful data-grid library is already installed
-
----
-
-## Workflow
-
-### Phase 1 — Data Model & Requirements
-
-1. Understand the entity (e.g., `User`, `Product`).
-2. Identify columns to display.
-3. Determine operations needed (e.g., just Read/Delete, or full CRUD).
-4. Decide on Pagination strategy: Server-side (URL params) or Client-side (in-memory).
-
----
-
-### Phase 2 — Table Component Setup
-
-1. Check for table libraries (e.g., `@tanstack/react-table`, MUI DataGrid, AntD Table).
-2. Define column definitions (headers, accessor keys, cell formatters).
-3. Set up the table UI wrapper.
-
----
-
-### Phase 3 — Data Integration
-
-Connect to the state/API layer (e.g., React Query).
-- `useQuery` for fetching the list. Pass pagination/sorting state.
-- Handle `isLoading` → show skeleton or spinner.
-- Handle empty data → show empty state component.
-
----
-
-### Phase 4 — CRUD Actions
-
-Implement actions (usually in an "Actions" column or toolbar):
-- **Create:** Button opening a Modal (delegate to `form-builder`) or routing to `/new`.
-- **Edit:** Button opening an Edit Modal or routing to `/edit/:id`.
-- **Delete:** Button opening a confirmation dialog, calling delete mutation on confirm.
-
----
-
-## Decision Tree
-
-```
-Is the dataset large (requires backend pagination)?
-  ├── Yes → Implement Server-side pagination (sync state with URL search params)
-  └── No  → Implement Client-side pagination (fetch all once, slice in UI)
-
-Does the project use TanStack Table (React Table)?
-  ├── Yes → Use `useReactTable` to manage table state and column definitions
-  └── No  → Use the project's specific UI library table component
-```
-
----
-
-## Output Format
-
-```
-📊 Table & CRUD Generated
-─────────────────────────────────────────────────
-Entity:     [Entity Name]
-Features:   [Pagination (Server), Sorting, CRUD actions]
-
-Components Created:
-  ✅ [Entity]Table.tsx
-  ✅ [Entity]Columns.tsx
-  ✅ DeleteConfirmModal.tsx
-
-Integration:
-  - Fetching: Linked to `use[Entity]List` hook
-  - Mutations: Linked to Create/Update/Delete hooks
-
-🔗 Next Steps:
-  If Create/Edit forms are needed, delegate to `form-builder`.
-```
-
----
-
-## Validation Checklist
-
-- [ ] Columns are defined correctly
-- [ ] Loading and empty states are handled
-- [ ] Pagination/sorting state is managed properly
-- [ ] CRUD actions trigger the correct mutations or navigations
-- [ ] Delete actions have a confirmation step
-
----
-
-
-
-# Frontend Testing
-
-> **Language rule:**
-> Use English for: code, identifiers, file names, architecture terms, technical decisions.
-> Use the user's language for: explanations, questions, summaries, and feedback.
-> The user may write in any language — detect and match it automatically.
-
----
-
-## Trigger
-
-Activate this skill when:
-- User asks to "write tests for this", "add unit tests", or "test this component"
-- Fixing a critical bug where a regression test is required
-- Preparing for a major release and increasing test coverage
-- Project audit flags missing tests for core business logic
-
----
-
-## Scope
-
-- ✅ **Unit Tests:** Test pure functions, utilities, and custom hooks.
-- ✅ **Component Tests:** Test UI components using React Testing Library (RTL). Focus on user interactions and accessibility roles.
-- ✅ **Mocking:** Mock API calls (MSW, Jest mocks), modules, and timers.
-- ✅ **E2E Tests:** Write Cypress or Playwright tests for critical user flows.
-- ✅ Follow the project's existing testing framework (Jest vs Vitest).
-
----
-
-## Non-goals
-
-- ❌ Do NOT test implementation details (e.g., checking if a specific state variable changed). Test what the user sees/does.
-- ❌ Do NOT write brittle tests (e.g., querying by CSS class names). Use ARIA roles or `data-testid`.
-- ❌ Do NOT introduce a new testing framework if one already exists.
-
----
-
-## Workflow
-
-### Phase 1 — Environment Check
-
-Identify the testing stack:
-- Runner: Jest or Vitest?
-- DOM: React Testing Library, Vue Test Utils?
-- E2E: Cypress, Playwright?
-- Mocking: MSW (Mock Service Worker), `jest.mock`, `vi.mock`?
-
----
-
-### Phase 2 — Strategy & Coverage
-
-Determine what needs testing:
-1. **Critical Path:** Can the user complete the primary action?
-2. **Edge Cases:** What happens on API failure? Empty state? Invalid input?
-3. **Accessibility:** Can elements be found by role?
-
----
-
-### Phase 3 — Writing the Test (RTL Example)
-
-1. **Setup:** Render the component, wrap with necessary providers (Theme, Store, QueryClient).
-2. **Query:** Find elements using `screen.getByRole`, `screen.getByLabelText`, or `screen.getByText`.
-3. **Act:** Simulate user events using `userEvent` (preferred over `fireEvent`).
-4. **Assert:** Expect elements to be in the document, disabled, or display specific text.
-
-*Example:*
-```typescript
-it('submits the form when fields are valid', async () => {
-  const mockSubmit = vi.fn();
-  render(<LoginForm onSubmit={mockSubmit} />);
-
-  await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
-  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
-  await userEvent.click(screen.getByRole('button', { name: /login/i }));
-
-  expect(mockSubmit).toHaveBeenCalledWith({
-    email: 'test@example.com',
-    password: 'password123'
-  });
-});
-```
-
----
-
-### Phase 4 — Mocking
-
-If the component makes API calls:
-- Prefer MSW (Mock Service Worker) for network-level mocking.
-- Fallback: Mock the API service module or custom hook.
-
----
-
-## Decision Tree
-
-```
-Are we testing a pure function or utility?
-  ├── Yes → Write a standard Unit Test (Jest/Vitest).
-  └── No  → Are we testing a UI component?
-              ├── Yes → Use React Testing Library (focus on user behavior).
-              └── No  → Are we testing a full page flow?
-                          ├── Yes → Write an E2E test (Cypress/Playwright) or integration test.
-```
-
----
-
-## Output Format
-
-```
-🧪 Test Suite Generated
-─────────────────────────────────────────────────
-Target:     [ComponentName or Utility]
-Type:       [Unit / Component / E2E]
-Framework:  [Vitest + RTL]
-
-Tests Added:
-  ✅ renders correctly in default state
-  ✅ displays error message on API failure
-  ✅ successfully submits user data
-
-Mocking Used:
-  - MSW handlers for `/api/users`
-  - vi.fn() for onSubmit callback
-
-🔗 Next Steps:
-  Run `npm run test` to execute the suite.
-```
-
----
-
-## Validation Checklist
-
-- [ ] Queries use accessible methods (`getByRole`, `getByLabelText`)
-- [ ] Events simulated with `userEvent` (if applicable)
-- [ ] External dependencies/APIs are properly mocked
-- [ ] Tests verify observable behavior, not internal state
+---
+name: qk-feature-delivery
+version: 3.0.0
+updated: 2026-07-02
+description: Develop new features end-to-end (Frontend & Backend).
+category: engineering
+priority: high
+tags: [feature, development, e2e, ui, api]
+platforms: [claude-code, cursor, windsurf, gemini-cli]
+trigger: User asks to create a new page, component, or endpoint.
+inputs: [Feature requirements, Design/Mockup (optional)]
+outputs: [Implemented code, Test cases]
+allowed_tools: [run_command, read_file, write_to_file, grep_search]
+pipeline: [analyze, implement, engineering-standard, validate, complete]
+---
+
+# 🛠️ qk-feature-delivery - Standard Operating Procedure
+
+> **Goal:** Phát triển một tính năng mới hoàn chỉnh, từ giao diện (Frontend) đến API (Backend) và Cơ sở dữ liệu (nếu có).
+
+## 🔄 1. Chain of Thought (SOP)
+1. **Analyze (Requirements Gathering):**
+   - Read the user's requirements.
+   - Break down the feature into sub-tasks (e.g., Schema -> API -> UI Component -> Integration).
+2. **Plan (Architecture & Design):**
+   - Identify if you need to load specific knowledge files (e.g., `knowledge/frontend/react.md`).
+   - Define data interfaces (TypeScript Types/Interfaces) first.
+3. **Execute (Implementation):**
+   - Build the backend/API mock first (if applicable).
+   - Build the UI component and bind the data.
+4. **Verify (Validation):**
+   - Check if the UI is responsive.
+   - Ensure the API handles edge cases (empty states, loading, error).
+
+## 🛡️ 2. Constraints & Rules
+- **Contract First:** Always define the Type/Interface contract before writing the implementation logic.
+- **Component Reusability:** Do not create a new Button or Input if a Shared Component already exists in `src/components/shared/`.
+- **DRY (Don't Repeat Yourself):** Extract inline styles or duplicate logic into hooks/utilities.
+
+## 🌳 3. Decision Tree
+```text
+Does the feature require Backend API changes?
+  ├── YES → Start with Database Schema/Types -> API Route -> UI Integration.
+  └── NO → Is it a purely visual UI component?
+             ├── YES → Load UI/Design tokens and implement.
+             └── NO (Stateful) → Load `knowledge/frontend/react.md` to design the State Management strategy.
+```
+
+## 🤝 4. Handoff Pipeline
+After implementing the feature, map to the pipeline:
+1. `engineering-standard`: Ensure naming conventions and file size limits are respected.
+2. `validate`: Run tests and format the code.
+3. `complete`: Output the final report.
+
+## 📝 5. Output Format
+Vui lòng báo cáo lại bằng Tiếng Việt với cấu trúc tương tự `templates/bug-report.md` nhưng thay đổi tiêu đề thành:
+### 🚀 Báo Cáo Triển Khai Tính Năng (Feature Report)
+- **Tóm tắt (Summary):** Tính năng gì đã được làm.
+- **Chi tiết (Changes):** Liệt kê các file tạo mới / chỉnh sửa.
+- **Kiến trúc (Reasoning):** Giải thích quyết định thiết kế State/API.
+- **Xác thực (Verification):** Các bước để user test thử.
+- **Rủi ro (Risks):** Có làm chậm hệ thống hay bundle size không.
+- **Hành động tiếp (Next Action):** ...

package/skills/qk-help/SKILL.md

@@ -1,95 +1,37 @@
----
-name: qk-help
-purpose: Tra cứu danh sách toàn bộ kỹ năng (skills) hiện có và đọc các mẹo (pro-tips) kết hợp kỹ năng.
-mode_supported: [quick, standard]
-input: [User query]
-output: [Skill list, guides]
-workflow: [1. Nhận câu hỏi -> 2. Tra cứu -> 3. Phản hồi]
-allowed_tools: [read_file, list_dir]
-handoff_to: [none]
----
-
-# 🛠️ qk-help - Quy Trình Vận Hành Chuẩn (SOP)
-
-> **Mô tả:** Tra cứu danh sách toàn bộ kỹ năng (skills) hiện có và đọc các mẹo (pro-tips) kết hợp kỹ năng.
-
-## 🎯 1. Mục Tiêu (Goal)
-- Cung cấp danh sách các kỹ năng hệ thống (AI-OS) cho người dùng.
-- Hướng dẫn cách kết hợp các kỹ năng để tạo ra chuỗi giá trị (workflow).
-
-## 🔄 2. Chuỗi Hành Động (Chain of Thought / SOP)
-*(Bắt buộc AI phải suy nghĩ và làm theo đúng thứ tự)*
-1. **Phân tích (Analyze):** Phân tích câu hỏi của người dùng xem họ đang tìm kiếm gì.
-2. **Tra cứu (Plan):** Kiểm tra danh sách các kỹ năng hoặc mẹo sử dụng trong phần Deep Knowledge.
-3. **Thực thi (Execute):** Định dạng và trả lời câu hỏi một cách dễ hiểu nhất.
-4. **Xác thực (Verify):** Đảm bảo không giới thiệu các skill không tồn tại.
-
-## 🛡️ 3. Ràng Buộc & Quy Tắc (Constraints)
-- Chỉ được liệt kê các skill đang có thực trong dự án.
-- Mọi quyết định kỹ thuật phải dựa trên nội dung tại phần Deep Knowledge (nếu có).
-
-## 🤝 4. Giao Thức Bàn Giao (Handoff Protocol)
-- Đích đến: `none`
-- Nội dung bàn giao: Trả về kết quả hiển thị cho người dùng.
-
-## 📚 5. Kiến Thức Chuyên Sâu (Deep Knowledge)
-
-*(Nền tảng kiến thức và quy tắc chi tiết kế thừa từ kỹ sư)*
-
-# 📚 Cẩm nang AI Developer Skill OS
-
-> **Nhiệm vụ của bạn (AI):** Khi người dùng gọi lệnh `./qk-help`, hãy xuất ra màn hình (bằng tiếng Việt) danh sách các kỹ năng phân theo nhóm và các Mẹo sử dụng (Pro-tips) dưới đây một cách sinh động, dễ đọc (dùng markdown, in đậm, emoji). Không cần phân tích code, chỉ đóng vai trò là "Sách hướng dẫn sử dụng".
-
----
-
-## 🎯 1. Danh sách Kỹ năng (Skills Directory)
-
-Dưới đây là các kỹ năng chính bạn có thể gọi bằng cách gõ `./qk-[tên-kỹ-năng]`:
-
-### 🎨 Frontend (Giao diện)
-- **`qk-ui-builder`**: Xây dựng UI, Layout, Component, Modal phức tạp.
-- **`qk-table-crud-generator`**: Chuyên vẽ bảng danh sách (Table), phân trang, lọc và form Thêm/Sửa/Xóa.
-- **`qk-form-builder`**: Chuyên làm Form nhập liệu, validate (Zod/Yup).
-- **`qk-component-generator`**: Tạo Component độc lập, tái sử dụng (Button, Input, Card).
-- **`qk-state-management`**: Xử lý Redux, Zustand, React Query.
-- **`qk-frontend-debug`**: Bắt bệnh vỡ layout, infinite re-render, lỗi Hydration.
-- **`qk-frontend-performance`**: Tối ưu tốc độ, chống re-render thừa.
-- **`qk-frontend-architecture`**: Tư vấn kiến trúc thư mục Frontend.
-- **`qk-frontend-testing`**: Viết Unit Test / E2E Test cho Frontend.
-- **`qk-accessibility-audit`**: Sửa lỗi a11y, hỗ trợ Screen reader.
-
-### ⚙️ Engineering & Integration (Tích hợp)
-- **`qk-api-integration`**: [Cực mạnh] Bóc tách tài liệu API (Curl, Postman) -> Gen Type, Service, Hook -> (Tùy chọn) Ốp thẳng vào UI.
-- **`qk-refactor`**: Tối ưu, dọn dẹp mã nguồn sạch sẽ.
-- **`qk-bug-fix`**: Chẩn đoán lỗi sâu và sửa an toàn.
-- **`qk-project-audit`**: Quét toàn bộ dự án tìm nợ kỹ thuật.
-- **`qk-git-engineer`**: Viết Commit / PR chuẩn Conventional.
-- **`qk-migration`**: Nâng cấp version framework / thư viện.
-- **`qk-agent-orchestrator`**: Kiến trúc sư, lên plan phân rã task lớn.
-- **`qk-context-manager`**: Tóm tắt kiến trúc dự án.
-
-### 🗄️ Backend (Máy chủ)
-- **`qk-database-engineer`**: Thiết kế Schema, ORM (Prisma/Drizzle), Migration.
-- **`qk-backend-architecture`**: Setup kiến trúc Backend (Node/Nest/Python).
-- **`qk-auth-security`**: Phân quyền RBAC, JWT, OAuth.
-- **`qk-deployment`**: Viết Dockerfile, CI/CD Pipeline.
-
----
-
-## 💡 2. Mẹo sử dụng Nâng cao (Pro-Tips)
-
-### Mẹo 1: Kết hợp Kỹ năng (Skill Chaining) 🔗
-Đừng bắt AI làm từ A-Z bằng 1 câu prompt. Hãy gọi liên hoàn:
-> *"Hãy dùng `./qk-api-integration` để bóc tách API này thành hook React Query. Sau đó dùng `./qk-table-crud-generator` vẽ cái Bảng hiển thị danh sách tích hợp hook đó."*
-
-### Mẹo 2: Chế độ "Một phát ăn ngay" (End-to-End) 🚀
-Nếu bạn đã có sẵn 1 màn hình UI (chỉ thiếu data), hãy ép `qk-api-integration` làm End-to-End:
-> *"./qk-api-integration Dưới đây là API Get Profile. Hãy khai báo Type, viết Hook và TÍCH HỢP THẲNG LUÔN vào file \`Profile.tsx\` đang mở."*
-
-### Mẹo 3: Truyền tham số ép buộc (Arguments) 🎯
-Bạn có thể ép AI dùng công nghệ bạn muốn bằng cách thêm \`--tham_số\`:
-> *"./qk-ui-builder --fw=react --css=tailwind Hãy vẽ màn hình Đăng nhập."*
-
-### Mẹo 4: Nhờ "Kiến trúc sư" phân việc 🧠
-Nếu bạn có một tính năng quá lớn (ví dụ: Làm tính năng Giỏ Hàng), đừng tự chia việc, hãy gọi:
-> *"./qk-agent-orchestrator Tôi muốn làm tính năng Giỏ hàng. Hãy phân tích và lên kế hoạch gọi các skill \`qk-\` nào cho phù hợp."*
+---
+name: qk-help
+version: 3.0.0
+updated: 2026-07-02
+description: Display the list of available skills and pro-tips.
+category: utilities
+priority: low
+tags: [help, manual, list, tutorial]
+platforms: [claude-code, cursor, windsurf, gemini-cli]
+trigger: User types 'help', asks for a list of skills, or doesn't know how to use the agent.
+inputs: [Help query]
+outputs: [List of skills, Tips]
+allowed_tools: [read_file, list_dir]
+pipeline: [analyze, complete]
+---
+
+# 🛠️ qk-help - Standard Operating Procedure
+
+> **Goal:** Bản đồ hướng dẫn sử dụng Agent Skills. Giúp User tra cứu nhanh lệnh.
+
+## 🔄 1. Chain of Thought (SOP)
+1. **Analyze (Scan):**
+   - Read the skills directory to list all available tools.
+2. **Complete (Format):**
+   - Format the skills into a neat Markdown table.
+
+## 🛡️ 2. Constraints & Rules
+- **Keep it short:** Do not print the entire content of `SKILL.md`. Only print the Name and Description from the metadata.
+
+## 🤝 3. Handoff Pipeline
+1. `complete`: Output the Help table.
+
+## 📝 4. Output Format
+Vui lòng trả kết quả bằng Tiếng Việt dạng Bảng (Table).
+- **Cột 1:** Tên Skill
+- **Cột 2:** Mô tả ngắn (Tiếng Việt)
+- **Cột 3:** Lệnh kích hoạt (Ví dụ: `@qk-bug-resolution`)