kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity
Files
014f60b4af14c02b6cfd9cfc27382fe23bd4e090
opencode-skill/skills/website-creator/SKILL.md
Kunthawat Greethong 014f60b4af feat: collaborative design + visual QA screenshot workflow 
Section 2.2 Design Direction:
- Use 2-3 skills TOGETHER to create hybrid design (not separate proposals)
- Combine strengths from ckm:design + ui-ux-pro-max + brand
- Migration: different layout but preserve content + images

Step 9 Visual QA:
- Add screenshot review BEFORE code review
- Use dev-browser/playwright to capture real screenshots
- Visual checklist: layout, typography, color, spacing, images, responsive, interactive, consent popup
- 9.1: Screenshot every page
- 9.2: Visual review from screenshots (not code)
- 9.3: Code review AFTER visual passes
- 9.4: Exploratory QA with dogfood

Sub-skill Routing:
- Updated to reflect collaborative design approach
- Added dev-browser for visual QA
2026-04-22 11:46:09 +07:00

1311 lines
41 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
name: website-creator
description: สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS พร้อม Workflow สำหรับเว็บใหม่และ Migration ครอบคลุม Design System, Content Collections, Auth, SEO, PDPA Compliance และ Deploy
tags: [astro, website, website-development, website-creation, migration, tailwindcss, thai, pdpa, seo, tina-cms, image-generation, picture-it]
category: software-development
related_skills:
- spec-driven-development
- frontend-ui-engineering
- api-and-interface-design
- code-review-and-quality
- performance-optimization
- browser-testing-with-devtools
- shipping-and-launch
---
# Website Creator Skill
สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS
## Architecture
**Astro + Tina CMS Stack:**
- **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components
- **Tina CMS** — Self-hosted Git-based CMS สำหรับ visual content editing
- **Tailwind CSS 4.x** — ใช้ `@tailwindcss/vite` plugin
- **External Consent System** — Consent script จาก `consent.moreminimore.com`
**Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/`
### Astro Project Structure
```
src/
├── components/ # Astro/React components
├── content/ # Tina CMS content (MDX)
│ ├── posts/ # Blog posts
│ ├── pages/ # Static pages
│ └── settings/ # Site settings (JSON)
├── layouts/
│ └── Layout.astro # Main layout
├── pages/
│ ├── index.astro # Home page
│ └── [...slug].astro # Dynamic pages
├── styles/
│ └── global.css # Tailwind v4 + @theme
└── env.d.ts
.tina/ # Tina CMS configuration
├── config.ts # Tina config
└── schema.ts # Content schema
astro.config.mjs # Astro + Tailwind v4 + Tina
package.json
```
### Static vs SSR
- **Static (default):** Pre-built HTML + รันบน CDN
- **SSR/Hybrid:** ใช้เมื่อต้องการ API routes หรือ dynamic content
- **Hybrid:** บางหน้า static บางหน้า dynamic
**สำหรับ Easypanel:** ใช้ `output: 'static'` หรือ `output: 'hybrid'` (ถ้าต้องการ API routes)
## Critical Configuration Rules
### 1. astro.config.mjs (Tailwind v4 + Tina)
```javascript
import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'
import tina from 'tinacms'
export default defineConfig({
integrations: [
tina({
enabled: !!process.env.TINA_TOKEN,
sidebar: { partials: [] },
}),
],
vite: {
plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite
},
output: 'static', // หรือ 'hybrid' ถ้าต้องการ API routes
})
```
### 2. Required Dependencies
```json
{
"dependencies": {
"astro": "^6.1.7",
"@tinacms/cli": "^2.1.0",
"tinacms": "^2.2.0"
},
"devDependencies": {
"@tailwindcss/vite": "^4.0.0",
"tailwindcss": "^4.0.0",
"@astrojs/mdx": "^4.0.0",
"typescript": "^5.6.0"
}
}
```
**CRITICAL: Tailwind v4 ใช้ `@tailwindcss/vite` plugin ไม่ใช่ `@astrojs/tailwind`**
### 3. Tailwind v4 Configuration
Tailwind v4 ไม่มี `tailwind.config.js` — ใช้ CSS `@theme` block แทน:
```css
/* src/styles/global.css */
@import "tailwindcss";
@theme {
/* Fonts */
--font-sans: "Inter", "Noto Sans Thai", system-ui, sans-serif;
/* Colors */
--color-primary-50: #f8fafc;
--color-primary-900: #0f172a;
--color-accent-500: #3b82f6;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
}
```
### 4. Tina CMS Schema
```typescript
// .tina/schema.ts
import { defineSchema } from 'tinacms'
export const schema = defineSchema({
collections: [
{
name: 'post',
label: 'Posts',
path: 'src/content/posts',
format: 'mdx',
fields: [
{ type: 'string', name: 'title', label: 'Title', required: true },
{ type: 'string', name: 'slug', label: 'Slug', required: true },
{ type: 'datetime', name: 'publishedAt', label: 'Published At' },
{ type: 'rich-text', name: 'body', label: 'Body', isBody: true },
],
},
{
name: 'page',
label: 'Pages',
path: 'src/content/pages',
format: 'mdx',
fields: [
{ type: 'string', name: 'title', label: 'Title', required: true },
{ type: 'string', name: 'slug', label: 'Slug', required: true },
{ type: 'rich-text', name: 'body', label: 'Body', isBody: true },
],
},
],
})
```
---
## Workflow A: สร้างเว็บใหม่
> ⚠️ **สำคัญ: ต้องวางแผนก่อน + รอ approve ก่อนทำงานเสมอ**
>
> ขั้นตอน: Context → Design → Plan → Approve → Execute
---
### Phase 1: Context Gathering (ถามให้ครบ)
**ใช้ `references/questions.md` เป็นแนวทาง แต่ต้องถามให้ลึกกว่า surface level:**
#### 1.1 ข้อมูลพื้นฐาน
```
1. ชื่อเว็บไซต์/บริษัท?
2. ทำอะไร? (ขายอะไร/ให้บริการอะไร)
3. กลุ่มเป้าหมายคือใคร?
4. มีเว็บอยู่แล้วหรือยัง?
```
#### 1.2 Brand Context (ทำให้ต่างจากคนอื่น)
```
5. ทำไมลูกค้าควรเลือกคุณ ไม่ใช่คู่แข่ง?
6. มี brand story หรือ positioning อะไรที่ต้องสื่อสาร?
7. มี tone of voice หรือ personality อย่างไร? (เช่น: friendly, professional, bold, playful)
```
#### 1.3 Design Context
```
8. มี brand guidelines/logo file ไหม?
9. มี reference sites ที่ชอบ/ไม่ชอบบ้างไหม? (ส่งลิงก์มาได้)
10. มีสีที่ต้องใช้/ห้ามใช้บ้างไหม?
```
#### 1.4 Technical Context
```
11. ต้องการหน้าอะไรบ้าง? (sitemap)
12. มี SMTP/email สำหรับส่งเมลไหม?
13. มี tracking tools ต้องติดตั้งไหม? (GA4, Facebook Pixel, etc.)
14. มี DPO หรือยัง? (สำหรับ PDPA)
```
---
### Phase 2: Creative Design (บังคับต้องทำ)
**เรียก skills: `ckm:design` + `ui-ux-pro-max` + `frontend-ui-engineering`**
#### 2.1 สร้าง Creative Brief
ก่อนสร้าง design ต้องมี creative brief ที่ชัดเจน:
```
# Creative Brief
## Brand Essence
- ชื่อ/บริษัท: [ชื่อ]
- สิ่งที่ทำ: [บริการ/สินค้า]
- ทำไมต่าง: [unique selling point]
## Target Emotion
- ต้องการให้คนเข้าเว็บแล้วรู้สึก: [เช่น มั่นใจ, สบายใจ, ตื่นเต้น, ไว้วางใจ]
## Design Direction
- ห้ามใช้: [สี/รูปแบบที่ไม่ชอบ]
- อาจใช้: [สี/รูปแบบที่ชอบ]
- References: [ลิงก์ที่ชอบ/ไม่ชอบ]
```
#### 2.2 สร้าง 2-3 Creative Directions โดยรวม Strengths จากหลาย Skills
**หลักการ:** ใช้ 2-3 skills ร่วมกัน ไม่ใช่ให้แต่ละ skill เสนอตัวเลือกแยกกัน
**เป้าหมาย:** รวมข้อดีและไอเดียจากหลาย skills เพื่อสร้าง design ที่ unique และดูดีที่สุด
**Skills ที่ใช้ร่วมกัน (เลือก 2-3 ตาม brief):**
- `ckm:design` — Brand identity, color psychology, typography
- `ui-ux-pro-max` — 50+ design patterns, wireframes, layout strategies
- `brand` — Logo, visual identity, brand guidelines
- `design-system` — Design tokens, component specs, systematic approach
**วิธีรวม (COLLABORATIVE DESIGN):**
```
1. รวบรวม Inspirations จากทุก Skill:
- จาก ckm:design: [ไอเดีย 3-5 ข้อ]
- จาก ui-ux-pro-max: [ไอเดีย 3-5 ข้อ]
- จาก brand (ถ้ามี): [ไอเดีย 2-3 ข้อ]
2. ผสมผสานเป็น Hybrid Concepts:
- Concept A: [ชื่อ] — เป็นการรวม [จุดเด่นจาก X] + [จุดเด่นจาก Y]
- Concept B: [ชื่อ] — เป็นการรวม [จุดเด่นจาก A] + [จุดเด่นจาก B]
- Concept C: [ชื่อ] — เป็นการรวม [จุดเด่นจาก X] + [จุดเด่นจาก Z]
3. แต่ละ Concept มี:
- Concept: [แนวคิดหลักที่เป็นเอกลักษณ์]
- Visual Style: [ลักษณะ visuals - ไม่ซ้ำใคร]
- Color Palette: [โทนสี - พร้อม hex codes]
- Typography: [แบบอักษร - font pairing]
- Layout Character: [โครงสร้าง layout ที่แตกต่าง]
- Unique Strength: [จุดแข็งที่เกิดจากการรวม skills]
```
**สำหรับ MIGRATION:**
- Design layout ต้องต่างจากต้นฉบับ (ไม่ใช่แค่เปลี่ยนสี)
- แต่ KEEP: content ทั้งหมด + รูปภาพต้นฉบับ
- Focus: ปรับ layout structure, typography, visual hierarchy ให้ดีขึ้น
```
Migration Design Approach:
- Original: [layout ของเว็บเดิม]
- New Design: [layout ใหม่ที่ต่างกันมาก]
- Preserved: [content + images ที่เอามาจากเว็บเดิม]
- Improved: [typography, spacing, visual hierarchy, responsiveness]
```
#### 2.3 Present + Wait for Selection
**นำเสนอ directions ทั้งหมด แล้วรอ user เลือก**
---
### Phase 3: Master Plan (วางแผนทั้งหมด)
**เรียก skill: `spec-driven-development`**
สร้าง master plan ที่รวมทุกอย่าง:
```
# Master Plan: [ชื่อเว็บ]
## Selected Design Direction
[Direction ที่ user เลือกพร้อม rationale]
## Sitemap
/
├── home
├── about
├── services
├── contact
└── ...
## Design System
- Colors: [hex codes]
- Typography: [fonts + weights]
- Components: [list]
- Layout Patterns: [descriptions]
## Content Structure (Tina CMS)
- Collections: [posts, pages, etc.]
- Fields: [schema]
## Technical Stack
- Framework: Astro 6
- CMS: Tina CMS
- Styling: Tailwind CSS v4
- Consent: ConsentOS
## Tracking Scripts
- Analytics: [tools]
- Marketing: [tools]
## PDPA Compliance
- Privacy Policy
- Terms of Service
- ConsentOS Integration
## Development Phases
1. [Phase 1: Setup + Design Foundation]
2. [Phase 2: Build Pages]
3. [Phase 3: Content + QA]
4. [Phase 4: Deploy]
## Timeline
- Phase 1: X days
- Phase 2: X days
- Phase 3: X days
```
---
### ⏸️ APPROVAL GATE
**หยุดที่นี่ - รอ APPROVE ก่อนทำงาน**
แสดง:
1. Design direction ที่เลือก (screenshot/mockup)
2. Sitemap ที่จะสร้าง
3. Tech stack summary
4. Timeline estimate
**รอ user พิมพ์ "approve" หรือ "เริ่มได้" ก่อนไปต่อ**
---
### Phase 4: Execution (เริ่มทำหลัง APPROVE)
**หลังได้รับ approve แล้ว ทำตามแผนที่ approve โดยไม่ต้องถามต่อ**
#### Phase 4.1: Setup + Design Foundation
```bash
bash skills/website-creator/scripts/new-project.sh my-website
```
จากนั้น implement design system ที่ approve:
- Colors ใน Tailwind theme
- Typography
- Base components
- Layout patterns
#### Phase 4.2: Build Pages
Implement ทุก pages ตาม sitemap ที่ approve แล้ว
#### Phase 4.3: Content + Integration
- Tina CMS setup + content schema
- Legal pages (Privacy Policy, ToS)
- ConsentOS integration
- Tracking scripts
#### Phase 4.4: QA + Deploy
ตาม Step 9-10 ด้านล่าง
---
### Step 9: Preview + Visual QA (SCREENSHOT REVIEW)
**เริ่ม local dev server:**
```bash
npm run dev
```
**⚠️ สำคัญ: ดูจาก SCREENSHOT ไม่ใช่ดูจากโค้ด**
หลายครั้งโค้ดดูดี แต่สิ่งที่เห็นบนจอไม่ตรงกับที่ตั้งใจ
ดังนั้นต้อง **browse หน้าเว็บจริงๆ แล้วถ่าย screenshot** มาดู
**Step 9.1: Launch Browser แล้วถ่าย Screenshot ทุกหน้า**
ใช้ `dev-browser` หรือ `playwright` ถ่าย screenshot:
```bash
/skill dev-browser
"เปิด http://localhost:4321 แล้วถ่าย screenshot ของทุกหน้า:
- Home page
- Navigation menu (desktop + mobile)
- Services/Products page
- About page
- Contact page
- Blog/News page (ถ้ามี)
- Footer
- Mobile responsive (iPhone size)
แต่ละหน้าต้องดูดีบนจริง ไม่ใช่ดูแค่โค้ด"
```
**Step 9.2: Visual Review Checklist**
ตรวจจาก screenshot ไม่ใช่โค้ด:
| หัวข้อ | สิ่งที่ดู | ปัญหาที่พบ |
|--------|----------|------------|
| **Layout** | จัดวางตรงตาม design หรือเปล่า? | ขยับ, ชิดขอบ, บรรทัดหลุด |
| **Typography** | font size, line-height อ่านง่ายไหม? | บรรทัดชิดกัน, ตัวหนังสือเล็กเกิน |
| **Color** | สีตรงตาม design system หรือเปล่า? | สีผิด, contrast ไม่ดี |
| **Spacing** | margin/padding สม่ำเสมอหรือเปล่า? | ช่องห่างไม่เท่ากัน |
| **Images** | รูปภาพแสดงถูกต้องหรือเปล่า? | รูปขาด, stretch, ขนาดผิด |
| **Responsive** | mobile view ดูดีหรือเปล่า? | layout พัง, text ล้น |
| **Interactive** | hover, click ทำงานถูกต้องหรือเปล่า? | button ไม่ทำงาน, menu ไม่ลง |
| **Consent Popup** | popup แสดงถูกต้องหรือเปล่า? | popup ซ่อน, ปุ่มไม่ทำงาน |
**Step 9.3: เรียก Code Review Skills (หลังจาก visual ผ่านแล้ว)**
1. **`code-review-and-quality`** — Full multi-axis code review
2. **`performance-optimization`** — Performance audit + fixes
3. **`browser-testing-with-devtools`** — Real browser testing
**Step 9.4: Exploratory QA ด้วย `dogfood`:**
```bash
/skill dogfood
"ทดสอบ user journey:
1. ดู home page → คลิก services
2. ดู about us
3. กรอก contact form
4. ทดสอบ consent popup (ConsentOS)
5. ตรวจ PDPA compliance (privacy policy, terms)
6. ตรวจ mobile responsive
7. ตรวจ SEO meta tags ทุกหน้า"
```
**⚠️ สำคัญ:** ขั้นตอน 9.1-9.2 ต้องทำก่อน 9.3-9.4 เสมอ
เพราะ **visual bug ที่ user เห็นจริงๆ สำคัญกว่า code quality**
ให้ user ตรวจสอบ screenshot → รอ feedback → แก้ไข → รอ approve
---
### Step 10: Deploy
**เรียก skill: `easypanel-deploy` เมื่อ user ขอ**
```bash
/skill easypanel-deploy
"deploy ไปยัง easypanel server
server: openclaw-vps
project: my-website
domain: example.com
git repo: https://github.com/user/my-website"
```
---
### Step 4: Setup Astro + Tina CMS Project
**ใช้ script ที่มีอยู่แล้ว:**
```bash
# สร้าง project ใหม่จาก template
bash skills/website-creator/scripts/new-project.sh my-website
# หรือระบุ path
bash skills/website-creator/scripts/new-project.sh my-website /path/to/projects/
```
**Script ทำอะไร:**
1. Copy template `templates/astro-tina-starter/`
2. เพิ่ม PDPA consent system
3. Copy legal templates (privacy policy, terms)
4. ติดตั้ง dependencies
5. สร้าง .env file
6. Initialize git
**เปิด browser:**
- Frontend: http://localhost:4321 หรือ http://0.0.0.0:4321
- Tina Admin: http://localhost:4321/admin หรือ http://0.0.0.0:4321/admin (dev mode)
---
### Step 5: พัฒนา Components + Pages
**เรียก skills: `spec-driven-development` + `api-and-interface-design` + `ckm:design` + `ckm:ui-styling` + `frontend-ui-engineering`**
สร้างตาม sitemap ที่วางแผนไว้:
- FrontendLayout, Navigation, Footer
- Pages (Home, About, Services, Contact)
- Blog listing + detail pages
- Forms (Contact form ส่ง email จริง)
**สำคัญ — แยก Design Layer กับ Content Layer:**
Design skill (ui-ux-pro-max) ออกแบบ **หน้าตา + layout + animation** — ไม่ใช่ content structure
Tina CMS เก็บ **เนื้อหา (ข้อความ, format, links, images)** — ไม่ใช่ layout
ทั้งสองอยู่คนละ layer กัน → ต้องแยกทำ แล้วมารวมกันตอน integrate
---
### Step 5b: สร้างภาพประกอบด้วย `picture-it`
**เรียก skill: `picture-it`**
สำหรับทุก page/section ที่ต้องการ hero image, illustration หรือภาพประกอบ:
**วิธีใช้:**
```bash
# Load credentials ก่อน
set -a && source ~/.config/opencode/.env && set +a
export PATH="/home/kunthawat/snap/bun-js/87/.bun/bin:$PATH"
# ตรวจสอบ Thai font patch
bun ~/.hermes/skills/picture-it/scripts/thai-font-patch.ts --force
```
**Workflow สร้างภาพประกอบเว็บ:**
| Use Case | Pipeline | ค่าใช้จ่าย |
|----------|----------|-----------|
| Hero background | `generate flux-schnell` + `text` (Thai) + `grade cinematic` + `vignette` | ~$0.003 |
| Service illustration | `generate flux-schnell` + `remove-bg` (ถ้ามี product) + `compose` | ~$0.01 |
| Blog hero | `generate flux-schnell` + `edit seedream` (place logo) + `grade` | ~$0.043 |
| Social/OG image | `generate flux-schnell` + `text` + `grade` | ~$0.003 |
| Team/About photo | `generate flux-schnell` → realistic headshot style | ~$0.003 |
**ขนาดภาพแนะนำ:**
| Purpose | Size |
|---------|------|
| Hero banner | 1200×630 หรือ 1920×1080 |
| Blog hero | 1200×630 |
| OG Image (social share) | 1200×630 |
| Service card | 800×600 |
| Team member | 400×400 (circle crop) |
| Logo (ในภาพ) | 200×200 หรือเล็กกว่า |
**Workflow ตัวอย่าง — Hero Section:**
```bash
# 1. Generate background
picture-it generate \
--prompt "modern tech workspace, clean minimal, yellow #fed400 accent lighting" \
--size 1200x630 \
--model flux-schnell \
-o hero-bg.png
# 2. เพิ่ม Thai text
picture-it text \
-i hero-bg.png \
--title "บริการรับทำเว็บไซต์ SEO" \
--font "Kanit" \
--font-size 48 \
-o hero-texted.png
# 3. Color grade
picture-it grade -i hero-texted.png --name cinematic -o hero-final.png
```
**การบันทึกภาพไว้ใน project:**
```
src/
├── components/
│ └── Hero.astro # Hero component
└── assets/
├── heroes/ # Hero images
├── services/ # Service illustrations
├── blog/ # Blog heroes
└── og/ # Open Graph images
```
---
### Step 5c: Design + Tina Content Integration
**Design layer กับ Content layer แยกกัน — ค่อยรวมตอน build**
#### สิ่งที่ต้องเข้าใจ
```
┌─────────────────────────────────────────────────────────┐
│ ui-ux-pro-max / ckm:design — Design Layer │
│ • Component structure (Hero, Card, Navbar) │
│ • Color tokens, typography, spacing │
│ • Animation specs (150-300ms, ease-out) │
│ • Layout grid, responsive breakpoints │
│ • Interaction states (hover, press, disabled) │
│ Output: Astro + Tailwind code (component skeleton) │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Tina CMS — Content Layer │
│ • ข้อความ + format (bold, italic, link) │
│ • Headings (H1-H6) │
│ • Lists, blockquotes, code blocks │
│ • Images, links │
│ Output: MDX files (เนื้อหา) │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ Integration — ครอบ Tina content ด้วย Design │
│ • Design component ครอบ MDX output │
│ • Animation class ที่ wrapper element │
│ • Design tokens apply ผ่าน Tailwind prose │
└─────────────────────────────────────────────────────────┘
```
#### ขั้นตอนที่ถูกต้อง
```
[1] Design Phase
ui-ux-pro-max → Component structure, tokens, animations
Output: Component skeleton (ไม่มี content)
↓
[2] Tina Phase
สร้าง Content Collections + MDX files
Output: Content structure ใน Tina (src/content/)
↓
[3] Content Phase
พิมพ์ content ใน Tina Admin (/admin)
Output: MDX files
↓
[4] Integration Phase
ครอบ Tina content ด้วย Design components
```
#### ตัวอย่าง: Page Structure (Design Output)
Design skill อาจให้ component แบบนี้:
```astro
---
// ❌ สิ่งที่ design skill อาจให้มา — hardcode content
---
<div class="hero-section">
<h1>Welcome to Our Site</h1> <!-- hardcode -->
<p class="hero-desc">Amazing content here...</p> <!-- hardcode -->
</div>
```
ต้องแปลงเป็น:
```astro
---
// ✅ ครอบ Tina content ด้วย design component
import { Container, Heading, Prose } from '@/components/ui';
interface Props {
title: string;
body: string; // จาก MDX frontmatter หรือ Tina query
}
const { title, body } = Astro.props;
---
<Container class="py-20">
<Heading level={1} class="text-5xl font-bold mb-6">{title}</Heading>
{body && (
<Prose>
<slot /> <!-- MDX content จะมาอยู่ตรงนี้ -->
</Prose>
)}
</Container>
```
#### Tina Content Collections
กำหนดว่า content แต่ส่วนเก็บใน collection ไหน:
```typescript
// .tina/schema.ts
const schema = defineSchema({
collections: [
{
name: 'post',
label: 'Posts',
path: 'src/content/posts',
fields: [
{ type: 'string', name: 'title', label: 'Title', required: true },
{ type: 'string', name: 'slug', label: 'Slug', required: true },
{ type: 'string', name: 'description', label: 'Description' },
{ type: 'datetime', name: 'publishedAt', label: 'Published At' },
{ type: 'rich-text', name: 'body', label: 'Body', isBody: true },
],
},
{
name: 'page',
label: 'Pages',
path: 'src/content/pages',
fields: [
{ type: 'string', name: 'title', label: 'Title', required: true },
{ type: 'string', name: 'slug', label: 'Slug', required: true },
{ type: 'rich-text', name: 'body', label: 'Body', isBody: true },
],
},
{
name: 'settings',
label: 'Settings',
path: 'src/content/settings',
format: 'json',
fields: [
{ type: 'string', name: 'siteName', label: 'Site Name' },
{ type: 'string', name: 'siteDescription', label: 'Description' },
],
},
],
})
```
#### วิธี Integrate: Design Components + Tina Content
```astro
---
// src/pages/blog/[slug].astro
import Layout from '@/layouts/Layout.astro';
import { Container, Heading, Prose } from '@/components/ui';
// Astro ดึง content จาก MDX files
const { slug } = Astro.params;
// ด้วย Astro content collections
const { post } = Astro.props;
---
<Layout title={post.data.title} description={post.data.description}>
<Container class="py-20">
<Heading level={1} class="text-5xl font-bold mb-6">
{post.data.title}
</Heading>
{post.data.description && (
<p class="text-xl text-gray-600 mb-8">{post.data.description}</p>
)}
<Prose>
<!-- MDX content จะ render ตรงนี้ -->
<slot />
</Prose>
</Container>
</Layout>
```
---
### Step 7: PDPA Compliance
**ใช้ templates ที่มีอยู่แล้ว:**
1. **Privacy Policy** — ใช้ `templates/privacy-policy.md`
- ภาษากฎหมาย PDPA ครบถ้วน
- แทนที่ placeholders ด้วยข้อมูลจริง
2. **Terms of Service** — ใช้ `templates/terms-of-service.md`
3. **ConsentOS + Tracking Scripts** — ใช้ `src/components/TrackingScripts.astro`
**Template มี TrackingScripts.astro ที่รองรับ:**
| Category | Script | ENV Variable |
|----------|--------|-------------|
| Analytics | Google Analytics 4 | `PUBLIC_GA4_ID` |
| Analytics | Google Tag Manager | `PUBLIC_GTM_ID` |
| Analytics | Umami | `PUBLIC_UMAMI_URL`, `PUBLIC_UMAMI_WEBSITE_ID` |
| Analytics | Microsoft Clarity | `PUBLIC_CLARITY_ID` |
| Marketing | Facebook Pixel | `PUBLIC_FB_PIXEL_ID` |
| Marketing | Google Ads | `PUBLIC_GOOGLE_ADS_ID` |
| Marketing | TikTok Pixel | `PUBLIC_TIKTOK_PIXEL_ID` |
| Marketing | LINE Channel Tag | `PUBLIC_LINE_CHANNEL_ID` |
**Environment Variables:**
```bash
# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-consent-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com
# Analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXX
PUBLIC_UMAMI_URL=https://umami.example.com
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_CLARITY_ID=xxxxxxxxxx
# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890
```
**Tracking Flow:**
```
TrackingScripts.astro (data-consent-category attributes)
↓
ConsentOS consent-loader.js (scan + auto-block)
↓
Scripts execute only after user consent
```
**Consent Categories:**
- **Analytics** — GA4, GTM, Umami, Clarity
- **Marketing** — Facebook Pixel, TikTok, LINE, Google Ads
**Right to be Forgotten:**
- ConsentOS มี API สำหรับลบข้อมูล user
---
### Step 8: SEO Setup
**เรียก skills: `seo-analyzers` + `seo-geo` + `seo-multi-channel`**
1. **Meta tags ทุกหน้า** — ใช้ frontmatter จาก MDX หรือ static
2. **sitemap.xml** — Astro ใช้ `@astrojs/sitemap`
3. **robots.txt**
4. **Open Graph images** — **ใช้ `picture-it` สร้าง OG image template ที่ consistent**
5. **JSON-LD structured data**
6. **Thai language optimization**
```bash
# ติดตั้ง sitemap
npx astro add sitemap
```
```javascript
// astro.config.mjs
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap(), tina()],
});
```
---
### Step 9: Preview + QA
```bash
npm run dev
```
**ก่อน QA — เรียก skills ตามลำดับ:**
1. **`code-review-and-quality`** — Full multi-axis code review ก่อน delivery
2. **`performance-optimization`** — Performance audit + fixes
3. **`browser-testing-with-devtools`** — ทดสอบใน real browser
**จากนั้นเรียก `dogfood` สำหรับ exploratory QA:**
```bash
/skill dogfood
"ทดสอบ user journey:
1. ดู home page → คลิก services
2. ดู about us
3. กรอก contact form
4. ทดสอบ consent popup (ConsentOS)
5. ตรวจ PDPA compliance (privacy policy, terms)
6. ตรวจ mobile responsive
7. ตรวจ SEO meta tags ทุกหน้า"
```
ให้ user ตรวจสอบ → รอ feedback → แก้ไข → รอ approve
---
### Step 10: Deploy
**เรียก skill: `easypanel-deploy`**
```bash
/skill easypanel-deploy
"deploy ไปยัง easypanel server
server: openclaw-vps
project: my-website
domain: example.com
git repo: https://github.com/user/my-website"
```
---
## Workflow B: ปรับปรุงเว็บที่มีอยู่แล้ว (Existing Repo)
### ความหมายของ "Existing Repo"
Repo ที่มีโครงสร้าง Astro + Tina แล้ว แต่ยังไม่สมบูรณ์ — เช่น:
- มี starter template แต่ไม่มี content
- มี design tokens แล้วแต่ยังไม่มี pages
- มีบางหน้าแต่ต้องการปรับปรุงเนื้อหา/design
**ไม่ใช่** 新规 creation — มี codebase อยู่แล้ว ปรับในที่เดิม
---
### ขั้นตอน
```
[1] ตรวจสอบ repo ที่มี (terminal/find ดูโครงสร้าง)
│
[2] สำรวจ: astro.config.mjs, components, pages, design tokens
│
[3] สำรวจ content ที่มี (Posts, Pages จากเว็บเดิม) → วางแผน Migration
│
[4] Migrate content เข้า Tina CMS
│
[5] ตรวจสอบ /admin ว่าเห็น Posts + Pages พร้อมแก้ไขได้
│
[6] Integrate: อัปเดต Pages ให้อ่านจาก Tina แทน hardcode
│ (ดู **Design + Tina Integration** ด้านบน)
│
[7] สรุปสิ่งที่มี vs สิ่งที่ขาด → แผน Sitemap
│
[8] ถามคำถามที่ขาด (content, portfolio, pricing, dark/light)
│
[9] รอ approve
↓
จากนั้น → Workflow A Step 3 เป็นต้นไป (พัฒนา Components + Pages)
```
---
## Migration: Next.js + Payload → Astro + Tina
**ใช้ script ที่มีอยู่แล้ว:**
```bash
# Migrate existing website ไป Astro + Tina
bash skills/website-creator/scripts/migrate-tina.sh /path/to/existing-site /path/to/migrated-site
```
**Script ทำอะไร:**
1. Detect source technology (Astro, Next.js, Remix, etc.)
2. Analyze source content
3. Copy Astro+Tina template
4. Migrate content (MD/MDX files)
5. Add PDPA consent system
6. Create Tina schema
7. Generate migration report
### Content Migration Checklist
| จาก Payload | ไป Tina |
|------------|---------|
| `payload.find()` | Astro content collections |
| `RichText` component | MDX files |
| `payload.config.ts` collections | `.tina/schema.ts` collections |
| MongoDB/PostgreSQL | ConsentOS (external) |
| `/admin` | `/admin` (Tina visual editor) |
| Payload Auth | Tina Auth (optional) |
---
## Astro Content Collections
Astro ใช้ content collections สำหรับ type-safe content management:
### สร้าง Collection
```typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const postsCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string().optional(),
publishedAt: z.date().optional(),
author: z.string().optional(),
image: z.string().optional(),
}),
});
const pagesCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string().optional(),
}),
});
export const collections = {
posts: postsCollection,
pages: pagesCollection,
};
```
### ใช้ Collection
```astro
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('posts');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<article>
<h1>{post.data.title}</h1>
<Content />
</article>
```
---
## Tina CMS Integration
### Local Development
```bash
npm run dev
```
Tina จะ available ที่ `http://localhost:4321/admin` หรือ `http://0.0.0.0:4321/admin`
### Production Setup
```bash
# รัน script สำหรับติดตั้ง Tina backend
bash scripts/install-tina-backend.sh
```
**ต้องมี:**
- `TINA_TOKEN` — Production authentication token
- `TINA_CLIENT_ID` — Tina client ID
### Tina Schema Best Practices
```typescript
// .tina/schema.ts
const schema = defineSchema({
collections: [
{
name: 'post',
label: 'Blog Posts',
path: 'src/content/posts',
fields: [
{
type: 'string',
name: 'title',
label: 'Title',
isTitle: true, // ใช้เป็น title ใน admin UI
required: true,
},
{
type: 'string',
name: 'slug',
label: 'URL Slug',
required: true,
},
{
type: 'datetime',
name: 'publishedAt',
label: 'Publish Date',
},
{
type: 'rich-text',
name: 'body',
label: 'Content',
isBody: true, // เป็น body หลัก
},
],
},
],
})
```
---
## Templates
### Astro Tina Starter (`templates/astro-tina-starter/`)
Base template ที่รวมทุกอย่างพร้อม:
```
astro-tina-starter/
├── .tina/
│ ├── config.ts # Tina CMS configuration
│ └── schema.ts # Content schema definitions
├── src/
│ ├── styles/
│ │ └── global.css # Tailwind v4 styles + @theme
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ └── index.astro
│ ├── components/
│ │ └── Header.astro
│ └── content/
│ ├── config.ts # Astro content collections
│ ├── posts/ # Blog posts (MDX)
│ ├── pages/ # Static pages (MDX)
│ └── settings/ # Site settings (JSON)
├── public/
│ └── favicon.svg
├── Dockerfile
├── astro.config.mjs
├── tsconfig.json
└── package.json
```
**Features ที่มี:**
- Astro 6.1.7 + Tina CMS 2.x
- Tailwind CSS 4.x with `@tailwindcss/vite`
- Thai language support
- Docker-ready
- External consent system integration
---
## Docker
### Development
```bash
docker compose up -d
```
### Production (Multi-stage Dockerfile)
```dockerfile
FROM node:22-alpine AS deps
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
WORKDIR /app
COPY package.json pnpm-lock.yaml* ./
RUN pnpm install --frozen-lockfile
FROM deps AS builder
COPY . .
RUN pnpm build
FROM node:22-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN adduser --system --uid 1001 astro
USER astro
EXPOSE 8080
CMD ["node", "dist/server/entry.mjs"]
```
**Build command:**
```bash
npm run build
```
---
## Sub-skill Routing
| ขั้นตอน | Sub-skill | รายละเอียด |
|---------|-----------|-------------|
| **ตลอด workflow** | `spec-driven-development` | เขียน spec ก่อน implement ทุกครั้ง |
| **Design Direction** | `ckm:design` + `ui-ux-pro-max` + `brand` | **รวม 2-3 skills** สร้าง hybrid design (ไม่ใช่แยกกันเสนอ) |
| Design Framework | `design-system` | Design tokens, component specs |
| UI Components | `ckm:ui-styling` | shadcn/ui, Tailwind CSS |
| UI Components | `frontend-ui-engineering` | UI component architecture, patterns |
| Brand Identity | `brand` | Logo, colors, typography, voice |
| Banner/Hero Images | `banner-design` | Social, ads, web heroes |
| Develop Components + Pages | `api-and-interface-design` | API design, component interfaces |
| **Visual QA** | `dev-browser` หรือ `playwright` | ถ่าย screenshot ทุกหน้า ดูจริงๆ ไม่ใช่ดูโค้ด |
| Before QA | `code-review-and-quality` | Full multi-axis code review |
| Before QA | `performance-optimization` | Performance audit + fixes |
| QA Testing | `browser-testing-with-devtools` | Real browser testing |
| QA Testing | `dogfood` | Exploratory QA of web app |
| SEO Planning | `seo-context` | Per-project SEO context |
| SEO Audit | `seo-analyzers` | Thai language SEO analysis |
| GEO (AI Search) | `seo-geo` | AI Overviews, llms.txt, crawler |
| Multi-channel Content | `seo-multi-channel` | Facebook, LinkedIn, blog content |
| Deploy | `easypanel-deploy` | Easypanel hosting |
| Design + Tina Integration | `frontend-ui-engineering` | แยก design layer กับ content layer |
**หมายเหตุ Design Direction:** ใช้ 2-3 skills ร่วมกัน เพื่อรวมข้อดีของแต่ละ skill ไม่ใช่ให้แต่ละ skill เสนอตัวเลือกแยกกัน
---
## Troubleshooting
### Build fails: "Cannot find module '@tailwindcss/vite'"
**Error:** `Cannot find module '@tailwindcss/vite'`
**ทางแก้:**
```bash
# ติดตั้ง @tailwindcss/vite
npm install -D @tailwindcss/vite
# หรือถ้าใช้ Tailwind v3 syntax อยู่ → ต้องเปลี่ยนเป็น v4
# ใน global.css:
@import "tailwindcss"; # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities;
```
### Tina Admin not loading
**อาการ:** `/admin` แสดง blank page หรือ error
**ทางแก้:**
1. ตรวจสอบว่า Tina config ถูกต้อง:
```javascript
// astro.config.mjs
import tina from 'tinacms';
export default defineConfig({
integrations: [tina()],
});
```
2. ตรวจสอบว่า `.tina/schema.ts` มีอยู่
3. ลองรัน `npm run dev` ใหม่
### Port already in use
**Error:** `Port 4321 is already in use`
**ทางแก้:**
```bash
# หา process ที่ใช้ port
lsof -i :4321
# kill process
kill <PID>
# หรือรัน port อื่น
npm run dev -- --port 4322
```
### MDX content not rendering
**อาการ:** MDX files ไม่แสดง content
**ทางแก้:**
```astro
---
// ต้องใช้ .render() เพื่อดึง Content component
const { Content } = await post.render();
---
<Content />
```
---
## Key Principles
1. **Plan-First Approach**
- แสดงแผนก่อนลงมือเสมอ
- รอ user approve ก่อน
2. **Astro Latest**
- ใช้ Astro 6.x เวอร์ชั่นล่าสุด
- Tina CMS สำหรับ content management
3. **Thai-First**
- ภาษาไทยเป็นหลัก
- Thai fonts (Kanit, Noto Sans Thai)
- Thai typography CSS
- Thai structured data (LocalBusiness, Organization)
4. **Preview Before Deploy**
- Preview ผ่าน local dev server ที่ `0.0.0.0`
- ให้ user ตรวจสอบก่อน deploy
5. **Tailwind v4**
- ใช้ `@tailwindcss/vite` plugin
- ใช้ `@theme` block แทน tailwind.config.js
- ไม่ใช้ `@astrojs/tailwind` (deprecated)
Reference in New Issue View Git Blame Copy Permalink