opencode-skill/skills/website-creator/SKILL.md

name, description, tags, category, related_skills

name	description	tags	category	related_skills
website-creator	สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS พร้อม Workflow สำหรับเว็บใหม่และ Migration ครอบคลุม Design System, Content Collections, Auth, SEO, PDPA Compliance และ Deploy	astro website website-development website-creation migration tailwindcss thai pdpa seo tina-cms astro-db image-generation picture-it	software-development	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
• Astro DB — Built-in database (libSQL) สำหรับ consent logs และ dynamic content
• Tailwind CSS 4.x — ใช้ @tailwindcss/vite plugin

Pattern อ้างอิง: ใช้ template ที่มีอยู่แล้ว: templates/astro-tina-starter/

Astro Project Structure

src/
├── components/           # Astro/React components
│   └── consent/          # PDPA consent system
├── 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
├── stores/              # Nano Stores (client state)
├── styles/
│   └── global.css       # Tailwind v4 + @theme
├── db/
│   └── config.ts        # Astro DB schema
└── 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: ใช้ output: 'server' สำหรับ dynamic pages
• Astro มี hybrid mode — บางหน้า static บางหน้า dynamic

Critical Configuration Rules

1. astro.config.mjs (Tailwind v4 + Tina)

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',
  server: {
    port: 4321,
  },
})

2. Required Dependencies

{
  "dependencies": {
    "astro": "^6.1.7",
    "@tinacms/cli": "^2.1.0",
    "tinacms": "^2.2.0",
    "@astrojs/db": "^0.14.0",
    "nanostores": "^0.11.0",
    "@nanostores/preact": "^0.5.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 แทน:

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

// .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: สร้างเว็บใหม่

Step 1: Pre-Project Questions

ใช้ references/questions.md เป็นแนวทาง:

1. ชื่อเว็บไซต์/บริษัท?
2. ทำอะไร? (ขายอะไร/ให้บริการอะไร)
3. กลุ่มเป้าหมายคือใคร?
4. มีเว็บอยู่แล้วหรือยัง?
5. ชอบสี/ดีไซน์แบบไหน?
6. มี logo file ไหม?
7. ต้องการหน้าอะไรบ้าง?
8. มี SMTP/email สำหรับส่งเมลไหม?
9. มี GA4/Marketing tools ไหม?
10. มี DPO หรือยัง?

---

Step 2: Plan Sitemap + Content Structure

เรียก skill: spec-driven-development — เขียน SPEC.md ก่อนลงมือทุกครั้ง

แสดง sitemap ให้ user ดูก่อนเสมอ รอ approve ก่อนลงมือ:

/                           # Home
/about                      # About Us
/services                   # Services overview
/contact                    # Contact + Form
/blog                       # Blog listing (ถ้ามี)
/blog/[slug]               # Individual blog post
/privacy-policy            # PDPA Privacy Policy
/terms-of-service          # PDPA Terms of Service

---

Step 3: Design Framework

เรียก skills: ckm:design + frontend-ui-engineering + ckm:ui-styling + ui-ux-pro-max

ขั้นตอน:

1. ถามว่ามี brand guidelines หรือ reference ไหม
2. ถ้าไม่มี → ถาม 2 คำถาม:
   • ชอบ dark mode ไหม หรือ light mode อย่างเดียว?
   • ชอบ style แบบไหน: minimal, bold, creative?
3. ใช้ ckm:design เพื่อสร้าง design system
4. ใช้ ui-ux-pro-max เพื่อออกแบบ wireframes
5. ใช้ ckm:ui-styling เพื่อสร้าง components

---

Step 4: Setup Astro + Tina CMS Project

ใช้ script ที่มีอยู่แล้ว:

# สร้าง 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
• Tina Admin: http://localhost: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 หรือภาพประกอบ:

วิธีใช้:

# 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/website-creator/creative/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:

# 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 แบบนี้:

---
// ❌ สิ่งที่ 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>

ต้องแปลงเป็น:

---
// ✅ ครอบ 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 ไหน:

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

---
// 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. PDPA Topics ที่ต้องครอบคลุม:

3.1 Cookie Consent Popup

• ไม่ block content
• Options: Accept All, Reject All, Customize
• ถ้า reject → ไม่ load GA4/marketing scripts

3.2 Consent Logging (PDPA)

• เก็บ log ลง Astro DB (ไม่ต้อง MongoDB ภายนอก)
• ระบุ: action, purpose, analytics/marketing/functional flags, ip, userAgent, timestamp

ไฟล์ที่ต้องสร้าง:

1. ConsentBanner.astro — Consent banner component (มีใน template)

---
// src/components/consent/ConsentBanner.astro
import { consentStore } from '@/stores/consent';
---

<div id="pdpa-consent-banner" class="consent-banner">
  <h3>🍪 การยินยอมตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล</h3>
  <p>เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์...</p>
  
  <div class="consent-banner__buttons">
    <button id="consent-accept-all">ยอมรับทั้งหมด</button>
    <button id="consent-reject-all">ปฏิเสธทั้งหมด</button>
    <button id="consent-show-preferences">ตั้งค่าคุกกี้</button>
  </div>
</div>

<script>
  import { consentStore } from './stores/consent';
  // ... consent logic
</script>

2. db/config.ts — Astro DB schema:

// src/db/config.ts
import { defineDb, column } from 'astro:db';

export const ConsentLog = defineTable({
  columns: {
    id: column serial({ primaryKey: true }),
    action: column text(),
    purpose: column text(),
    analytics: column boolean({ default: false }),
    marketing: column boolean({ default: false }),
    functional: column boolean({ default: false }),
    userAgent: column text({ optional: true }),
    ip: column text({ optional: true }),
    timestamp: column date({ default: { now: true } }),
    sessionId: column text({ optional: true }),
  },
});

3. src/pages/api/consent.ts — API endpoint:

// src/pages/api/consent.ts
import type { APIRoute } from 'astro';
import { db, ConsentLog } from 'astro:db';

export const POST: APIRoute = async ({ request }) => {
  const body = await request.json();
  const { action, purpose, analytics, marketing, functional } = body;
  
  const ip = request.headers.get('x-forwarded-for')?.split(',')[0] || 'unknown';
  const userAgent = request.headers.get('user-agent') || 'unknown';
  
  await db.insert(ConsentLog).values({
    action,
    purpose,
    analytics,
    marketing,
    functional,
    userAgent,
    ip,
  });
  
  return new Response(JSON.stringify({ success: true }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
};

4. เพิ่มใน astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import tina from 'tinacms';

export default defineConfig({
  integrations: [tina()],
  vite: { plugins: [tailwindcss()] },
  output: 'static',
  // Astro DB รวมอยู่แล้ว ไม่ต้องติดตั้งเพิ่ม
});

3.3 Right to be Forgotten

• API endpoint สำหรับลบข้อมูล 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

# ติดตั้ง sitemap
npx astro add sitemap

// astro.config.mjs
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap(), tina()],
});

---

Step 9: Preview + QA

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:

/skill dogfood
"ทดสอบ user journey:
 1. ดู home page → คลิก services
 2. ดู about us
 3. กรอก contact form
 4. ทดสอบ cookie consent popup
 5. ตรวจ PDPA compliance (privacy policy, terms)
 6. ตรวจ mobile responsive
 7. ตรวจ SEO meta tags ทุกหน้า"

ให้ user ตรวจสอบ → รอ feedback → แก้ไข → รอ approve

---

Step 10: Deploy

เรียก skill: easypanel-deploy

/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 ที่มีอยู่แล้ว:

# 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	Astro DB (built-in)
/admin	/admin (Tina visual editor)
Payload Auth	Tina Auth (optional)

---

Astro Content Collections

Astro ใช้ content collections สำหรับ type-safe content management:

สร้าง Collection

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

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

npm run dev

Tina จะ available ที่ http://localhost:4321/admin

Production Setup

# รัน script สำหรับติดตั้ง Tina backend
bash scripts/install-tina-backend.sh

ต้องมี:

• TINA_TOKEN — Production authentication token
• TINA_CLIENT_ID — Tina client ID

Tina Schema Best Practices

// .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
├── db/
│   ├── config.ts       # Astro DB schema
│   └── seed.ts         # Database seed script
├── 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
• Astro DB for consent logging
• Nano Stores for client state
• Thai language support
• Docker-ready

PDPA Consent Template (templates/consent/)

Template สำหรับ PDPA consent system:

consent/
├── ConsentBanner.astro      # Consent banner component
├── api/
│   ├── consent.ts           # API endpoints
│   └── route.ts             # Astro API route
├── db/
│   └── config.ts            # Astro DB ConsentLog table
└── stores/
    └── consent.ts           # Nano Stores

---

Docker

Development

docker compose up -d

Production (Multi-stage 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:

npm run build

---

Sub-skill Routing

ขั้นตอน	Sub-skill	รายละเอียด
ตลอด workflow	spec-driven-development	เขียน spec ก่อน implement ทุกครั้ง
Design Framework	ckm:design	Brand, tokens, design system
Design Framework	frontend-ui-engineering	UI component architecture, patterns
UI Components	ckm:ui-styling	shadcn/ui, Tailwind CSS
UI/UX Design	ui-ux-pro-max	Wireframes, mockups, 50+ design 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
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

---

Troubleshooting

Build fails: "Cannot find module '@tailwindcss/vite'"

Error: Cannot find module '@tailwindcss/vite'

ทางแก้:

# ติดตั้ง @tailwindcss/vite
npm install -D @tailwindcss/vite

# หรือถ้าใช้ Tailwind v3 syntax อยู่ → ต้องเปลี่ยนเป็น v4
# ใน global.css:
@import "tailwindcss";  # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities;

Astro DB not working

Error: Cannot find module 'astro:db' หรือ tables not found

ทางแก้:

# Push schema to database
npm run db:push

# ตรวจสอบว่ามี astro:db import ถูกต้อง
import { db, ConsentLog } from 'astro:db';

Tina Admin not loading

อาการ: /admin แสดง blank page หรือ error

ทางแก้:

1. ตรวจสอบว่า Tina config ถูกต้อง:

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

ทางแก้:

# หา process ที่ใช้ port
lsof -i :4321

# kill process
kill <PID>

# หรือรัน port อื่น
npm run dev -- --port 4322

MDX content not rendering

อาการ: MDX files ไม่แสดง content

ทางแก้:

---
// ต้องใช้ .render() เพื่อดึง Content component
const { Content } = await post.render();
---

<Content />

Static build vs SSR

อาการ: API routes ไม่ทำงานหลัง build

ทางแก้:

ถ้าต้องการใช้ API routes (เช่น consent API):

// astro.config.mjs
export default defineConfig({
  output: 'hybrid',  // หรือ 'server' สำหรับทุกหน้า dynamic
});

แล้วเพิ่ม export const prerender = false; ใน API route files.

---

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)