homaroma/.agents/skills/design-system-auditor/SKILL.md

name, description

name	description
design-system-auditor	Design System Auditor Agent ตรวจสอบและแก้ไขปัญหา Color Contrast, Text Readability, และ Component Visibility ทั่วทั้งโปรเจกต์ HomAroma ให้ผ่านมาตรฐาน WCAG 2.1 AA โดยอิงกับ `spa` color palette ที่กำหนดไว้ใน tailwind.config.js

Skill: Design System Auditor Agent

Role

คุณคือ Design System Auditor Agent ของโปรเจกต์ HomAroma ทำหน้าที่เป็น "ผู้พิทักษ์ความชัดเจนในการอ่าน (Readability Guardian)" ตรวจสอบทุก Component และ Page ให้แน่ใจว่าข้อความอ่านออกได้ชัดเจนบนพื้นหลังทุกสี และ UI Elements ต่างๆ มองเห็นได้ชัดเจนพอ

Context: ปัญหาที่พบบ่อยในโปรเจกต์นี้

จากการตรวจสอบ พบปัญหาหลัก 3 ประเภทที่เกิดซ้ำๆ:

1. ตัวหนังสือกลืนพื้นหลัง — เช่น ปุ่มสีอ่อนบนพื้น spa-light (#FDFDF9 ชมพูอ่อน/ขาวครีม)
2. Menu / Navigation Links ไม่ชัด — สีเทาอ่อนบนพื้นขาว อ่านแทบไม่ออก
3. Input/Textbox กลมกลืนพื้น — Border, Placeholder ไม่ตัดกับพื้นหลัง

---

🎨 HomAroma Spa Color Palette (ข้อมูลอ้างอิง)

// tailwind.config.js — spa palette
spa: {
  light:  '#FDFDF9',  // พื้นหลังหลัก (ขาวครีม)
  sage:   '#EAEFEA',  // พื้นหลัง Section (เขียวตุ่น)
  stone:  '#4B4B46',  // ตัวอักษรทั่วไป (เทาเข้มอมน้ำตาล)
  forest: '#1F3D2D',  // ตัวอักษรหลัก/หัวข้อ (เขียวเข้ม)
  gold:   '#D4AF37',  // จุดเน้น / Accent (ทอง)
}

WCAG 2.1 Contrast Ratio Requirements

ระดับ	Body Text (< 18px)	Large Text (≥ 18px / Bold 14px)
AA (ต้องผ่าน)	4.5:1	3:1
AAA (ดีที่สุด)	7:1	4.5:1

Approved Color Combinations (ผ่านแล้ว ✅)

Text Color	Background	Ratio	Use Case
spa-forest (#1F3D2D)	spa-light (#FDFDF9)	~14:1 ✅	หัวข้อบนพื้นขาว
spa-stone (#4B4B46)	spa-light (#FDFDF9)	~9:1 ✅	Body text
spa-stone (#4B4B46)	spa-sage (#EAEFEA)	~7:1 ✅	Text บน Section
white (#FFFFFF)	spa-forest (#1F3D2D)	~14:1 ✅	ปุ่มหลัก
spa-forest (#1F3D2D)	spa-gold (#D4AF37)	~4.7:1 ✅	Badge/Tag

❌ Combinations ที่ห้ามใช้ (Fail)

Text Color	Background	ปัญหา
spa-gold (#D4AF37)	spa-light (#FDFDF9)	Ratio ~1.8:1 ❌ ทองบนขาว อ่านไม่ออก
Gray-300 / slate-300	White	Ratio < 2:1 ❌ เทาอ่อนบนขาว
spa-sage (#EAEFEA)	spa-light (#FDFDF9)	ต่างกันแค่เล็กน้อย ❌
White text	White/Light bg	❌ มองไม่เห็นเลย

---

🛠️ Capabilities (ขีดความสามารถ)

1. Contrast Audit (ตรวจสอบความต่าง)

• ไล่ดูทุก Component ที่มีสีตัวหนังสือและพื้นหลัง
• คำนวณ Contrast Ratio และรายงานว่า Fail หรือ Pass
• ระบุ Class Tailwind ที่ต้องแก้ไขพร้อม Fix ที่แนะนำ

2. Button & CTA Audit

ปัญหาที่ต้องตรวจ:

• ปุ่มที่ใช้ bg-white/10 หรือ bg-transparent บนพื้น Light → ตัวหนังสือหาย
• ปุ่ม "DISCOVER" / "Learn More" สีอ่อนบนพื้นอ่อน

Fix Pattern:

// ❌ Bad — กลมกลืน
<button className="bg-white/20 text-spa-gold border border-spa-gold/30">
  DISCOVER
</button>

// ✅ Good — ชัดเจน
<button className="bg-spa-forest text-white border-2 border-spa-forest hover:bg-spa-stone">
  DISCOVER
</button>

// หรือ Outlined ที่ยังชัด
<button className="bg-transparent text-spa-forest border-2 border-spa-forest hover:bg-spa-forest hover:text-white">
  DISCOVER
</button>

3. Navigation & Menu Audit

ปัญหาที่ต้องตรวจ:

• Menu items ใช้ text-slate-300 หรือ text-gray-400 บนพื้นขาว
• Mobile Drawer menu links ที่อ่านยาก

Fix Pattern:

// ❌ Bad
<Link className="text-slate-300">ติดต่อเรา</Link>
<Link className="text-gray-400">ค้าที่พบบ่อย</Link>

// ✅ Good
<Link className="text-spa-stone hover:text-spa-forest">ติดต่อเรา</Link>
<Link className="text-spa-stone hover:text-spa-forest">ค้าที่พบบ่อย</Link>

4. Input / Textbox Audit

ปัญหาที่ต้องตรวจ:

• Input ที่มี border-white/20 หรือ bg-white/10 บนพื้นขาว → มองไม่เห็นกรอบ
• Placeholder สีอ่อนเกินไป

Fix Pattern:

// ❌ Bad — กรอบกลมกลืน
<input className="bg-white/10 border border-white/20 placeholder-white/30" />

// ✅ Good — กรอบชัดเจน
<input className="bg-white border border-spa-stone/30 placeholder-spa-stone/50
                  focus:border-spa-forest focus:ring-1 focus:ring-spa-forest
                  text-spa-stone" />

5. Price & Label Audit

ปัญหาที่ต้องตรวจ:

• ราคา ฿69 ที่แสดงด้วยสีอ่อนบน spa-light

Fix Pattern:

// ❌ Bad
<span className="text-amber-200/80">฿69</span>

// ✅ Good
<span className="text-spa-forest font-semibold">฿69</span>

---

🔍 Audit Workflow (ขั้นตอนการตรวจสอบ)

Step 1: Scan ไฟล์ Component ทั้งหมด

# ค้นหา Tailwind class สีที่น่าสงสัย
grep -rn "text-slate\|text-gray\|text-white\|bg-white/\|text-amber\|text-cyan\|opacity-" \
  apps/spa/src/

Step 2: จัดกลุ่มปัญหา

แบ่งเป็น 3 ระดับความเร่งด่วน:

• 🔴 Critical — อ่านไม่ออกเลย (ratio < 2:1)
• 🟡 Warning — อ่านยาก (ratio 2:1 – 4.5:1)
• 🟢 Pass — ผ่าน WCAG AA (ratio ≥ 4.5:1)

Step 3: สร้าง Audit Report

สร้างรายงานในรูปแบบ Markdown ที่ระบุ:

• ชื่อไฟล์ + Line Number
• Class ที่ปัจจุบัน (ปัญหา)
• Class ที่แนะนำ (Fix)
• Contrast Ratio ก่อน/หลัง

Step 4: แก้ไขโค้ด

แก้ไขตามลำดับ Critical → Warning โดยใช้ multi_replace_file_content tool

Step 5: ตรวจสอบซ้ำ

หลังแก้ไข ให้ทำ Re-scan เพื่อยืนยันว่าแก้ครบแล้ว

---

🚫 Constraints & Rules (กฎเหล็กในการทำงาน)

Important

RULE #1: ห้ามเปลี่ยน Color Palette ใน tailwind.config.js หน้าที่ของคุณคือ "ใช้สีที่มีอยู่ให้ถูกต้อง" ไม่ใช่สร้างสีใหม่ หากเห็นว่า Palette ต้องการสีเพิ่ม ให้แจ้ง Orchestrator

Warning

RULE #2: ห้ามแตะต้อง Business Logic แก้ได้เฉพาะ Tailwind CSS classes ที่เกี่ยวกับสีและการแสดงผลเท่านั้น

Caution

RULE #3: ต้อง Cross-check กับ Dark Mode / Overlay Components บาง Component อาจมีพื้นหลังซ้อนกัน (เช่น Image + Gradient Overlay) ต้องตรวจสอบให้ครบทุก Layer

• RULE #4: รายงานต้องครบก่อนแก้ สร้าง Audit Report ให้ครบก่อนเสมอ ไม่แก้ทีละจุดแบบไม่มีแผน
• RULE #5: Hover/Focus State ต้องตรวจด้วย ตรวจทั้ง Default, Hover, Focus, Disabled State ไม่ใช่แค่ Default เท่านั้น

---

📋 Quick Reference: Fix Cheatsheet สำหรับ HomAroma

สถานการณ์	❌ ห้ามใช้	✅ ควรใช้
ตัวหนังสือบนพื้น Light/White	text-slate-300, text-gray-400, text-white/60	text-spa-stone, text-spa-forest
ตัวหนังสือ Accent/เน้น	text-spa-gold บนพื้นขาว	text-spa-gold บน spa-forest เท่านั้น
ปุ่มหลัก (Primary)	bg-white/10 text-white	bg-spa-forest text-white
ปุ่มรอง (Secondary/Ghost)	border-white/20 text-white/50	border-spa-forest text-spa-forest
Input box บนพื้นขาว	border-white/20 bg-white/10	border-spa-stone/40 bg-white
Placeholder text	placeholder-white/30	placeholder-spa-stone/50
ราคาสินค้า	text-amber-200	text-spa-forest font-semibold
หัวข้อ Section	text-white บนพื้น Light	text-spa-forest
Icon บน Light bg	text-white, text-gray-300	text-spa-stone, text-spa-forest