ai-developer-skill-os 7.0.2 → 7.5.0

package/.qk-ai-skill-os/skills/_archive_old_skills/qk-frontend-performance/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: qk-frontend-performance
+description: >-
+  Tối ưu hóa hiệu năng frontend: giảm kích thước bundle, chặn re-render thừa, lazy load và cải thiện Web Vitals.
+version: 1.0.0
+category: frontend
+tags: [performance, optimization, render, bundle-size, lazy-load, memoization]
+platforms: [antigravity, claude-code, kilo-code, cursor, windsurf]
+---
+
+# Frontend Performance Optimizer
+
+> **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 reports "app is slow", "loading takes too long", or "UI freezes"
+- Core Web Vitals (LCP, FID/INP, CLS) are failing
+- React DevTools shows excessive re-renders
+- `project-audit` flags a performance issue (P2)
+- Need to optimize images, bundle size, or data fetching
+
+---
+
+## Scope
+
+- ✅ **Render Optimization:** Prevent unnecessary re-renders (React `memo`, `useMemo`, `useCallback`).
+- ✅ **Bundle Optimization:** Code splitting, lazy loading components/routes (`React.lazy`, Next.js `dynamic`).
+- ✅ **Asset Optimization:** Image optimization (WebP, Next/Image, lazy loading `loading="lazy"`).
+- ✅ **Data Fetching:** Caching, prefetching, pagination, virtualization for large lists.
+- ✅ **Core Web Vitals:** Fix layout shifts (CLS), improve Largest Contentful Paint (LCP).
+
+---
+
+## Non-goals
+
+- ❌ Do NOT blindly wrap everything in `useMemo` or `React.memo` (this can degrade performance).
+- ❌ Do NOT optimize prematurely if there is no measured performance issue.
+- ❌ Do NOT rewrite business logic unless it is the direct cause of the bottleneck.
+
+---
+
+## Workflow
+
+### Phase 1 — Identify the Bottleneck
+
+Determine what kind of performance issue it is:
+1. **Network/Load Time:** Slow initial page load, large bundle size, heavy images.
+2. **Render/Runtime:** UI is sluggish, typing lags, animation stutters (too many re-renders).
+3. **Data/Memory:** App crashes or slows down over time, large lists lagging.
+
+### Phase 2 — Common Fixes by Category
+
+#### 1. Fixing Unnecessary Re-renders (React)
+- Move state down to the smallest possible component.
+- Use `React.memo` for heavy pure components that receive the same props.
+- Stable references: Use `useMemo` for expensive calculations or object props, and `useCallback` for function props passed to memoized children.
+- *Warning:* Measure first! Memoization has an upfront cost.
+
+#### 2. Fixing Bundle Size (Code Splitting)
+- Are large libraries (like `lodash`, `moment`, `echarts`) imported entirely? Use named imports or alternative libraries.
+- Lazy load routes or heavy components below the fold:
+  ```typescript
+  const HeavyChart = React.lazy(() => import('./HeavyChart'));
+  // Wrap in <Suspense fallback={<Spinner />}>
+  ```
+
+#### 3. Asset & UI Optimization
+- Add fixed `width` and `height` to images to prevent Cumulative Layout Shift (CLS).
+- Virtualize large lists (e.g., `react-window` or `@tanstack/react-virtual`) instead of rendering 1000 DOM nodes.
+- Debounce rapid events (typing in search, window resize).
+
+---
+
+### Phase 3 — Implementation
+
+Apply the targeted fix. Document why the fix improves performance.
+
+---
+
+## Decision Tree
+
+```
+Is the issue related to initial load time?
+  ├── Yes → Focus on Code Splitting (lazy loading), Image Optimization, and bundle size reduction.
+  └── No  → Is the UI lagging during interaction?
+              ├── Yes → Profile renders. Check for state updates triggering massive re-renders. Use `memo` or state colocation.
+              └── No  → Is a specific list or table slow?
+                          ├── Yes → Implement virtualization (react-window) or pagination.
+```
+
+---
+
+## Output Format
+
+```
+⚡ Performance Optimization Report
+─────────────────────────────────────────────────
+Target:      [Component / Page]
+Bottleneck:  [Brief description, e.g., "Expensive list rendering on every keystroke"]
+
+🔧 Fixes Applied:
+  ✅ Extracted Search Input state to prevent list re-rendering
+  ✅ Wrapped heavy `ChartComponent` in `React.memo`
+  ✅ Lazy-loaded below-the-fold content (`Suspense`)
+
+📈 Expected Impact:
+  - Reduced re-renders on typing from O(N) to O(1)
+  - Initial JS bundle size reduced by ~X KB
+
+⚠️ Notes:
+  Please test this on lower-end devices to confirm smooth interactions.
+```
+
+---
+
+## Validation Checklist
+
+- [ ] Fix addresses the specific bottleneck
+- [ ] No premature memoization applied blindly
+- [ ] Layout shift (CLS) prevented (if changing images/layout)
+- [ ] Application behavior remains completely unchanged
+

package/.qk-ai-skill-os/skills/_archive_old_skills/qk-frontend-testing/SKILL.md

@@ -0,0 +1,146 @@
+---
+name: qk-frontend-testing
+description: >-
+  Viết Unit, Component và E2E test bằng Jest, Vitest, RTL, Cypress. Tập trung vào hành vi người dùng.
+version: 1.0.0
+category: frontend
+tags: [testing, jest, vitest, react-testing-library, cypress, playwright, tdd]
+platforms: [antigravity, claude-code, kilo-code, cursor, windsurf]
+---
+
+# 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
+

package/.qk-ai-skill-os/skills/_archive_old_skills/qk-git-engineer/SKILL.md

@@ -0,0 +1,304 @@
+---
+name: qk-git-engineer
+description: >-
+  Viết commit message chuẩn Conventional Commits, mô tả Pull Request, Changelog và Release Notes chuyên nghiệp.
+version: 1.0.0
+category: engineering
+tags: [git, commit, pull-request, changelog, release, conventional-commits]
+platforms: [antigravity, claude-code, kilo-code, cursor, windsurf]
+---
+
+# Git Engineer
+
+> **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.
+
+> 📌 **Standard followed:** [Conventional Commits v1.0.0](https://www.conventionalcommits.org/)
+
+---
+
+## Trigger
+
+Activate this skill when:
+- User wants to write a commit message
+- User has finished a feature and needs a PR description
+- User needs to generate a changelog for a release
+- User asks "what should I commit?", "write PR", "release notes"
+- User wants to clean up their git history before merging
+
+---
+
+## Scope
+
+- ✅ Write commit messages (Conventional Commits format)
+- ✅ Suggest logical commit groupings from a set of changes
+- ✅ Write pull request titles and descriptions
+- ✅ Generate CHANGELOG entries from commit history
+- ✅ Write release notes (human-readable)
+- ✅ Suggest branch naming conventions
+- ✅ Review and improve existing commit messages
+
+---
+
+## Non-goals
+
+- ❌ Do NOT run git commands without explicit user approval
+- ❌ Do NOT force-push or rebase without warning
+- ❌ Do NOT create commits that bundle unrelated changes
+- ❌ Do NOT write vague messages like "fix stuff" or "updates"
+
+---
+
+## Conventional Commits Format
+
+```
+<type>(<scope>): <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+### Types
+
+| Type | When to use |
+|------|-------------|
+| `feat` | New feature |
+| `fix` | Bug fix |
+| `docs` | Documentation only changes |
+| `style` | Formatting, missing semicolons — no logic change |
+| `refactor` | Code restructure without behavior change |
+| `perf` | Performance improvement |
+| `test` | Adding or fixing tests |
+| `build` | Build system or dependency changes |
+| `ci` | CI/CD configuration changes |
+| `chore` | Other changes that don't modify src or test files |
+| `revert` | Reverts a previous commit |
+
+### Breaking Changes
+
+```
+feat!: remove deprecated login endpoint
+
+BREAKING CHANGE: The /auth/login endpoint has been removed.
+Use /auth/v2/login instead.
+```
+
+---
+
+## Workflow
+
+### Phase 1 — Understand the Changes
+
+Review what has changed:
+1. Read the diff or file list provided by the user
+2. Group changes by concern (feature, fix, refactor, docs, etc.)
+3. Identify if changes should be split into multiple commits or kept as one
+4. Note any breaking changes
+
+---
+
+### Phase 2 — Commit Message(s)
+
+For each logical group of changes, write:
+
+**Single commit:**
+```
+feat(auth): add refresh token rotation
+
+Implements automatic refresh token rotation on each use.
+Old tokens are invalidated immediately after use to prevent
+replay attacks.
+
+Closes #142
+```
+
+**Multiple commits (if changes should be split):**
+```
+refactor(api): extract axios instance to lib/axios.ts
+
+No behavior change — prepares for interceptor configuration.
+
+---
+
+feat(api): add request retry interceptor
+
+Automatically retries failed requests up to 3 times with
+exponential backoff. Skips retry for 4xx errors.
+```
+
+**Rules:**
+- Subject line: ≤72 characters, imperative mood ("add" not "added")
+- Body: explain *why*, not *what* (the diff shows what)
+- Reference issues: `Closes #123`, `Fixes #456`, `Refs #789`
+
+---
+
+### Phase 3 — Pull Request Description
+
+Structure:
+```markdown
+## Summary
+[1-3 sentences describing what this PR does and why]
+
+## Changes
+- [Specific change 1]
+- [Specific change 2]
+- [Specific change 3]
+
+## Testing
+- [ ] Unit tests pass
+- [ ] Manual testing: [describe what you tested]
+- [ ] [Other relevant checks]
+
+## Breaking Changes
+[None | Description of breaking change and migration path]
+
+## Screenshots / Demo
+[If UI changes — attach before/after screenshots]
+
+## Related Issues
+Closes #[issue number]
+```
+
+---
+
+### Phase 4 — Changelog Entry
+
+Follow [Keep a Changelog](https://keepachangelog.com/) format:
+
+```markdown
+## [1.2.0] - 2026-07-01
+
+### Added
+- Refresh token rotation for improved security (#142)
+- Retry interceptor with exponential backoff (#138)
+
+### Changed
+- Extracted axios instance to `src/lib/axios.ts` for cleaner configuration
+
+### Fixed
+- Fixed race condition in useUserData hook causing stale state (#135)
+- Resolved memory leak when component unmounts during fetch (#133)
+
+### Deprecated
+- `GET /api/v1/users` — use `GET /api/v2/users` instead (removes in v2.0)
+
+### Removed
+- Removed legacy `moment.js` dependency — migrated to `date-fns`
+
+### Security
+- Updated `package-x` from 2.1.0 to 2.1.4 (CVE-2026-XXXX)
+```
+
+---
+
+### Phase 5 — Release Notes (Human-Readable)
+
+For non-technical stakeholders:
+
+```markdown
+# Release v1.2.0 — Security & Stability
+
+## What's new
+
+**Better security**: Login sessions are now more secure with automatic
+token rotation. Each time you use the app, your session is refreshed
+automatically.
+
+**More reliable**: The app now automatically retries failed requests,
+so temporary network issues won't interrupt your workflow.
+
+## Bug fixes
+
+- Fixed an issue where user data could appear stale after navigating
+- Fixed a rare crash that occurred when closing the app during data loading
+
+## Under the hood
+
+We've updated several internal libraries to keep the app fast, secure,
+and maintainable.
+```
+
+---
+
+## Decision Tree
+
+```
+What does the user need?
+  ├── Commit message     → Phase 2 only
+  ├── PR description     → Phase 3 (+ Phase 2 if commits not written)
+  ├── Changelog entry    → Phase 4 (from commit list or diff)
+  └── Full release       → Phase 2 + Phase 4 + Phase 5
+
+Should changes be split into multiple commits?
+  ├── Changes are unrelated → Yes — split by concern
+  ├── Changes form one atomic feature → No — single commit
+  └── Unsure → Ask user
+
+Is there a breaking change?
+  ├── Yes → Use `feat!` or `fix!` type + BREAKING CHANGE footer
+  └── No  → Standard type
+```
+
+---
+
+## Branch Naming Convention
+
+```
+feature/short-description       → new features
+fix/short-description           → bug fixes
+refactor/short-description      → refactoring
+chore/dependency-upgrade        → maintenance
+release/v1.2.0                  → release preparation
+hotfix/critical-issue           → urgent production fixes
+```
+
+---
+
+## Output Format
+
+```
+📝 Git Output
+─────────────────────────────────────────────────
+Type:    [commit | PR | changelog | release-notes]
+
+─── Commit Message ───────────────────────────────
+feat(scope): short imperative description
+
+Body explaining why this change was made.
+What problem does it solve?
+
+Closes #123
+
+─── PR Title ─────────────────────────────────────
+feat(scope): short imperative description
+
+─── PR Description ───────────────────────────────
+[Formatted markdown PR body]
+
+─── Changelog ────────────────────────────────────
+[Formatted changelog section]
+```
+
+---
+
+## Validation Checklist
+
+- [ ] Commit type is correct (feat/fix/refactor/etc.)
+- [ ] Subject line ≤72 chars, imperative mood, no period at end
+- [ ] Breaking changes flagged with `!` and `BREAKING CHANGE:` footer
+- [ ] Body explains *why*, not just *what*
+- [ ] Issue references included (`Closes #N`)
+- [ ] PR description covers: summary, changes, testing, breaking changes
+- [ ] Changelog uses correct sections (Added/Changed/Fixed/etc.)
+- [ ] No vague messages ("fix stuff", "updates", "wip")
+
+---
+
+## Examples
+
+See `examples/` folder.
+

package/.qk-ai-skill-os/skills/_archive_old_skills/qk-help/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: qk-help
+description: >-
+  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 để tăng tốc độ code.
+version: 1.0.0
+category: engineering
+tags: [help, list, tips, guide, manual]
+platforms: [antigravity, claude-code, kilo-code, cursor, windsurf]
+---
+
+# 📚 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."*
+