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)
This commit is contained in:
2026-04-21 19:58:51 +07:00
parent 6583d23c19
commit 13e0afd24a
4 changed files with 57 additions and 179 deletions

View File

@@ -5,7 +5,7 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@opencode-ai/plugin": "1.4.7" "@opencode-ai/plugin": "1.4.8"
} }
}, },
"node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": { "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
@@ -87,18 +87,18 @@
] ]
}, },
"node_modules/@opencode-ai/plugin": { "node_modules/@opencode-ai/plugin": {
"version": "1.4.7", "version": "1.4.8",
"resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.7.tgz", "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.8.tgz",
"integrity": "sha512-RbzMl7ILvQDHpZNvqzi6RCYaGcB3eBwNIMRZww467drLvMd1eOwr4/qAurrvYDsIIEctE6cKsrLuSGIKCW/Fxg==", "integrity": "sha512-arbggGAwR7vE6d5a/Ra8A7yECXYcOAPyRbJHzkofLLiVzyclsThFaL2SSCZw/UNJJTtt3L7JGl95phFodJq8tQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@opencode-ai/sdk": "1.4.7", "@opencode-ai/sdk": "1.4.8",
"effect": "4.0.0-beta.48", "effect": "4.0.0-beta.48",
"zod": "4.1.8" "zod": "4.1.8"
}, },
"peerDependencies": { "peerDependencies": {
"@opentui/core": ">=0.1.99", "@opentui/core": ">=0.1.100",
"@opentui/solid": ">=0.1.99" "@opentui/solid": ">=0.1.100"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@opentui/core": { "@opentui/core": {
@@ -110,9 +110,9 @@
} }
}, },
"node_modules/@opencode-ai/sdk": { "node_modules/@opencode-ai/sdk": {
"version": "1.4.7", "version": "1.4.8",
"resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.7.tgz", "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.8.tgz",
"integrity": "sha512-onEtaooQyoDP5gTShQeQSf0Sd8V7949G9pPNyIyRXnVtFqyDIhUDLGtL/a/+EIW9x5s+Y6lDy/3oVoGMvQ0rQQ==", "integrity": "sha512-DTN0TwRxuBxdm2JvJO3Dg7Vp9/j8PFpTS/26qD6Mzi6UPI5+NBxgcDVkozKygi55Goj3AAQGJPp63qzbdc+8ag==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"cross-spawn": "7.0.6" "cross-spawn": "7.0.6"

1
skills/diagram-design Submodule

Submodule skills/diagram-design added at 66d0d6ab76

1
skills/html-ppt Submodule

Submodule skills/html-ppt added at 15fb85f05b

View File

@@ -1,7 +1,7 @@
--- ---
name: website-creator name: website-creator
description: สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS พร้อม Workflow สำหรับเว็บใหม่และ Migration ครอบคลุม Design System, Content Collections, Auth, SEO, PDPA Compliance และ Deploy 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 category: software-development
related_skills: related_skills:
- spec-driven-development - spec-driven-development
@@ -22,8 +22,8 @@ related_skills:
**Astro + Tina CMS Stack:** **Astro + Tina CMS Stack:**
- **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components - **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components
- **Tina CMS** — Self-hosted Git-based CMS สำหรับ visual content editing - **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 - **Tailwind CSS 4.x** — ใช้ `@tailwindcss/vite` plugin
- **External Consent System** — Consent script จาก `consent.moreminimore.com`
**Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/` **Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/`
@@ -32,7 +32,6 @@ related_skills:
``` ```
src/ src/
├── components/ # Astro/React components ├── components/ # Astro/React components
│ └── consent/ # PDPA consent system
├── content/ # Tina CMS content (MDX) ├── content/ # Tina CMS content (MDX)
│ ├── posts/ # Blog posts │ ├── posts/ # Blog posts
│ ├── pages/ # Static pages │ ├── pages/ # Static pages
@@ -42,11 +41,8 @@ src/
├── pages/ ├── pages/
│ ├── index.astro # Home page │ ├── index.astro # Home page
│ └── [...slug].astro # Dynamic pages │ └── [...slug].astro # Dynamic pages
├── stores/ # Nano Stores (client state)
├── styles/ ├── styles/
│ └── global.css # Tailwind v4 + @theme │ └── global.css # Tailwind v4 + @theme
├── db/
│ └── config.ts # Astro DB schema
└── env.d.ts └── env.d.ts
.tina/ # Tina CMS configuration .tina/ # Tina CMS configuration
@@ -59,21 +55,20 @@ package.json
### Static vs SSR ### Static vs SSR
- **SSR (default สำหรับ consent):** ใช้ `output: 'server'` สำหรับ API routes + consent logging - **Static (default):** Pre-built HTML + รันบน CDN
- **Static:** Pre-built HTML + รันบน CDN (ไม่มี backend) - **SSR/Hybrid:** ใช้เมื่อต้องการ API routes หรือ dynamic content
- **Hybrid:** บางหน้า static บางหน้า dynamic - **Hybrid:** บางหน้า static บางหน้า dynamic
**สำหรับ Easypanel:** ใช้ SSR mode เพื่อรองรับ Astro DB API routes **สำหรับ Easypanel:** ใช้ `output: 'static'` หรือ `output: 'hybrid'` (ถ้าต้องการ API routes)
## Critical Configuration Rules ## Critical Configuration Rules
### 1. astro.config.mjs (Tailwind v4 + Tina + SSR) ### 1. astro.config.mjs (Tailwind v4 + Tina)
```javascript ```javascript
import { defineConfig } from 'astro/config' import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite' import tailwindcss from '@tailwindcss/vite'
import tina from 'tinacms' import tina from 'tinacms'
import node from '@astrojs/node'
export default defineConfig({ export default defineConfig({
integrations: [ integrations: [
@@ -85,11 +80,7 @@ export default defineConfig({
vite: { vite: {
plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite
}, },
output: 'server', output: 'static', // หรือ 'hybrid' ถ้าต้องการ API routes
adapter: node({ mode: 'standalone' }),
server: {
port: 4321,
},
}) })
``` ```
@@ -100,10 +91,7 @@ export default defineConfig({
"dependencies": { "dependencies": {
"astro": "^6.1.7", "astro": "^6.1.7",
"@tinacms/cli": "^2.1.0", "@tinacms/cli": "^2.1.0",
"tinacms": "^2.2.0", "tinacms": "^2.2.0"
"@astrojs/db": "^0.14.0",
"nanostores": "^0.11.0",
"@nanostores/preact": "^0.5.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/vite": "^4.0.0", "@tailwindcss/vite": "^4.0.0",
@@ -534,115 +522,54 @@ const { post } = Astro.props;
2. **Terms of Service** — ใช้ `templates/terms-of-service.md` 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** **Environment Variables สำหรับ Consent:**
- ไม่ block content
- Options: Accept All, Reject All, Customize
- ถ้า reject → ไม่ load GA4/marketing scripts
**3.2 Consent Logging (PDPA)** ```bash
- เก็บ log ลง Astro DB (ไม่ต้อง MongoDB ภายนอก) # .env
- ระบุ: action, purpose, analytics/marketing/functional flags, ip, userAgent, timestamp CONSENT_SITE_ID=your-site-id-here
CONSENT_API_BASE=https://consent.moreminimore.com
```
**ไฟล์ที่ต้องสร้าง:** **เพิ่ม Consent Script ใน Layout:**
1. **`ConsentBanner.astro`** — Consent banner component (มีใน template)
```astro ```astro
--- ---
// src/components/consent/ConsentBanner.astro // src/layouts/Layout.astro
import { consentStore } from '@/stores/consent'; 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"> <!DOCTYPE html>
<h3>🍪 การยินยอมตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล</h3> <html lang="th">
<p>เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์...</p> <head>
<meta charset="UTF-8" />
<div class="consent-banner__buttons"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<button id="consent-accept-all">ยอมรับทั้งหมด</button> <title>{title}</title>
<button id="consent-reject-all">ปฏิเสธทั้งหมด</button> <meta name="description" content={description} />
<button id="consent-show-preferences">ตั้งค่าคุกกี้</button> </head>
</div> <body>
</div> <slot />
<script> <!-- Consent Script -->
import { consentStore } from './stores/consent'; <script
// ... consent logic src={`${consentApiBase}/consent-loader.js`}
</script> 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 **3.1 Right to be Forgotten**
// src/db/config.ts - Consent service มี API สำหรับลบข้อมูล user
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
--- ---
@@ -927,9 +854,6 @@ astro-tina-starter/
├── .tina/ ├── .tina/
│ ├── config.ts # Tina CMS configuration │ ├── config.ts # Tina CMS configuration
│ └── schema.ts # Content schema definitions │ └── schema.ts # Content schema definitions
├── db/
│ ├── config.ts # Astro DB schema
│ └── seed.ts # Database seed script
├── src/ ├── src/
│ ├── styles/ │ ├── styles/
│ │ └── global.css # Tailwind v4 styles + @theme │ │ └── global.css # Tailwind v4 styles + @theme
@@ -955,26 +879,9 @@ astro-tina-starter/
**Features ที่มี:** **Features ที่มี:**
- Astro 6.1.7 + Tina CMS 2.x - Astro 6.1.7 + Tina CMS 2.x
- Tailwind CSS 4.x with `@tailwindcss/vite` - Tailwind CSS 4.x with `@tailwindcss/vite`
- Astro DB for consent logging
- Nano Stores for client state
- Thai language support - Thai language support
- Docker-ready - Docker-ready
- External consent system integration
### 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
```
--- ---
@@ -1057,20 +964,6 @@ npm install -D @tailwindcss/vite
@import "tailwindcss"; # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities; @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 ### Tina Admin not loading
**อาการ:** `/admin` แสดง blank page หรือ error **อาการ:** `/admin` แสดง blank page หรือ error
@@ -1123,23 +1016,6 @@ const { Content } = await post.render();
<Content /> <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 ## Key Principles