feat: add diagram-design and html-ppt skills

- Add cathrynlavery/diagram-design: 13 editorial diagram types (architecture, flowchart, sequence, state machine, ER, timeline, etc.) as standalone HTML/SVG - Add lewislulu/html-ppt-skill: 36 themes, 31 layouts, 47 animations, presenter mode for HTML presentations - Security check: both repos verified clean (no malware, no data exfiltration)
2026-04-21 19:58:51 +07:00
parent 6583d23c19
commit 13e0afd24a
4 changed files with 57 additions and 179 deletions
--- a/.opencode/package-lock.json
+++ b/.opencode/package-lock.json
@@ -5,7 +5,7 @@
  "packages": {
    "": {
      "dependencies": {
-        "@opencode-ai/plugin": "1.4.7"
+        "@opencode-ai/plugin": "1.4.8"
      }
    },
    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
@@ -87,18 +87,18 @@
      ]
    },
    "node_modules/@opencode-ai/plugin": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.7.tgz",
-      "integrity": "sha512-RbzMl7ILvQDHpZNvqzi6RCYaGcB3eBwNIMRZww467drLvMd1eOwr4/qAurrvYDsIIEctE6cKsrLuSGIKCW/Fxg==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.8.tgz",
+      "integrity": "sha512-arbggGAwR7vE6d5a/Ra8A7yECXYcOAPyRbJHzkofLLiVzyclsThFaL2SSCZw/UNJJTtt3L7JGl95phFodJq8tQ==",
      "license": "MIT",
      "dependencies": {
-        "@opencode-ai/sdk": "1.4.7",
+        "@opencode-ai/sdk": "1.4.8",
        "effect": "4.0.0-beta.48",
        "zod": "4.1.8"
      },
      "peerDependencies": {
-        "@opentui/core": ">=0.1.99",
-        "@opentui/solid": ">=0.1.99"
+        "@opentui/core": ">=0.1.100",
+        "@opentui/solid": ">=0.1.100"
      },
      "peerDependenciesMeta": {
        "@opentui/core": {
@@ -110,9 +110,9 @@
      }
    },
    "node_modules/@opencode-ai/sdk": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.7.tgz",
-      "integrity": "sha512-onEtaooQyoDP5gTShQeQSf0Sd8V7949G9pPNyIyRXnVtFqyDIhUDLGtL/a/+EIW9x5s+Y6lDy/3oVoGMvQ0rQQ==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.8.tgz",
+      "integrity": "sha512-DTN0TwRxuBxdm2JvJO3Dg7Vp9/j8PFpTS/26qD6Mzi6UPI5+NBxgcDVkozKygi55Goj3AAQGJPp63qzbdc+8ag==",
      "license": "MIT",
      "dependencies": {
        "cross-spawn": "7.0.6"
--- a/skills/diagram-design
+++ b/skills/diagram-design
--- a/skills/html-ppt
+++ b/skills/html-ppt
--- a/skills/website-creator/SKILL.md
+++ b/skills/website-creator/SKILL.md
@@ -1,7 +1,7 @@
 ---
 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, astro-db, image-generation, picture-it]
+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
@@ -22,8 +22,8 @@ related_skills:
 **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
+- **External Consent System** — Consent script จาก `consent.moreminimore.com`

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

@@ -32,7 +32,6 @@ related_skills:
 ```
 src/
 ├── components/           # Astro/React components
-│   └── consent/          # PDPA consent system
 ├── content/              # Tina CMS content (MDX)
 │   ├── posts/           # Blog posts
 │   ├── pages/           # Static pages
@@ -42,11 +41,8 @@ src/
 ├── 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
@@ -59,21 +55,20 @@ package.json

 ### Static vs SSR

- **SSR (default สำหรับ consent):** ใช้ `output: 'server'` สำหรับ API routes + consent logging
- **Static:** Pre-built HTML + รันบน CDN (ไม่มี backend)
+- **Static (default):** Pre-built HTML + รันบน CDN
+- **SSR/Hybrid:** ใช้เมื่อต้องการ API routes หรือ dynamic content
 - **Hybrid:** บางหน้า static บางหน้า dynamic

-**สำหรับ Easypanel:** ใช้ SSR mode เพื่อรองรับ Astro DB API routes
+**สำหรับ Easypanel:** ใช้ `output: 'static'` หรือ `output: 'hybrid'` (ถ้าต้องการ API routes)

 ## Critical Configuration Rules

-### 1. astro.config.mjs (Tailwind v4 + Tina + SSR)
+### 1. astro.config.mjs (Tailwind v4 + Tina)

 ```javascript
 import { defineConfig } from 'astro/config'
 import tailwindcss from '@tailwindcss/vite'
 import tina from 'tinacms'
-import node from '@astrojs/node'

 export default defineConfig({
  integrations: [
@@ -85,11 +80,7 @@ export default defineConfig({
  vite: {
    plugins: [tailwindcss()],  // Tailwind v4 ใช้ @tailwindcss/vite
  },
-  output: 'server',
-  adapter: node({ mode: 'standalone' }),
-  server: {
-    port: 4321,
-  },
+  output: 'static',  // หรือ 'hybrid' ถ้าต้องการ API routes
 })
 ```

@@ -100,10 +91,7 @@ export default defineConfig({
  "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"
+    "tinacms": "^2.2.0"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
@@ -534,115 +522,54 @@ const { post } = Astro.props;

 2. **Terms of Service** — ใช้ `templates/terms-of-service.md`

-3. **PDPA Topics ที่ต้องครอบคลุม:**
+3. **Consent System** — ใช้ consent script จาก `consent.moreminimore.com`

-**3.1 Cookie Consent Popup**
- ไม่ block content
- Options: Accept All, Reject All, Customize
- ถ้า reject → ไม่ load GA4/marketing scripts
+**Environment Variables สำหรับ Consent:**

-**3.2 Consent Logging (PDPA)**
- เก็บ log ลง Astro DB (ไม่ต้อง MongoDB ภายนอก)
- ระบุ: action, purpose, analytics/marketing/functional flags, ip, userAgent, timestamp
+```bash
+# .env
+CONSENT_SITE_ID=your-site-id-here
+CONSENT_API_BASE=https://consent.moreminimore.com
+```

-**ไฟล์ที่ต้องสร้าง:**
-
-1. **`ConsentBanner.astro`** — Consent banner component (มีใน template)
+**เพิ่ม Consent Script ใน Layout:**

 ```astro
 ---
-// src/components/consent/ConsentBanner.astro
-import { consentStore } from '@/stores/consent';
+// src/layouts/Layout.astro
+const { title, description } = Astro.props;
+const consentSiteId = import.meta.env.PUBLIC_CONSENT_SITE_ID || 'demo';
+const consentApiBase = import.meta.env.PUBLIC_CONSENT_API_BASE || 'https://consent.moreminimore.com';
 ---

-<div id="pdpa-consent-banner" class="consent-banner">
-  <h3>🍪 การยินยอมตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล</h3>
-  <p>เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์...</p>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</head>
+<body>
+  <slot />

-  <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>
+  <!-- Consent Script -->
+  <script
+    src={`${consentApiBase}/consent-loader.js`}
+    data-site-id={consentSiteId}
+    data-api-base={consentApiBase}
+  ></script>
+</body>
+</html>
 ```

-2. **`db/config.ts`** — Astro DB schema:
+**Consent Options:**
+- Accept All / Reject All / Customize
+- ถ้า reject → ไม่ load GA4/marketing scripts
+- Server-side logging ใน consent service ของตัวเอง

-```typescript
-// 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:
-
-```typescript
-// 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:**
-
-```javascript
-// 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: 'server',
-  adapter: node({ mode: 'standalone' }),
-});
-```
-
-**3.3 Right to be Forgotten**
- API endpoint สำหรับลบข้อมูล user
+**3.1 Right to be Forgotten**
+- Consent service มี API สำหรับลบข้อมูล user

 ---

@@ -927,9 +854,6 @@ 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
@@ -955,26 +879,9 @@ astro-tina-starter/
 **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
-```
+- External consent system integration

 ---

@@ -1057,20 +964,6 @@ npm install -D @tailwindcss/vite
@import "tailwindcss";  # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities;
 ```

-### Astro DB not working
-
-**Error:** `Cannot find module 'astro:db'` หรือ tables not found
-
-**ทางแก้:**
-
-```bash
-# 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
@@ -1123,23 +1016,6 @@ const { Content } = await post.render();
 <Content />
 ```

-### Static build vs SSR
-
-**อาการ:** API routes ไม่ทำงานหลัง build
-
-**ทางแก้:**
-
-ถ้าต้องการใช้ API routes (เช่น consent API):
-
-```javascript
-// astro.config.mjs
-export default defineConfig({
-  output: 'hybrid',  // หรือ 'server' สำหรับทุกหน้า dynamic
-});
-```
-
-แล้วเพิ่ม `export const prerender = false;` ใน API route files.
-
 ---

 ## Key Principles