@champpaba/claude-agent-kit 1.4.0 → 1.4.2

package/.claude/templates/page-plan-example.md

@@ -98,6 +98,137 @@
 
 ---
 
+## 2.5. 📐 Layout Wireframe
+
+> **Visual Blueprint:** Review this layout BEFORE agent implements
+
+### Desktop View (>1024px)
+```
+┌──────────────────────────────────────────────────────────────┐
+│ [Logo]   [Home] [Features] [Pricing] [FAQ]   [Start Free]  │  ← Navbar (transparent on hero)
+├──────────────────────────────────────────────────────────────┤
+│                                                              │
+│                    Master TOEIC with AI                      │  ← Hero (h-screen)
+│          Experience exam-quality practice tests              │     Background image
+│                                                              │     Text overlay center
+│              [Start Free Test →]                            │     Primary CTA
+│                                                              │
+├──────────────────────────────────────────────────────────────┤
+│       Why Choose Us                                          │  ← Feature Section
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │     (max-w-7xl, py-24)
+│  │  📊      │  │  🎯      │  │  ⚡       │                  │     3-col grid
+│  │  Real    │  │  Smart   │  │  Fast    │                  │
+│  │  Exams   │  │  AI      │  │  Results │                  │
+│  │  [desc]  │  │  [desc]  │  │  [desc]  │                  │
+│  └──────────┘  └──────────┘  └──────────┘                  │
+├──────────────────────────────────────────────────────────────┤
+│       How It Works                                           │  ← Timeline Section
+│                                                              │     (max-w-6xl, py-24)
+│  1. Sign Up  →  2. Take Test  →  3. Get Score              │     Horizontal timeline
+│    [icon]         [icon]          [icon]                    │
+│    [desc]         [desc]          [desc]                    │
+├──────────────────────────────────────────────────────────────┤
+│       Student Success Stories                                │  ← Testimonials
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │     (full-width bg)
+│  │ [Photo]  │  │ [Photo]  │  │ [Photo]  │                  │     3 cards, carousel
+│  │ "Quote"  │  │ "Quote"  │  │ "Quote"  │                  │
+│  │ - Name   │  │ - Name   │  │ - Name   │                  │
+│  │ ⭐⭐⭐⭐⭐ │  │ ⭐⭐⭐⭐⭐ │  │ ⭐⭐⭐⭐⭐ │                  │
+│  └──────────┘  └──────────┘  └──────────┘                  │
+├──────────────────────────────────────────────────────────────┤
+│       Frequently Asked Questions                             │  ← FAQ Accordion
+│                                                              │     (max-w-4xl, py-24)
+│  ▼ How does the AI scoring work?                            │
+│    [Answer text...]                                          │
+│  ▶ Is it free to try?                                       │
+│  ▶ How accurate are the scores?                             │
+├──────────────────────────────────────────────────────────────┤
+│       Ready to Start?                                        │  ← CTA Section
+│    [Enter your email]  [Get Started →]                      │     (colored bg, py-20)
+│                                                              │
+├──────────────────────────────────────────────────────────────┤
+│ [Company] [About] [Contact]    [Facebook] [Twitter] [IG]    │  ← Footer
+│ © 2024 TOEIC Master. All rights reserved.                   │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### Mobile View (<768px)
+```
+┌────────────────────┐
+│ [Logo]        [☰] │  ← Navbar (hamburger)
+├────────────────────┤
+│   Master TOEIC     │  ← Hero (h-[600px])
+│   with AI          │     Smaller text
+│                    │     Centered
+│  [Start Free →]   │     Full-width CTA
+│                    │
+├────────────────────┤
+│  Why Choose Us     │  ← Features
+│ ┌────────────────┐ │     (1-col stack)
+│ │   📊 Real      │ │     Full-width cards
+│ │   Exams        │ │
+│ │   [desc]       │ │
+│ └────────────────┘ │
+│ ┌────────────────┐ │
+│ │   🎯 Smart     │ │
+│ │   AI           │ │
+│ └────────────────┘ │
+│ ┌────────────────┐ │
+│ │   ⚡ Fast      │ │
+│ │   Results      │ │
+│ └────────────────┘ │
+├────────────────────┤
+│  How It Works      │  ← Timeline (vertical)
+│  1. Sign Up        │
+│     [icon]         │
+│     [desc]         │
+│     ↓              │
+│  2. Take Test      │
+│     [icon]         │
+│     ↓              │
+│  3. Get Score      │
+│     [icon]         │
+├────────────────────┤
+│  Success Stories   │  ← Testimonials
+│ ┌────────────────┐ │     (carousel, 1 at a time)
+│ │  [Photo]       │ │     Swipe left/right
+│ │  "Quote..."    │ │
+│ │  - Name        │ │
+│ │  ⭐⭐⭐⭐⭐     │ │
+│ └────────────────┘ │
+│  ○ ● ○  (dots)    │
+├────────────────────┤
+│  FAQ               │  ← Accordion (full-width)
+│  ▼ How does AI... │
+│    [Answer]        │
+│  ▶ Is it free?    │
+│  ▶ How accurate?  │
+├────────────────────┤
+│  Ready to Start?   │  ← CTA (stacked)
+│  [Email input]     │
+│  [Get Started →]   │
+├────────────────────┤
+│  Footer (stacked)  │
+│  [Links]           │
+│  [Social]          │
+│  © 2024            │
+└────────────────────┘
+```
+
+### Responsive Behavior
+
+| Section | Desktop (>1024px) | Mobile (<768px) |
+|---------|------------------|-----------------|
+| **Navbar** | Full menu horizontal | Hamburger menu |
+| **Hero** | h-screen, large text | h-[600px], smaller text |
+| **Features** | 3-col grid | 1-col stack |
+| **Timeline** | Horizontal (→) | Vertical (↓) |
+| **Testimonials** | 3 visible, slider | 1 visible, swipe |
+| **FAQ** | max-w-4xl | Full-width |
+| **CTA** | Horizontal form | Stacked form |
+
+---
+
 ## 3. 📦 Assets to Prepare (คุณต้องเตรียม)
 
 ### Images

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 ChampPABA
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 ChampPABA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.