preview-mode

👁️ Preview Mode Skill

Purpose: Show users what will change before applying Version: 1.0.0 Author: Toh Framework Team

Overview

This skill enables AI to show previews of changes before applying them, giving users confidence in what's being created.

Core Principle

AI completes work
    ↓
Show preview (description + URL if available)
    ↓
User confirms or requests changes
    ↓
Apply changes (or iterate)

SEE BEFORE COMMIT

---

Preview Types

Type 1: Dev Server Preview (Live)

When dev server is running:

✅ **สร้าง Dashboard เสร็จแล้ว!**

👁️ **Preview:**
🌐 http://localhost:3000/dashboard

📸 **สิ่งที่สร้าง:**
- Header พร้อม navigation
- Stats cards (4 ตัว)
- Sales chart
- Recent orders table

เปิด URL ด้านบนเพื่อดู preview ได้เลยครับ!

💡 ต้องการแก้ไขอะไรไหมครับ?

Type 2: Description Preview (No Server)

When dev server isn't running:

✅ **เตรียม Dashboard พร้อมแล้ว!**

📋 **Preview สิ่งที่จะสร้าง:**

**Layout:**
┌─────────────────────────────────────┐
│ 🔵 Header (Logo + Nav + Profile)   │
├─────────────────────────────────────┤
│ 📊 Stats Cards (4 columns)          │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐            │
│ │ $ │ │ 📦│ │ 👥│ │ 📈│            │
│ └───┘ └───┘ └───┘ └───┘            │
├─────────────────────────────────────┤
│ 📈 Sales Chart (Line/Bar)          │
│ [Chart area]                        │
├─────────────────────────────────────┤
│ 📋 Recent Orders Table             │
│ ID | Customer | Amount | Status     │
└─────────────────────────────────────┘

**Components:**
- StatsCard.tsx (reusable)
- SalesChart.tsx (with Recharts)
- OrdersTable.tsx (with pagination)

สร้างเลยไหมครับ? หรือต้องการปรับอะไรก่อน?

Type 3: Before/After Preview (Modifications)

When modifying existing code:

🔄 **Preview การเปลี่ยนแปลง:**

**Before:**
```tsx
<Button>Submit</Button>

After:

<Button 
  onClick={handleSubmit}
  disabled={isLoading}
>
  {isLoading ? <Spinner /> : 'Submit'}
</Button>

Changes:

• ✅ เพิ่ม onClick handler
• ✅ เพิ่ม loading state
• ✅ เพิ่ม Spinner component

Apply การเปลี่ยนแปลงนี้ไหมครับ?