ai-developer-skill-os 9.3.1 → 10.2.0

package/.agents/skills/qk-test-engineering/SKILL.md

@@ -1,215 +0,0 @@
----
-# ── Identity ───────────────────────────────────────────────
-name: qk-test-engineering
-version: 9.2.0
-status: stable
-description: "Thiết kế chiến lược kiểm thử toàn diện và viết bộ test tự động: Test Pyramid (Unit, Integration, E2E), Mocking strategy, Edge-case coverage, Regression testing. Dùng skill này khi user nhắc đến: viết test, test strategy, unit test, coverage, e2e, integration test, mock data, pytest, vitest, playwright — kể cả khi chỉ nói 'viết test cho module này'."
-platforms: [antigravity, claude-code, cursor, windsurf, kilo-code]
-
-# ── V9: Classification ─────────────────────────────────────
-type: capability
-
-intent:
-  - testing-strategy
-  - unit-testing
-  - integration-testing
-  - e2e-testing
-  - test-automation
-
-complexity:
-  level: high
-  criteria:
-    files_affected: "1-5"
-    has_behavior_change: true
-    has_external_dependency: true
-    has_breaking_change: false
-
-triggers:
-  - "viết test"
-  - "test strategy"
-  - "unit test"
-  - "coverage"
-  - "e2e"
-  - "integration test"
-  - "mock data"
-  - "pytest"
-  - "vitest"
-  - "playwright"
-
-
-# ── V8: References ─────────────────────────────────────────
-workflow: feature-delivery
-
-rules:
-  - global
-  - coding
-
-tools:
-  - filesystem
-  - terminal
-
-related_skills:
-  - qk-code-review
-  - qk-bug-resolution
-
-knowledge_scope:
-  domain:
-    - testing-strategy
-    - quality-assurance
-    - unit-testing
-    - integration-testing
-    - e2e-testing
-  concepts:
-    - test-pyramid
-    - mock-strategy
-    - arrange-act-assert
-  references:
-    - architecture
-    - vitest
-    - pytest
-    - playwright
-
-# ── V8: Verification ───────────────────────────────────────
-verification:
-  required: true
-  strategy: feature
-
-selection:
-  priority: high
-  confidence_threshold: 0.85
-
-examples: []
-learnings: []
-
-# ── V7 Runtime ─────────────────────────────────────────────
-execution_mode: deterministic
-cost: medium
-latency: medium
-risk: low
-side_effects: edit_files
-produces: [code, test_plan]
-consumes: [source-code, user-description]
-
-token_budget:
-  max_files_read: 6
-  max_lines_per_read: 150
-  max_shell_commands: 3
-  stop_early: true
-
-exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
----
-
-# qk-test-engineering — Automated Testing & Quality Architect
-
-> **Language rule:** Code, identifiers, file names → English. Explanations, summaries → Vietnamese.
-
-Chịu trách nhiệm thiết kế chiến lược kiểm thử cân bằng (Test Pyramid) và trực tiếp cài đặt các bộ test tự động đáng tin cậy: **Unit Tests nhanh & cô lập, Integration Tests kiểm chứng hợp đồng kết nối, và E2E Tests bảo vệ luồng nghiệp vụ sống còn.**
-
----
-
-## Preconditions
-
-Trước khi viết test, AI BẮT BUỘC xác nhận:
-
-- [ ] Xác định Test Framework từ `DEV_PROFILE.md` hoặc manifest (Vitest, Jest, Pytest, Go `testing`, Playwright).
-- [ ] Xác định code mục tiêu cần test (function, class, API endpoint, hoặc user journey).
-- [ ] Xác định phụ thuộc ngoại vi (Database, External API, File system, Third-party service) để chọn phương án Mock phù hợp.
-
-*Nếu chưa có code mục tiêu và user không yêu cầu TDD (Test-Driven Development):*
-→ **EXIT: BLOCKED**
-→ Yêu cầu: "Vui lòng chỉ định hàm, module hoặc file cần viết test."
-
----
-
-## Scope
-
-✅ Skill này làm:
-- Thiết lập **Test Cases Matrix** bao phủ:
-  - **Happy path:** Dữ liệu hợp lệ, kết quả mong đợi.
-  - **Edge cases:** Giới hạn biên (0, -1, max int, chuỗi rỗng, mảng rỗng, ký tự đặc biệt UTF-8).
-  - **Error boundaries:** Ném lỗi đúng loại (Custom Error / HTTP Status) khi đầu vào sai.
-  - **Async / Timeout:** Xử lý promise reject, network delay.
-- Viết Unit Tests theo cấu trúc kinh điển **AAA (Arrange - Act - Assert)** hoặc **Given - When - Then**.
-- Viết Integration Tests kiểm chứng sự phối hợp giữa Service và Database (dùng in-memory DB hoặc Testcontainers).
-- Viết E2E Tests (Playwright) cho các User Flows quan trọng nhất (Sign up → Checkout → Payment).
-- Xây dựng Mocking Strategy đúng mực: Mock ở ranh giới hệ thống (HTTP client, Message queue), **không bao giờ mock implementation details nội bộ**.
-
-❌ Skill này KHÔNG làm:
-- Viết tests rỗng không có `expect` / `assert` chỉ để farm chỉ số coverage.
-- Mock quá mức khiến test luôn pass dù code thật bị hỏng (Tautological tests).
-- Viết E2E test cho mọi biến thể nhỏ (vi phạm kim tự tháp kiểm thử, gây chậm CI và flaky test).
-
----
-
-## Execution Steps
-
-### Step 1 — Phân tầng Kiểm thử (Pyramid Placement)
-```
-Quyết định tầng test phù hợp:
-  - Pure function, domain logic, utils       → 70% Unit Tests (Chạy < 10ms/test).
-  - Database queries, API routes, middleware → 20% Integration Tests (Mock external API).
-  - Critical checkout / login flow           → 10% E2E Tests (Playwright / Cypress).
-```
-
-### Step 2 — Lập Ma trận Kịch bản (Test Scenario Matrix)
-```
-Ví dụ với hàm transferMoney(fromId, toId, amount):
-  1. TC-01 (Happy): Chuyển tiền thành công khi số dư đủ, trừ tài khoản A, cộng tài khoản B.
-  2. TC-02 (Edge): Chuyển đúng bằng số dư hiện có (số dư về 0).
-  3. TC-03 (Error): Chuyển số tiền âm hoặc = 0 -> Ném ValidationError.
-  4. TC-04 (Error): Số dư không đủ -> Ném InsufficientFundsError.
-  5. TC-05 (Edge): fromId trùng toId -> Ném SelfTransferError.
-  6. TC-06 (Concur): 2 giao dịch đồng thời -> Xử lý lock/transaction an toàn.
-```
-
-### Step 3 — Viết Code Kiểm thử (Test Implementation)
-```
-Tuân thủ cấu trúc AAA:
-  // 1. Arrange: Chuẩn bị dữ liệu mẫu và mock
-  const user = createMockUser({ balance: 100 });
-  
-  // 2. Act: Gọi hàm cần test
-  const result = await transferMoney(user.id, recipient.id, 50);
-  
-  // 3. Assert: Kiểm tra kết quả
-  expect(result.status).toBe('SUCCESS');
-  expect(user.balance).toBe(50);
-```
-
-### Step 4 — Verification & Chạy Test Thực Tế
-```
-Actions:
-  - Chạy lệnh test thật qua terminal (`npm test -- run`, `pytest -v`, `go test ./...`).
-  - Đảm bảo toàn bộ test cases đều PASS (Màu xanh).
-  - Đảm bảo test chạy độc lập (Isolated), không phụ thuộc vào thứ tự thực thi.
-```
-
----
-
-## Prompt Template
-
-```
-Target:       [File hoặc Function cần viết test: vd: src/services/PaymentService.ts]
-Framework:    [Vitest / Jest / Pytest / Playwright]
-Level:        [Unit / Integration / E2E]
-Phụ thuộc:    [Cần mock Stripe API, PostgreSQL DB]
-Yêu cầu:      [Cover các trường hợp lỗi mạng, thẻ hết hạn, concurrency]
-```
-
-### Ví dụ theo Stack:
-
-**Vitest (Unit Test cho Business Logic)**
-```
-Target:       calculateDiscount(cart, coupon)
-Framework:    Vitest + TypeScript
-Yêu cầu:      Test giảm giá phần trăm, giảm giá cố định, mã hết hạn, coupon vượt quá tổng giá trị đơn hàng.
-```
-→ AI tạo: `tests/unit/calculateDiscount.test.ts` với đầy đủ 6 test cases, kiểm tra boundary condition `Math.max(0, total - discount)`.
-
-**Pytest (Integration Test cho FastAPI Endpoint)**
-```
-Target:       POST /api/v1/items
-Framework:    Pytest + httpx AsyncClient
-Yêu cầu:      Test tạo item thành công (201), validate body thiếu trường bắt buộc (422), unauthenticated (401).
-```
-→ AI tạo: `tests/test_items_api.py`, sử dụng pytest fixture cho test DB session và test client.

package/.agents/skills/qk-test-engineering/capability.yaml

@@ -1,28 +0,0 @@
-# Auto-generated from SKILL.md frontmatter
-schema_version: 1
-id: "qk-test-engineering"
-version: "9.1.0"
-description: "Công cụ quyết định chiến lược kiểm thử (Unit, Integration, E2E, Coverage, Regression, Mock)."
-tools:
-  - "filesystem"
-  - "terminal"
-knowledge:
-  owns:
-    - "qk-test-engineering"
-  references:
-    - "architecture"
-    - "anti-patterns"
-    - "playwright"
-    - "vitest"
-    - "storybook-testing"
-eval:
-  scorecard: "evals/scorecard.yaml"
-decision_boundary:
-  owns:
-    - "test pyramid"
-    - "coverage strategy"
-    - "regression planning"
-  does_not_own:
-    - "business logic implementation"
-    - "writing tests"
-  conflicts_with: []

package/.agents/skills/qk-test-engineering/evals/scorecard.yaml

@@ -1,26 +0,0 @@
-name: qk-test-engineering-eval
-description: Đánh giá tư duy Chiến lược Kiểm thử (Test Strategy)
-version: 9.1.0
-threshold: 85 # Đảm bảo tư vấn chiến lược rõ ràng và bao quát rủi ro
-
-metrics:
-  - id: pyramid_strategy
-    name: Chiến lược Test Pyramid
-    description: Chiến lược có phân bổ hợp lý giữa Unit, Integration và E2E không?
-    weight: 35
-    criteria:
-      - Phân tách rõ ràng loại test nào dùng cho logic nào thay vì bắt viết E2E cho mọi thứ (35đ)
-
-  - id: boundary_testing_r_sec_04
-    name: Negative & Boundary Testing (R-SEC-04)
-    description: Có bao phủ các test cases ranh giới để ngăn chặn tấn công/lỗi dữ liệu không?
-    weight: 35
-    criteria:
-      - Bắt buộc đưa ra các test case biên (Boundary) và trường hợp lỗi (Negative tests) (35đ)
-
-  - id: mocking_strategy
-    name: Chiến lược Mock/Stub
-    description: Có tư vấn rõ ràng khi nào nên Mock và khi nào dùng Database thật không?
-    weight: 30
-    criteria:
-      - Phân biệt rõ việc Mock API bên thứ ba vs Integration DB nội bộ (30đ)

package/.agents/skills/qk-ui-audit/SKILL.md

@@ -1,175 +0,0 @@
----
-# ── Identity ───────────────────────────────────────────────
-name: qk-ui-audit
-version: 9.2.0
-status: stable
-description: "Kiểm toán chất lượng thiết kế UI với 57-check Anti-Slop checklist: spacing nhất quán, contrast ratio, component polish, interaction states. Output là nhận xét thiết kế và danh sách cần cải thiện. Dùng skill này khi user nhắc đến: review ui, audit giao diện, kiểm tra ui, ui quality, component spacing, design consistency, anti-slop — KHÔNG dùng cho đo hiệu năng hay SEO."
-platforms: [antigravity, claude-code, cursor, windsurf, kilo-code]
-
-# ── V9: Classification ─────────────────────────────────────
-type: utility
-
-intent:
-  - ui-audit
-  - codebase-health
-
-complexity:
-  level: medium
-  criteria:
-    files_affected: "1-5"
-    has_behavior_change: false
-    has_external_dependency: false
-    has_breaking_change: false
-
-triggers:
-  - "review ui"
-  - "audit giao diện"
-  - "kiểm tra ui"
-  - "ui quality"
-  - "component spacing"
-  - "design consistency"
-  - "anti"
-
-
-# ── V8: References ─────────────────────────────────────────
-workflow: code-review
-
-rules:
-  - global
-  - coding
-
-tools:
-  - filesystem
-  - terminal
-
-related_skills:
-  - qk-ui-builder
-
-knowledge_scope:
-  owns:
-    - ui-standards
-    - anti-slop
-  references:
-    - design-system
-    - security
-    - anti-patterns
-
-# ── V8: Verification ───────────────────────────────────────
-verification:
-  required: true
-  strategy: review
-
-selection:
-  priority: medium
-  confidence_threshold: 0.80
-
-examples: []
-learnings: []
-
-# ── V7 Runtime ─────────────────────────────────────────────
-execution_mode: deterministic
-cost: medium
-latency: medium
-risk: low
-side_effects: read_only
-produces: [report]
-consumes: [design-md, source-code]
-
-token_budget:
-  max_files_read: 5
-  max_lines_per_read: 150
-  max_shell_commands: 0
-  stop_early: true
-
-exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
----
-
-# qk-ui-audit — Anti-Slop UI Inspector
-
-> **Language rule:** Code, identifiers, file names → English. Explanations, summaries → Vietnamese.
-
-Chịu trách nhiệm kiểm toán chi tiết tính thẩm mỹ, sự nhất quán và độ hoàn thiện thị giác của giao diện người dùng theo bộ **57-Check Anti-Slop Checklist**. Ngăn chặn triệt để tình trạng giao diện AI cẩu thả (AI-generated slop): lệch nhịp spacing, độ tương phản kém, thiếu states tương tác.
-
----
-
-## Preconditions
-
-Trước khi audit giao diện, AI BẮT BUỘC kiểm tra:
-
-- [ ] Xác định các file UI component hoặc trang cần audit (`.tsx`, `.vue`, `.svelte`, `.html`, `.css`).
-- [ ] Đọc file cấu hình thiết kế nếu có (`DESIGN.md`, `tailwind.config.js`, tokens file) để lấy chuẩn so sánh.
-- [ ] Kiểm tra xem component có mã nguồn rõ ràng để phân tích styling không.
-- [ ] Nếu component sử dụng inline style hoặc cấu trúc quá rối loạn không thể đọc được layout:
-  → **EXIT: PARTIAL**
-  → Báo cáo user tình trạng code kèm khuyến nghị refactor trước khi audit chi tiết.
-
----
-
-## Scope
-
-✅ Skill này làm:
-- Rà soát 4 nhóm kiểm tra chính theo chuẩn Anti-Slop:
-  1. Spacing & Grid System (4px/8px grid alignment, nhất quán padding/margin, không dùng giá trị arbitrary tùy tiện).
-  2. Color & Contrast (Tỉ lệ tương phản văn bản/nền theo WCAG AA, tính nhất quán của bảng màu token).
-  3. Typography & Hierarchy (Phân cấp kích cỡ font chữ, line-height, font-weight có trật tự).
-  4. Interactive States (Đầy đủ hover, active, focus-visible, disabled, loading, skeleton states).
-- Xuất danh sách các điểm vi phạm (Slop items) kèm vị trí dòng code cụ thể.
-- Đề xuất mã CSS / Tailwind class sửa đổi chuẩn chỉnh.
-- Chế độ hoạt động: **Read-Only / Inspection Report** (không tự sửa code khi chưa duyệt).
-
-❌ Skill này KHÔNG làm:
-- Đo lường hiệu năng kỹ thuật web, Core Web Vitals, SEO tags (→ `qk-web-quality-gate`).
-- Xây dựng component mới từ bản vẽ Figma (→ `qk-ui-builder`).
-- Định nghĩa lại toàn bộ hệ thống Design Tokens từ gốc (→ `qk-design-system-engineering`).
-
----
-
-## Execution Steps
-
-### Step 1 — Target Ingestion & Design Baseline
-```
-Inputs:  Danh sách file UI, DESIGN.md / Tailwind config
-Actions:
-  - Nạp source code component.
-  - Xác định Design Tokens chuẩn của dự án (màu sắc, spacing scales, border-radius).
-Output: Component AST / Markup map
-```
-
-### Step 2 — 57-Check Anti-Slop Audit
-```
-Inputs:  Component code, Design tokens
-Actions:
-  - Quét Spacing: Phát hiện các giá trị cứng (hardcoded px) thay vì dùng token (ví dụ: mt-[13px]).
-  - Quét Visual Hierarchy: Đảm bảo tiêu đề và nội dung có sự phân biệt rõ ràng.
-  - Quét Interactive States: Kiểm tra các button, input, link xem có `:focus-visible` và `:disabled` chuẩn không.
-  - Quét Layout Bugs: Xử lý tràn chữ (overflow, text truncation), co giãn responsive.
-Output: Audit findings categorized by severity
-```
-
-### Step 3 — Remediation Formulation
-```
-Inputs:  Audit findings
-Actions:
-  - Viết giải thích ngắn gọn lý do vi phạm.
-  - Cung cấp đoạn code so sánh Before/After cụ thể.
-Output: Anti-Slop Audit Report
-```
-
-### Step 4 — Verification & Delivery
-```
-Inputs:  Anti-Slop Audit Report
-Actions:
-  - Đảm bảo các khuyến nghị tuân thủ 100% stack khai báo trong DEV_PROFILE.md.
-  - Bàn giao báo cáo cho kỹ sư frontend.
-Exit: SUCCESS
-```
-
----
-
-## Prompt Template
-
-```
-UI Component / Trang: [Đường dẫn file component hoặc page cần kiểm tra]
-Design Tokens:       [File cấu hình tailwind.config / css tokens / DESIGN.md]
-Vấn đề nghi ngờ:    [Bị lệch spacing, nút bấm xấu, thiếu hover state, ...]
-```

package/.agents/skills/qk-ui-audit/capability.yaml

@@ -1,23 +0,0 @@
-# Auto-generated from SKILL.md frontmatter
-schema_version: 1
-id: "qk-ui-audit"
-version: "9.1.0"
-description: "Kiểm toán giao diện (UI) với 57-check Anti-Slop checklist — fail nếu score < 76/85 base."
-tools:
-  - "filesystem"
-  - "terminal"
-knowledge:
-  owns:
-    - "ui-standards"
-    - "anti-slop"
-  references:
-    - "design-system"
-    - "security"
-    - "anti-patterns"
-eval:
-  scorecard: "evals/scorecard.yaml"
-decision_boundary:
-  owns:
-    - "qk-ui-audit"
-  does_not_own: []
-  conflicts_with: []

package/.agents/skills/qk-ui-audit/evals/scorecard.yaml

@@ -1,26 +0,0 @@
-name: qk-ui-audit-eval
-description: Đánh giá khả năng rà soát UI Anti-Slop
-version: 9.1.0
-threshold: 90 # Đóng vai trò chốt chặn UI chất lượng cao, không khoan nhượng với Slop
-
-metrics:
-  - id: design_contract_compliance
-    name: Tuân thủ Hợp đồng Thiết kế (DESIGN.md)
-    description: Có bắt lỗi chính xác các giá trị hardcode không nằm trong Design Tokens không?
-    weight: 40
-    criteria:
-      - Tìm và đánh dấu các mã màu hex, px hardcode vi phạm token của DESIGN.md (40đ)
-
-  - id: anti_slop_detection
-    name: Nhận diện AI-Slop (Generic aesthetics)
-    description: Có phát hiện được các thiết kế chung chung, xám xịt, viền nhạt nhòa không?
-    weight: 30
-    criteria:
-      - Trừ điểm nặng các thẻ card thiếu chiều sâu, text quá nhỏ, hoặc thiếu hover state (30đ)
-
-  - id: accessibility_check
-    name: Kiểm tra Trải nghiệm Tiếp cận (A11y)
-    description: Có rà soát các thẻ ARIA, độ tương phản và Semantic HTML không?
-    weight: 30
-    criteria:
-      - Cảnh báo các element tương tác (button, link) thiếu roles, alt text hoặc độ tương phản < 4.5:1 (30đ)

package/.agents/skills/qk-ui-audit/references/anti-slop-checklist.md

@@ -1,136 +0,0 @@
-# Anti-Slop Checklist — 57 Checks (99 pts max)
-> Referenced by: `qk-ui-audit/SKILL.md`
-> Purpose: Full inspection checklist for detecting generic AI-generated UI
-
----
-
-## Category P1: Accessibility (15 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 1 | All images have `alt` text (non-empty, descriptive) | 2 | grep `alt=""` or `alt={` in JSX |
-| 2 | Color contrast ratio ≥ 4.5:1 (text) / 3:1 (large text) | 3 | Check computed HSL values vs background |
-| 3 | All interactive elements have `aria-label` if no visible text | 2 | grep for `<button>` without text content |
-| 4 | Focus states are visible — `outline: none` not used without replacement | 2 | Check CSS for `outline: none` |
-| 5 | Keyboard navigation works (Tab order logical) | 2 | `tabIndex` only for non-interactive elements |
-| 6 | `role` attributes used for non-semantic elements (div acting as button) | 2 | grep `onClick` on non-button elements |
-| 7 | Form inputs have associated `<label>` (htmlFor) | 2 | grep `<input` without surrounding `<label` |
-
----
-
-## Category P2: Layout & Spacing (15 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 8 | No hardcoded pixel spacing — uses design token scale (4, 8, 16, 24...) | 3 | grep `padding: [0-9]px` or `margin: [0-9]px` |
-| 9 | CSS Grid or Flexbox used — no `position: absolute` for layout | 2 | grep `position: absolute` in layout context |
-| 10 | Consistent spacing unit (not mixing 5px, 7px, 11px random values) | 2 | Check spacing values across components |
-| 11 | No `div` soup — semantic HTML used (article, section, nav, main, aside) | 2 | grep excessive `<div>` nesting |
-| 12 | Component has defined max-width (not stretching to 100vw on desktop) | 2 | Check container max-width |
-| 13 | Whitespace feels intentional — content is not cramped | 2 | Visual check or spacing scale adherence |
-| 14 | No horizontal overflow on mobile (320px viewport) | 2 | Check for `overflow-x: hidden` band-aids |
-
----
-
-## Category P3: Typography & Colors (15 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 15 | Font families from DESIGN.md only (no Times New Roman, Arial default) | 3 | grep `font-family:` vs DESIGN.md |
-| 16 | Font sizes use token scale — no arbitrary px values | 2 | grep `font-size: [0-9]` raw values |
-| 17 | Colors use DESIGN.md tokens — no hardcoded hex (#ff0000) or rgb() | 3 | grep `#[0-9a-fA-F]{3,6}` in CSS/JSX |
-| 18 | No pure black (#000000) or pure white (#ffffff) — use near-black/near-white | 2 | grep `#000\|#000000\|#fff\|#ffffff` |
-| 19 | Color palette is harmonious — not "rainbow slop" (5+ unrelated colors) | 2 | Count distinct hues in palette |
-| 20 | Heading hierarchy correct — one `<h1>` per page, no skipping levels | 1 | grep heading tags per page |
-| 21 | Line height appropriate (1.4–1.7 for body, 1.1–1.3 for headings) | 2 | Check `line-height` values |
-
----
-
-## Category P4: Interactions & Animations (15 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 22 | Every button has hover state — color shift OR shadow change | 2 | grep `:hover` for button styles |
-| 23 | Every button has focus-visible state | 2 | grep `:focus-visible` |
-| 24 | Active/pressed state exists for clickable elements | 1 | grep `:active` |
-| 25 | Transition duration from DESIGN.md — not raw `0.3s` everywhere | 2 | grep `transition:` vs token values |
-| 26 | No janky instant state changes — all transitions ≥ 100ms, ≤ 400ms | 2 | grep transition durations |
-| 27 | Animations respect `prefers-reduced-motion` | 2 | grep `prefers-reduced-motion` in CSS |
-| 28 | Links have hover underline OR color change (not just cursor pointer) | 2 | grep `a:hover` styles |
-| 29 | Form validation feedback uses animation (shake, pulse) not just color | 2 | Check error state CSS |
-
----
-
-## Category P5: Anti-Slop Detection (15 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 30 | No Bootstrap/generic UI kit classes (btn-primary, card, badge) | 2 | grep `class="btn\|card\|badge\|modal"` |
-| 31 | No Tailwind utility spam (> 15 classes on single element) | 2 | grep extremely long className strings |
-| 32 | No Lorem Ipsum or placeholder text in production UI | 3 | grep `Lorem ipsum\|placeholder text` |
-| 33 | Color palette is NOT blue-gray default (slop signature) | 2 | Check if primary color is `hsl(210, *)` Tailwind default |
-| 34 | Layout is NOT a simple centered card on white background (slop template) | 2 | Structural check |
-| 35 | Gradient usage is intentional — not `linear-gradient(to bottom, #fff, #f0f0f0)` | 2 | grep gradient definitions |
-| 36 | No `box-shadow: 0 2px 4px rgba(0,0,0,0.1)` everywhere (Bootstrap shadow) | 2 | grep this exact shadow pattern |
-
----
-
-## Category P6: Performance & Best Practices (10 pts)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 37 | Images have `loading="lazy"` for below-fold content | 2 | grep `<img` without `loading` |
-| 38 | No `!important` overrides (except CSS reset) | 1 | grep `!important` in component CSS |
-| 39 | No inline styles except dynamic values | 2 | grep `style={{` in non-dynamic contexts |
-| 40 | Component file ≤ 300 lines | 1 | Line count check |
-| 41 | No unused CSS classes or dead styles | 1 | Visual code scan |
-| 42 | SVG icons used instead of emoji for UI elements | 1 | grep emoji characters in JSX |
-| 43 | `key` prop used correctly in lists (not index as key for dynamic lists) | 2 | grep `.map(` + check key prop |
-
----
-
-## Category BONUS: Mobile & Cross-Browser (5 pts extra)
-
-| # | Check | Points | How to Verify |
-|---|-------|--------|---------------|
-| 44 | Touch targets ≥ 44×44px on mobile | 1 | Check button/link dimensions |
-| 45 | No hover-only interactions (mobile has no hover) | 1 | Check if critical info only on hover |
-| 46 | Custom fonts have system-ui fallback | 1 | Check font-family fallback stack |
-| 47 | Input types correct: email, tel, number, date (triggers correct mobile keyboard) | 1 | grep `<input type=` |
-| 48 | No `position: fixed` elements blocking content on small screens | 1 | Check fixed/sticky headers/footers |
-
----
-
-## Extended Checks (9 additional points for comprehensive audit)
-
-| # | Check | Category |
-|---|-------|---------|
-| 49 | Loading skeleton matches actual content shape (not generic gray bars) | UX |
-| 50 | Empty state has illustration + helpful action button (not just "No data") | UX |
-| 51 | Error state specifies the error — not generic "Something went wrong" | UX |
-| 52 | Success feedback is clear — confirmation message or visual indicator | UX |
-| 53 | Destructive actions (delete) require confirmation dialog | Safety |
-| 54 | Modals/dialogs have accessible `role="dialog"` + focus trap | A11y |
-| 55 | Scrollable areas have visible scroll indicator | UX |
-| 56 | Data tables have sortable columns if > 10 rows | UX |
-| 57 | Forms have autofocus on first input (modal forms) | UX |
-
----
-
-## Scoring Summary
-
-| Category | Max Points |
-|----------|-----------|
-| P1 Accessibility | 15 |
-| P2 Layout & Spacing | 15 |
-| P3 Typography & Colors | 15 |
-| P4 Interactions & Animations | 15 |
-| P5 Anti-Slop Detection | 15 |
-| P6 Performance | 10 |
-| **Base Total** | **85** |
-| BONUS Mobile | +5 |
-| Extended (49–57) | +9 |
-| **Maximum Possible** | **99** |
-
-**Pass threshold: ≥ 76/85 base (90%)**
-**Fail: < 76 / 85 — requires redesign, not patch**