Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

skills/docs/MULTI_CHANNEL_REQUIREMENTS.md

@@ -0,0 +1,434 @@
+# Multi-Channel Content Requirements Document
+
+**Version:** 1.0  
+**Date:** March 2026  
+**Purpose:** Best practices for multi-channel marketing content generation, with emphasis on Thai language markets
+
+---
+
+## Table of Contents
+
+1. [Platform Specifications](#1-platform-specifications)
+2. [Thai Language Considerations](#2-thai-language-considerations)
+3. [Content Templates](#3-content-templates)
+4. [Repurposing Workflow](#4-repurposing-workflow)
+5. [Image Requirements](#5-image-requirements)
+
+---
+
+## 1. Platform Specifications
+
+### 1.1 Facebook (Organic Posts)
+
+| Element | Limit | Best Practice |
+|---------|-------|---------------|
+| Post body | 63,206 chars | Keep 125-250 chars for max engagement |
+| Headline (link posts) | 100 chars max | Front-load key message |
+| Hashtags | 3-5 recommended | Use Thai-relevant hashtags |
+| Video length | 1-240 mins | 30-90 seconds optimal |
+| Image size | 1200x630 px (1.91:1) | Also support 1080x1080 |
+
+**Thai Market Specifics:**
+- Best posting times (Thailand): 12:00-13:00, 19:00-21:00
+- Thai users prefer casual, relatable content
+- Use Thai-language hashtags: #ไทย, #กรุงเทพ, etc.
+- Engagement higher with questions in Thai
+
+**2026 Algorithm Notes:**
+- Video content (Reels) prioritized - 60% of content
+- Link posts penalized (98% of viewed posts have no external links)
+- Groups content receives algorithmic boost
+- Meaningful engagement > vanity metrics
+
+### 1.2 Facebook/Meta Ads
+
+| Element | Limit | Recommended |
+|---------|-------|-------------|
+| Primary text | 5,000 max | 125 chars (appears before fold) |
+| Headline | 40 chars | 25-40 chars optimal |
+| Description | 30 chars (mobile), 90 chars (desktop) | 80-90 chars |
+| CTA buttons | 18 options | Context-dependent |
+
+**CTA Options (Thai Market):**
+- เรียนรู้เพิ่มเติม (Learn More)
+- สมัครเลย (Sign Up Now)
+- ซื้อเลย (Shop Now)
+- ดูรายละเอียด (View Details)
+- ติดต่อเรา (Contact Us)
+
+**Character Truncation:**
+- Mobile: Primary text cuts off ~125 chars
+- Desktop: Headline ~25 chars visible
+- Always test mobile-first
+
+### 1.3 Google Ads (Responsive Search Ads)
+
+| Element | Limit | Best Practice |
+|---------|-------|---------------|
+| Headlines | 15 variations | 30 chars each |
+| Descriptions | 4 variations | 90 chars each |
+| Headline length | 30 chars max | Front-load keywords |
+| Description length | 90 chars max | Include CTA |
+
+**Thai Language RSA:**
+- Each headline/description has separate Thai character limit
+- ก (ko kai) counts as 1 character (same as English)
+- Pin headlines for A/B testing
+- Include Thai keywords naturally in headlines
+
+**Ad Extensions (Required for full coverage):**
+- Sitelinks: 6-8 (25 chars each)
+- Callouts: 4-6 (25 chars each)
+- Structured snippets: 1 header + 6 values
+- Call extension: Optional
+
+### 1.4 X/Twitter (2026)
+
+| Element | Limit | Best Practice |
+|---------|-------|---------------|
+| Post length | 280 chars | 200-260 for threads |
+| Thread | Up to 25 posts | 5-10 optimal |
+| Hashtags | 2-3 per tweet | End of tweet |
+| Media | 1 image/video per tweet | Use images for engagement |
+
+**2026 Best Practices:**
+- Hook tweet (first) must capture attention in first 50 chars
+- Threads benefit from numbered tweets (1/X format)
+- Punctuation and line breaks improve readability
+- Questions drive engagement
+- Native content (not links) prioritized
+
+### 1.5 LinkedIn
+
+| Element | Limit | Best Practice |
+|---------|-------|---------------|
+| Post body | 3,000 chars | 1,300-1,500 for reach |
+| Article | Unlimited | 1,500-2,000 words |
+| Hashtags | 3-5 | Industry + topical |
+| Video | 10 secs - 10 mins | Short-form preferred |
+
+**2026 Algorithm:**
+- Prioritizes expertise signals (thought leadership)
+- Meaningful conversations > likes
+- Interest-based distribution (beyond network)
+- Comments drive most reach
+- First 200 chars critical for scroll-stopping
+
+---
+
+## 2. Thai Language Considerations
+
+### 2.1 Character Counting
+
+| Platform | English | Thai |
+|----------|---------|------|
+| Facebook post | 63,206 chars | Same (Thai chars count individually) |
+| Facebook headline | 40 chars | 40 chars (ไทย = 3 chars) |
+| Google Ads headline | 30 chars | 30 chars |
+| Google Ads description | 90 chars | 90 chars |
+| Twitter | 280 chars | 280 chars (Thai properly counts) |
+
+**Thai Character Properties:**
+- Thai script: Unicode range U+0E00-0E7F
+- Each Thai character = 1 character
+- No spaces between Thai words (word segmentation needed)
+- PyThaiNLP recommended for word counting
+
+### 2.2 Tone & Formality Levels
+
+**Formal (องค์กร/บริษัท):**
+- Use ครับ/ค่ะ (polite particles)
+- Avoid slang
+- Complete sentences
+- Professional terminology
+
+**Casual (กันเอง):**
+- May omit polite particles in close-knit communities
+- Use contemporary expressions
+- More exclamation marks
+- Emoji-friendly
+
+**Neutral (ปกติ):**
+- Standard Thai business writing
+- Polite but not overly formal
+- Clear and direct
+
+### 2.3 Thai Social Media Specifics
+
+**Platform Preferences (Thailand 2026):**
+- Facebook: Most popular, all demographics
+- TikTok: Highest engagement, younger audience
+- LINE: Messaging + content consumption
+- Instagram: Visual brands, urban
+- X (Twitter): News/tech audience
+
+**Thai-Specific Hashtags:**
+- Industry: #ไทย, #กรุงเทพ, #ประเทศไทย
+- Trending: Check daily trends
+- Niche: Industry-specific Thai terms
+
+**Cultural Considerations:**
+- Respect for monarchy (พระมหากษัตริย์)
+- Politeness valued
+- Face-saving important in communication
+- Relationship-building before business
+
+---
+
+## 3. Content Templates
+
+### 3.1 Facebook Post Template
+
+```json
+{
+  "channel": "facebook",
+  "template": {
+    "hook": "Question or attention-grabbing statement (first 50 chars)",
+    "body": "Value proposition, 2-3 sentences max",
+    "cta": "Optional: question to drive comments",
+    "hashtags": "3-5 relevant hashtags"
+  },
+  "thai_variant": {
+    "hook": "คุณกำลังมองหา[problem]ใช่ไหม? 🎯",
+    "body": "[solution] ช่วยคุณได้[benefit]\n\n#hashtag1 #hashtag2 #hashtag3"
+  }
+}
+```
+
+### 3.2 Facebook Ads Template
+
+```json
+{
+  "channel": "facebook_ads",
+  "template": {
+    "primary_text": {
+      "structure": "[Hook - problem/question]\\n\\n[Solution - your offer]\\n\\n[CTA]",
+      "length": "125 chars recommended",
+      "thai_example": "กำลังมองหาวิธี[solution]?\\n\\nเราช่วยคุณได้[benefit]\\n\\nสมัครเลย!"
+    },
+    "headline": {
+      "structure": "[Benefit or solution focused]",
+      "length": "25-40 chars",
+      "thai_example": "แก้ปัญหา[problem] ด้วย[product]"
+    },
+    "description": {
+      "structure": "[Additional detail + urgency]",
+      "length": "80-90 chars",
+      "thai_example": "เริ่มต้น[free_trial] วันนี้ ลองก่อนตัดสินใจ"
+    }
+  }
+}
+```
+
+### 3.3 Google Ads Template
+
+```json
+{
+  "channel": "google_ads",
+  "responsive_search_ad": {
+    "headlines": [
+      {"text": "[Primary keyword] - [Benefit]", "pin": false},
+      {"text": "[Brand] | [Primary keyword]", "pin": false},
+      {"text": "[Solution] สำหรับ [Audience]", "pin": false},
+      {"text": "[Number] เหตุผลที่เลือก [Brand]", "pin": false},
+      {"text": "[Urgency]: [Offer]", "pin": false}
+    ],
+    "descriptions": [
+      {"text": "[Detailed benefit + CTA]"},
+      {"text": "[Social proof + link]"}
+    ],
+    "thai_headlines": [
+      "บริการ[Product] คุณภาพสูง",
+      "ราคาพิเศษ สั่งซื้อเลย",
+      "[Brand] ผู้เชี่ยวชาญ[Industry]",
+      "ส่งเร็ว ทั่วประเทศไทย",
+      "รีวิวดี ลูกค้าพึงพอใจ"
+    ]
+  }
+}
+```
+
+### 3.4 X/Twitter Thread Template
+
+```json
+{
+  "channel": "x",
+  "thread_template": {
+    "hook": {
+      "content": "Stop-scrolling statement or question",
+      "length": "200-250 chars",
+      "thai_example": "🔥 [Stat/Claim] ที่[Audience] ทุกคนต้องรู้"
+    },
+    "body": {
+      "structure": "1-8 tweets, each making 1 point",
+      "format": "Numbered points (1/, 2/, etc.)",
+      "engagement": "Questions, counters, strong opinions"
+    },
+    "cta": {
+      "content": "Final tweet with CTA",
+      "thai_example": "ถ้าชอบบทความนี้ follow ด้วยนะครับ ✓\n\n[Link]"
+    }
+  }
+}
+```
+
+### 3.5 LinkedIn Post Template
+
+```json
+{
+  "channel": "linkedin",
+  "post_template": {
+    "hook": {
+      "structure": "Personal story or controversial take",
+      "length": "First 200 chars critical",
+      "thai_example": "ผมเพิ่ง[experience] และได้เรียนรู้ว่า..."
+    },
+    "body": {
+      "structure": "2-3 paragraphs, mixed sentence lengths",
+      "expert_signals": "Include data, credentials, specific examples",
+      "engagement": "Questions for comments"
+    },
+    "cta": {
+      "structure": "Soft CTA, not salesy",
+      "thai_example": "คุณคิดเห็นอย่างไร? แชร์ประสบการณ์ของคุณได้เลยครับ"
+    },
+    "hashtags": {
+      "structure": "3-5 hashtags",
+      "format": "[Industry] + [Topic] + [Thailand optional]"
+    }
+  }
+}
+```
+
+---
+
+## 4. Repurposing Workflow
+
+### 4.1 Blog to Multi-Channel Flow
+
+```
+Blog Post (2000-3000 words)
+       │
+       ▼
+┌─────────────────────────────────────────┐
+│  Extract Key Points (10-15 insights)    │
+└─────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────┐
+│  Content Atomization                    │
+├─────────────────────────────────────────┤
+│  • Statistics → Infographic            │
+│  • Tips → Carousel slides               │
+│  • Quotes → Single images               │
+│  • Steps → Thread                       │
+│  • How-to → Video                       │
+└─────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────┐
+│  Channel Distribution                   │
+├─────────────────────────────────────────┤
+│  Facebook: 1 post + 1-2 ads             │
+│  X: 5-10 tweet thread                   │
+│  LinkedIn: 1-2 posts                    │
+│  Google Ads: 15 headlines + 4 desc      │
+│  Blog: Original (if not published)     │
+└─────────────────────────────────────────┘
+```
+
+### 4.2 Content Repurposing Matrix
+
+| Original Content | Facebook | Facebook Ads | Google Ads | X Thread | LinkedIn |
+|------------------|----------|--------------|------------|----------|----------|
+| How-to article | Carousel post | Primary text | Headlines | Step-by-step thread | How-to post |
+| Listicle | Image posts | Headline focus | List keywords | Numbered tweets | Summary post |
+| Data/Statistics | Infographic | Stat in primary | Numbers in headlines | Key stats thread | Data-driven post |
+| Product review | Video + text | Benefit-driven | Brand keywords | Comparison thread | Review post |
+
+### 4.3 Repurposing Best Practices
+
+1. **Start with the longest format:** Blog post (SEO value)
+2. **Extract before adapting:** Pull key points first
+3. **Platform-native:** Don't just copy-paste; adapt format
+4. **Consistent messaging, varied hooks:** Same value, different angles
+5. **Timing matters:** Stagger posts, don't dump all at once
+
+---
+
+## 5. Image Requirements
+
+### 5.1 Platform Image Specs
+
+| Platform | Aspect Ratio | Dimensions | Format | Notes |
+|----------|--------------|------------|--------|-------|
+| Facebook Feed | 1.91:1, 1:1 | 1200x630, 1080x1080 | JPG, PNG | 1:1 growing preference |
+| Facebook Stories | 9:16 | 1080x1920 | JPG, PNG | Full screen |
+| Instagram Feed | 1:1, 4:5, 1.91:1 | 1080x1080, 1080x1350, 1080x566 | JPG, PNG | 4:5 gets more space |
+| Instagram Stories | 9:16 | 1080x1920 | JPG, PNG | |
+| X/Twitter | 16:9, 1:1 | 1200x675, 1080x1080 | JPG, PNG | Cards: 800x418 |
+| LinkedIn | 1.91:1, 1:1 | 1200x627, 1080x1080 | JPG, PNG | |
+| Google Ads | 1.91:1 | 1200x628 | JPG, PNG | |
+
+### 5.2 Text Overlay Guidelines
+
+| Platform | Text % | Best Practice |
+|----------|--------|---------------|
+| Facebook | <20% | Avoid heavy text, use as accent |
+| Instagram | <20% | Text can be more prominent in stories |
+| Google Ads | <20% | Google may reject >20% text |
+| LinkedIn | <20% | Professional, minimal text |
+
+### 5.3 Thai-Optimized Image Tips
+
+- **Use Thai text sparingly:** English + numbers more readable
+- **If Thai text needed:** Bold, large, high contrast
+- **Cultural elements:** Thai-friendly aesthetics, Bangkok/Thai contexts
+- **Colors:** Red/white (Thai flag colors) for local relevance
+- **People:** Thai models/faces increase relatability
+
+---
+
+## Appendix: AI Content Humanization
+
+### Avoiding Robotic Patterns
+
+**Common AI Mistakes:**
+- Overuse of transition words (furthermore, additionally)
+- Generic openings (In today's world, It's important to note)
+- Perfectly structured paragraphs
+- Lack of specific examples
+- No personal voice or opinion
+
+**Humanization Techniques:**
+
+1. **Vary sentence structure:** Mix short punchy + longer flowing
+2. **Add specific details:** Names, dates, real examples
+3. **Include opinions/takes:** "Here's what I think..."
+4. **Use contractions:** Don't → don't (when appropriate for tone)
+5. **Rhetorical questions:** Engage reader directly
+6. **Cultural references:** Thai context, local examples
+7. **Imperfections OK:** Occasionally fragment sentences
+8. **Active voice:** Most of the time
+
+**Thai-Specific:**
+- Add Thai idioms (สำนวน) appropriately
+- Use casual markers (ครับ/ค่ะ) correctly
+- Reference Thai current events
+- Include Thai-specific examples
+
+---
+
+## References
+
+- Meta Business Help Center - Ad Formats
+- Google Ads Help - Responsive Search Ads
+- Twitter/X Business - Best Practices
+- LinkedIn Marketing Solutions - Content Guidelines
+- Sprinklr Social Media Benchmarks 2026
+- Thai Digital Marketing Association
+- DataReportal Digital 2026 Thailand
+
+---
+
+*Document maintained for OpenCode SEO Multi-Channel Skill*

skills/docs/readme/_theme-cell.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>theme cell</title>
+<link rel="stylesheet" href="../../assets/fonts.css">
+<link rel="stylesheet" href="../../assets/base.css">
+<link id="theme-link" rel="stylesheet" href="../../assets/themes/minimal-white.css">
+<style>
+  html,body{height:100%;margin:0;overflow:hidden}
+  body{
+    background:var(--bg,#fff);color:var(--text-1,#111);
+    font-family:var(--font-sans);box-sizing:border-box;
+    padding:5cqw 6cqw;container-type:size;
+  }
+  .k{font:700 2.6cqw/1 var(--font-mono,monospace);color:var(--text-3,#888);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5cqh}
+  h1{font:900 11cqw/.95 var(--font-display,var(--font-sans));letter-spacing:-.025em;margin:0 0 3cqh;color:var(--text-1)}
+  .lede{font:500 3.2cqw/1.4 var(--font-sans);color:var(--text-2,#555);margin:0 0 3.5cqh;max-width:85cqw}
+  .row{display:flex;gap:1.4cqw;flex-wrap:wrap}
+  .pill{padding:1.2cqh 2.4cqw;border-radius:999px;background:var(--surface-2,#f4f4f8);color:var(--text-1);font:600 2.3cqw/1 var(--font-sans);border:1px solid var(--border,#e5e5ea)}
+  .pill.accent{background:var(--accent,#7c5cff);color:#fff;border-color:transparent}
+  .kpi{margin-top:4cqh;display:flex;gap:5cqw}
+  .kpi div{font:900 10cqw/1 var(--font-display,var(--font-sans));letter-spacing:-.03em;color:var(--accent,#7c5cff)}
+  .kpi div span{display:block;font:500 1.8cqw/1 var(--font-sans);color:var(--text-3,#888);margin-top:1cqh;letter-spacing:.08em;text-transform:uppercase}
+  .gradient-hero{background:linear-gradient(90deg,var(--accent,#7c5cff),var(--accent-2,#22d3ee),var(--accent-3,#ff4d8d));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+</style>
+</head>
+<body>
+  <div class="k" id="kname">theme · minimal-white</div>
+  <h1 id="h1">2026<br>年度回顾</h1>
+  <p class="lede">同一份 outline，换一行 theme，排版、字体、色系、装饰全部重写。</p>
+  <div class="row">
+    <span class="pill accent">12 里程碑</span>
+    <span class="pill">团队 +40%</span>
+    <span class="pill">SAT 98%</span>
+  </div>
+  <div class="kpi">
+    <div>98%<span>Sat</span></div>
+    <div>12<span>MS</span></div>
+    <div>7×<span>Faster</span></div>
+  </div>
+<script>
+(function(){
+  const m = /[?&]theme=([\w-]+)/.exec(location.search||'');
+  if (m){
+    const name = m[1];
+    document.getElementById('theme-link').href = '../../assets/themes/'+name+'.css';
+    document.getElementById('kname').textContent = 'theme · ' + name;
+    if (/rainbow|aurora|cyberpunk|vaporwave|y2k/.test(name)){
+      document.getElementById('h1').classList.add('gradient-hero');
+    }
+  }
+})();
+</script>
+</body>
+</html>

skills/docs/readme/montage-animations.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en" data-theme="aurora">
+<head>
+<meta charset="utf-8">
+<title>47 animations showcase</title>
+<link rel="stylesheet" href="../../assets/fonts.css">
+<link rel="stylesheet" href="../../assets/base.css">
+<link rel="stylesheet" href="../../assets/themes/aurora.css">
+<link rel="stylesheet" href="../../assets/animations/animations.css">
+<style>
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#0a0a14;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:#fff;padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#ff4d8d,#f59e0b,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:#aab0c0;letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 56px rgba(0,0,0,.45);background:#050510;min-height:0}
+  .cell .fx-host{position:absolute;inset:0}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(10,10,20,.72);color:#fff;text-transform:uppercase;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
+  .cell .kind{position:absolute;left:14px;top:12px;z-index:5;font:700 10px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.14em;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;text-transform:uppercase;border:1px solid rgba(255,255,255,.16)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>47</b>Animations — 27 CSS · 20 Canvas FX</h2>
+    <div class="sub">html-ppt · data-anim="…" / data-fx="…" · pick 8 canvas FX</div>
+  </div>
+  <div class="grid">
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="knowledge-graph" style="--accent:#7c5cff;--accent-2:#22d3ee;--text-1:#fff"></div><span class="label">knowledge-graph</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="neural-net" style="--accent:#22d3ee;--accent-2:#ff4d8d"></div><span class="label">neural-net</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="galaxy-swirl" style="--accent:#7c5cff;--accent-2:#ff4d8d"></div><span class="label">galaxy-swirl</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="constellation" style="--accent:#9fb4ff"></div><span class="label">constellation</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="matrix-rain"></div><span class="label">matrix-rain</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="starfield" style="--accent:#fff;--accent-2:#9fb4ff"></div><span class="label">starfield</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="firework" style="--accent:#ff4d8d;--accent-2:#22d3ee"></div><span class="label">firework</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="particle-burst" style="--accent:#ff4d8d;--accent-2:#7c5cff"></div><span class="label">particle-burst</span></div>
+  </div>
+<script src="../../assets/animations/fx/_util.js"></script>
+<script src="../../assets/animations/fx/knowledge-graph.js"></script>
+<script src="../../assets/animations/fx/neural-net.js"></script>
+<script src="../../assets/animations/fx/galaxy-swirl.js"></script>
+<script src="../../assets/animations/fx/constellation.js"></script>
+<script src="../../assets/animations/fx/matrix-rain.js"></script>
+<script src="../../assets/animations/fx/starfield.js"></script>
+<script src="../../assets/animations/fx/firework.js"></script>
+<script src="../../assets/animations/fx/particle-burst.js"></script>
+<script>
+(function(){
+  document.querySelectorAll('[data-fx]').forEach(el => {
+    const name = el.getAttribute('data-fx');
+    const fn = window.HPX && window.HPX[name];
+    if (typeof fn === 'function') {
+      try { fn(el, {}); } catch(e) { console.warn('[fx]', name, e); }
+    }
+  });
+})();
+</script>
+</body>
+</html>

skills/docs/readme/montage-layouts.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>31 layouts showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#2563eb,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 48px rgba(10,10,30,.1);background:#fff;min-height:0}
+  .cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>31</b>Layouts — batteries included, demo data bundled</h2>
+    <div class="sub">html-ppt · templates/single-page/*.html · pick 8 of 31</div>
+  </div>
+  <div class="grid" id="grid"></div>
+
+<script>
+const LAYOUTS = [
+  ['kpi-grid','KPI Grid'],
+  ['chart-bar','Chart · Bar'],
+  ['timeline','Timeline'],
+  ['mindmap','Mindmap'],
+  ['flow-diagram','Flow Diagram'],
+  ['roadmap','Roadmap'],
+  ['pros-cons','Pros / Cons'],
+  ['code','Code']
+];
+const grid = document.getElementById('grid');
+LAYOUTS.forEach(([name,label]) => {
+  const cell = document.createElement('div');
+  cell.className = 'cell';
+  const ifr = document.createElement('iframe');
+  ifr.src = '../../templates/single-page/' + name + '.html';
+  ifr.loading = 'eager';
+  cell.appendChild(ifr);
+  const lab = document.createElement('span');
+  lab.className = 'label';
+  lab.textContent = label + ' · ' + name;
+  cell.appendChild(lab);
+  grid.appendChild(cell);
+});
+
+function fit(){
+  document.querySelectorAll('.cell iframe').forEach(ifr => {
+    const c = ifr.parentElement;
+    const w = c.clientWidth, h = c.clientHeight;
+    const s = Math.min(w / 1920, h / 1080);
+    ifr.style.transform = 'scale('+s+')';
+    const sw = 1920*s, sh = 1080*s;
+    ifr.style.left = ((w - sw)/2) + 'px';
+    ifr.style.top  = ((h - sh)/2) + 'px';
+    ifr.style.position = 'absolute';
+  });
+}
+window.addEventListener('resize', fit);
+setTimeout(fit, 80);
+setTimeout(fit, 400);
+setTimeout(fit, 1200);
+</script>
+</body>
+</html>

skills/docs/readme/montage-templates.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>14 full-deck templates showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#f59e0b,#ff4d8d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px;min-height:0}
+  .cell{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 56px rgba(10,10,30,.12);background:#fff;min-height:0}
+  .cell.dark{background:#0a0a14;border-color:rgba(255,255,255,.08)}
+  .cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left}
+  .cell .label{position:absolute;left:16px;bottom:14px;z-index:5;font:700 12px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+  .cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>14</b>Full-Deck Templates — complete world-views</h2>
+    <div class="sub">html-ppt · templates/full-decks/* · pick 6 of 14</div>
+  </div>
+  <div class="grid" id="grid"></div>
+
+<script>
+const DECKS = [
+  ['graphify-dark-graph',true],
+  ['xhs-post',false],
+  ['hermes-cyber-terminal',true],
+  ['knowledge-arch-blueprint',false],
+  ['pitch-deck',false],
+  ['xhs-white-editorial',false]
+];
+const grid = document.getElementById('grid');
+DECKS.forEach(([name, dark]) => {
+  const cell = document.createElement('div');
+  cell.className = 'cell' + (dark ? ' dark' : '');
+  const ifr = document.createElement('iframe');
+  ifr.src = '../../templates/full-decks/' + name + '/index.html';
+  ifr.loading = 'eager';
+  cell.appendChild(ifr);
+  const lab = document.createElement('span');
+  lab.className = 'label';
+  lab.textContent = name;
+  cell.appendChild(lab);
+  grid.appendChild(cell);
+});
+
+function fit(){
+  document.querySelectorAll('.cell iframe').forEach(ifr => {
+    const c = ifr.parentElement;
+    const w = c.clientWidth, h = c.clientHeight;
+    const s = Math.min(w / 1920, h / 1080);
+    ifr.style.transform = 'scale('+s+')';
+    const sw = 1920*s, sh = 1080*s;
+    ifr.style.left = ((w - sw)/2) + 'px';
+    ifr.style.top  = ((h - sh)/2) + 'px';
+    ifr.style.position = 'absolute';
+  });
+}
+window.addEventListener('resize', fit);
+setTimeout(fit, 100);
+setTimeout(fit, 500);
+setTimeout(fit, 1500);
+</script>
+</body>
+</html>

skills/docs/readme/montage-themes.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>36 themes showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter","SF Pro Display",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#7c5cff,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 48px rgba(10,10,30,.1);background:#fff;min-height:0}
+  .cell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+  .cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>36</b>Themes — one keyword, new identity</h2>
+    <div class="sub">html-ppt · assets/themes/*.css · pick 8 of 36</div>
+  </div>
+  <div class="grid">
+    <div class="cell"><iframe src="_theme-cell.html?theme=minimal-white"></iframe><span class="label">minimal-white</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=tokyo-night"></iframe><span class="label">tokyo-night</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=aurora"></iframe><span class="label">aurora</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=xiaohongshu-white"></iframe><span class="label">xiaohongshu-white</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=cyberpunk-neon"></iframe><span class="label">cyberpunk-neon</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=dracula"></iframe><span class="label">dracula</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=soft-pastel"></iframe><span class="label">soft-pastel</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=magazine-bold"></iframe><span class="label">magazine-bold</span></div>
+  </div>
+</body>
+</html>