Enforce Rules

NHẬN TASK (sửa / tạo mới / review / kiểm tra showcase/component/demo)
  │
  ├─ §1 PRE-WORK GATE (bắt buộc TRƯỚC khi code)
  │   ├─ Đọc enforce-rules.md
  │   ├─ Đọc knowledge-rules.json (query section liên quan)
  │   ├─ Đọc ux-research SKILL.md (§5, §6, §7)
  │   ├─ Check variables.css CỦA SHOWCASE (không phải DS core)
  │   └─ Output: "PRE-WORK GATE ✅ PASSED"
  │
  ├─ THỰC HIỆN CODE
  │   └─ Mỗi quyết định phải cite rule ID (VD: "theo R3, min 44px")
  │
  └─ §2 POST-WORK AUDIT (bắt buộc SAU khi code)
      ├─ ENF-1: Check BS-1→5, R3, T10/T11, F1/F3
      ├─ ENF-2: Scan icon text
      ├─ ENF-3: Check inline components
      ├─ ENF-4: Check preview entry exists (component work)
      ├─ ENF-5: Audit CSS class hardcodes (pseudo-elements, easing, sizing)
      └─ Output: Audit report table
          │
          ├─ ✅ ALL PASS → proceed to /post-change
          └─ ❌ FAIL → STOP → report violations → user review

☐ Đọc ux-research SKILL.md — focus:
  • §5 Component Behavior (states, keyboard, button sizes BS-1→BS-5)
  • §6 Typography (T1 font ≥14px, T10/T11 title sizes)
  • §7 Accessibility (F1 focus ring, F3 focus trap, ARIA patterns)
  • §2 Interaction (6 states, touch targets)

## List tất cả components hiện có trong DS core
dir /b "design-system\components md\*.md" | findstr /v "ATOMIC-MAPPING COMPONENT-ROADMAP"

☐ Đọc design-system/components md/ATOMIC-MAPPING.md
  → Biết token mapping cho từng component
  → Biết UI Layer + Density Tier assignment

🛡️ PRE-WORK GATE: ✅ PASSED
  ☑ UX Rules đã đọc (§5, §6, §7, §2)
  ☑ DS Components: {N} components available
  ☑ ATOMIC-MAPPING.md đã đọc
  → Proceeding to implementation...

☐ Font-size ≥ 14px cho body/interactive text? (T1)
☐ Heading hierarchy đúng? (T4: h1 → h2 → h3, không skip)
☐ Focus ring dùng var(--ring)? (F1)
☐ ARIA roles/attributes đầy đủ? (F3, B7)
☐ Touch targets ≥ 44×44px? (R3)
☐ Button sizes theo BS-1→BS-5? (§5)
☐ Action group placement đúng? (AG-1→AG-3)
☐ prefers-reduced-motion nếu có animation? (M1)

✕ × ▼ ▾ → ← ↑ ↓ ‹ › « » − • ● ○ ■ □ ★ ☆ ✓ ✗ ☰ ⋮ ⋯ ▶ ◀ △ ▽ ◆ ◇

<!-- ❌ SAI — icon text -->
<button class="btn-close">✕</button>
<span class="icon">▼</span>
<a class="nav-link">← Back</a>

<!-- ✅ ĐÚNG — SVG icon -->
<button class="btn-close" aria-label="Close">
  <svg><use href="#ic-close"/></svg>
</button>
<span class="icon"><svg><use href="#ic-chevron-down"/></svg></span>
<a class="nav-link">
  <svg><use href="#ic-arrow-left"/></svg> Back
</a>

☐ Có class .dropdown / .modal / .tabs / .select / .dialog / .toast /
  .accordion / .drawer / .popover / .tooltip mà KHÔNG reference DS core?
☐ Có viết CSS cho component behavior (hover states, focus trap, transitions)
  mà DS core đã có sẵn?
☐ Có duplicate CSS rules cho component đã tồn tại trong ATOMIC-MAPPING.md?
☐ [DOCS] Preview HTML trong component-previews.js có tự tạo component
  thay vì dùng DS class/token?
☐ [STYLE/THEME] Token JSON có ref tới component chưa tồn tại trong
  ATOMIC-MAPPING.md? (VD: tạo --comp-xyz-* cho comp chưa có spec)

Component cần dùng?
  │
  ├─ Có trong DS whitelist (Step 2)?
  │   → ✅ Dùng trực tiếp, KHÔNG viết CSS mới
  │
  └─ KHÔNG có trong DS whitelist?
      → ❌ STOP — KHÔNG viết inline workaround
      → Báo user: "Component {X} chưa có trong DS core.
         Đề xuất tạo mới theo component-lifecycle workflow."
      → Chờ user approve → tạo via component-lifecycle

  [DOCS context] Preview HTML tự tạo component markup?
      → ❌ STOP — preview PHẢI dùng DS class patterns
      → Nếu DS chưa có → báo user, KHÔNG viết workaround inline

  [STYLE/THEME context] Token ref tới comp chưa tồn tại?
      → ❌ STOP — tạo comp spec TRƯỚC (component-lifecycle),
         rồi mới tạo tokens

☐ Component có entry trong component-previews.js?
☐ Preview HTML dùng DS tokens (KHÔNG hardcode px/colors)?
☐ build-docs.js output hiển thị "N/52 components have live previews"?
☐ Preview bao gồm đủ states: default, hover, disabled?
☐ Icon dùng icon() helper (Lucide SVG, KHÔNG text emoji)?

☐ Pseudo-element positioning: có `position: absolute` + `top/left: Npx`?
  → Fix: dùng `display: grid; place-content: center`
☐ Hardcoded easing: có `ease`, `ease-in-out`, `ease-out` raw?
  → Fix: dùng `var(--easing-standard)`
☐ Hardcoded duration: có `150ms`, `200ms`, `300ms` raw?
  → Fix: dùng `var(--duration-fast-1)`, `var(--duration-normal-2)`, etc.
☐ Hardcoded sizing: có `40px`, `48px`, `20px` raw (KHÔNG trong spacing scale)?
  → Fix: dùng `calc(var(--spacing) * N)` hoặc `var(--spacing-N)`
☐ Missing bg/fg pair: có `background: var(--primary)` mà thiếu `color:`?
  → Fix: thêm `color: var(--primary-foreground)`

## Tìm hardcoded px (trừ border-width, shadow, 0px)
Select-String '\d+px' design-system/scripts/docs/template/preview-extras.css | Where-Object { $_ -notmatch 'spacing|radius|border-width|shadow|0px|var\(' }

## Tìm raw easing
Select-String 'ease[^-]|ease;|ease-in-out|ease-out' design-system/scripts/docs/template/preview-extras.css

☐ Component có `## Slot Map (Figma ↔ Code)` section trong spec .md?
   → Nếu KHÔNG → thêm theo format chuẩn (xem app-bar.md làm mẫu)
☐ Slot names trong spec match slot-manifest.json?
   → Đối chiếu: Figma Slot name + data-slot value + CSS Class
☐ Component có entry trong code-connect.config.json?
   → Nếu KHÔNG → thêm entry mới với slots + template
☐ HTML skeleton/preview dùng data-slot attributes?
   → Mỗi slot element PHẢI có data-slot="{component}-{slot-name}"

☐ HTML output có data-slot attributes cho structural slots?
   → Structural: data-slot cho header, body, footer (nếu component hỗ trợ)
☐ Slot nesting đúng hierarchy (root → structural → inner)?
   → VD: data-slot="card" > data-slot="card-header" > data-slot="card-title"
☐ Không tự tạo slot name mới ngoài slot-manifest.json?
   → Slot name PHẢI tồn tại trong manifest hoặc được đăng ký trước

☐ Component slot CSS class references (.slot-header, .slot-body, .slot-footer)
   đều tồn tại trong components.css Slot System section?

Component output có slots?
  │
  ├─ Có trong slot-manifest.json?
  │   → ✅ Dùng data-slot values từ manifest
  │
  └─ KHÔNG có trong manifest?
      → ❌ STOP — KHÔNG tự tạo slot name
      → Cập nhật slot-manifest.json TRƯỚC
      → Sau đó thêm Slot Map vào spec .md
      → Sau đó thêm entry vào code-connect.config.json

### 🛡️ Enforcement Audit Report

**Scope**: {file/folder đã audit}
**Date**: {YYYY-MM-DD}

| Rule | Status | Details |
|------|--------|---------|
| ENF-1 UX Compliance | ✅ PASS / ❌ FAIL | {N violations found} |
| ENF-2 Icon Text Ban | ✅ PASS / ❌ FAIL | {N text icons found} |
| ENF-3 Inline Component | ✅ PASS / ❌ FAIL | {N inline components} |
| ENF-4 Preview Gate | ✅ PASS / ❌ FAIL | {N components missing previews} |
| ENF-5 CSS Hardcode | ✅ PASS / ❌ FAIL | {N hardcoded values in CSS} |
| ENF-6 Slot Compliance | ✅ PASS / ❌ FAIL | {N missing slot maps / data-slot / CC entries} |

#### ENF-4 Violations (nếu có)
| # | Component | File | Issue |
|---|-----------|------|-------|
| 1 | checkbox  | component-previews.js | Missing preview entry |

#### ENF-5 Violations (nếu có)
| # | File | Line | Found | Fix |
|---|------|------|-------|-----|
| 1 | preview-extras.css | 874 | `top: 1px; left: 5px` | `display: grid; place-content: center` |
| 2 | preview-extras.css | 860 | `ease` | `var(--easing-standard)` |

VERDICT: ✅ ALL PASS → proceed to /post-change
         ❌ FAIL → {action required}