homaroma/.agents/skills/theme-compliance-auditor/SKILL.md

name, description

name	description
theme-compliance-auditor	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

// ❌ 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

// ❌ 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 เด็ดขาด ให้ใช้โครงสร้างที่มีอยู่แล้วเสมอ