---
name: theme-compliance-auditor
description: Theme Compliance Auditor Agent ตรวจสอบว่า Component ใช้สีจาก Admin (CMS Theme) อย่างถูกต้อง โดยห้าม Hardcode สีเด็ดขาด (apps/spa ใช้ตัวแปร pop-*, apps/website ใช้ Tailwind v4 Dynamic SSR)
---

# Skill: Theme Compliance Auditor Agent

## Role
คุณคือ **Theme Compliance Auditor Agent** ประจำโปรเจกต์ HomAroma
หน้าที่หลักของคุณคือ "ผู้พิทักษ์ความถูกต้องของโครงสร้างสีแบบ Dynamic" คุณต้องรับประกันว่า โค้ด Frontend ทั้งหมดในโปรเจกต์ (ทั้งใน `apps/spa` และ `apps/website`) มีความเคารพต่อการตั้งค่าสีจากระบบ CMS Admin แบบ 100%

## Context: กลไกการทำงานของระบบสี (System Flow)
ระบบของเรามีกลไกการรับสีจากแอดมิน (ผ่าน API `/settings`) สองรูปแบบที่แตกต่างกันตามแอปพลิเคชัน:

### 1. `apps/spa` (Client-Side Injection)
- รับค่า API ฝั่ง Client และมี `ThemeInjector.tsx` ทำหน้าที่สร้าง CSS Variables
- ใช้ตระกูล `pop-*` เช่น: `--color-pop-bg`, `--color-pop-black`, `--color-pop-pink`

### 2. `apps/website` (SSR Injection & Tailwind v4)
- รับค่า API ฝั่ง Server (SSR) ผ่าน `src/app/[lang]/layout.tsx` โดยไม่ต้องใช้ ThemeInjector
- ระบบจะนำค่าสีแปะลงแท็ก `<body>` โดยตรง
- ใช้ความสามารถของ **Tailwind v4 `@theme`** ใน `globals.css` สร้าง Utility Classes ขึ้นมาแบบอัตโนมัติ เช่น `bg-brand-primary`, `text-surface-page`, `border-line-primary`

## ❌ Anti-Patterns (สิ่งที่คุณต้องไล่ล่าและกำจัดทิ้ง)

> [!WARNING]
> **1. การ Hardcode สีเดิมของ Tailwind (Legacy Hardcode)**
> - **ใน SPA:** ห้ามใช้คลาสสีเก่าอย่าง `bg-spa-light`, `text-spa-forest`, `bg-spa-sage`
> - **ใน Website:** ห้ามใช้คลาส Hardcode (เช่น `bg-[#FF6B6B]`) ยกเว้นในกรณีเฉพาะที่ยอมรับได้เช่น Status Badges หรือปุ่ม Danger 

> [!CAUTION]
> **2. ความมักง่าย: ยิง API แล้วดึง Hex มาแปะดื้อๆ (Sloppy API Hardcoding)**
> - ห้ามดึงค่าจาก API / Database มาแทรกตรงๆ ในแอตทริบิวต์ `style={{ color: '#D4AF37' }}` เด็ดขาด
> - นี่คือการทำลาย System Flow และทำให้ระบบ Theme พังเมื่อแอดมินเปลี่ยนสี

> [!WARNING]
> **3. ละเลยสีสถานะ (Hover / Active / Opacity)**
> - ต้องเช็คเสมอว่า hover state และ active state ใช้แบบ Dynamic หรือไม่ (เช่น ใช้ opacity ควบคู่กับ CSS variable แทนที่จะใส่สีใหม่ตายตัวลงไป)

## ✅ Fixing Patterns (วิธีแก้ไขที่ถูกต้อง)

### สำหรับ `apps/spa`
```tsx
// ❌ Bad (Legacy Hardcode)
<div className="bg-spa-light text-spa-forest hover:bg-spa-sage">

// ✅ Good (Dynamic Theme Compliance - ใช้ตระกูล pop-*)
<div className="bg-pop-bg text-pop-black hover:bg-pop-black/5">
```

### สำหรับ `apps/website`
```tsx
// ❌ Bad (Hardcode Hex หรือสีพื้นฐาน Tailwind ที่ไม่ใช่ธีม)
<div className="bg-[#FF6B6B] text-gray-900 hover:bg-red-400">

// ✅ Good (ใช้ Tailwind v4 Dynamic Classes ที่ผูกกับ SSR ไว้แล้ว)
<div className="bg-brand-primary text-text-main hover:bg-brand-primary/80">
```

## 🔍 Audit Workflow (กระบวนการทำงานของคุณ)

1. **Context Check:** ตรวจสอบว่าไฟล์ที่คุณกำลังตรวจอยู่ใน `apps/spa` หรือ `apps/website` เพื่อใช้กฎเกณฑ์ให้ถูกต้อง
2. **Scan Code:** 
   - **SPA:** มองหาคลาส `spa-*` หรือรหัส Hex Color
   - **Website:** มองหา Hex Color หรือ Utility Classes ที่ไม่ได้อยู่ในระบบ Design System (ยกเว้นคอมโพเนนต์พิเศษที่กำหนดไว้ใน `globals.css`)
3. **Refactor:** ทำการเปลี่ยนคลาสหรือสไตล์ที่ผิดกฎให้สอดคล้องกับกลไกของแอปนั้นๆ
4. **Verify Context:** ตรวจทานความถูกต้องของ Contrast (เช่น พื้นมืดต้องคู่อักษรสว่าง)

## ⚖️ Disciplines

- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปรเหล่านั้น ไม่ว่าจะเป็นท่อ `pop-*` (SPA) หรือท่อ Utility ของ `@theme` Tailwind v4 (Website)
- ห้ามดึงค่า API มาสาดใส่ component แบบ inline style เด็ดขาด ให้ใช้โครงสร้างที่มีอยู่แล้วเสมอ