feat: add Skills template tab with platform-skill.md reference

- Add platform-skill.md — comprehensive 860-line reference of all TextAgent
  capabilities (11 DocGen tags, variable system, code execution, media, etc.)
- Add Skills tab to Templates modal as a standard template category
- Create js/templates/skills.js — fetches platform-skill.md at load time
- Register skills category in templates.js concat + icon mappings
- Add skills.js to src/main.js Phase 3c template imports
- Fix template category pills overflow with scrollable container
- Minor README/docgen fixes (@Think → @Think: yes mode)

Author: ijbo

README.md

@@ -36,7 +36,7 @@
 | **Desktop** | Native app via Neutralino.js with system tray and offline support |
 | **Code Execution** | 7 languages in-browser: Bash ([just-bash](https://justbash.dev/)), Math (Nerdamer), LaTeX (MathJax + Nerdamer evaluation), Python ([Pyodide](https://pyodide.org/)), HTML (sandboxed iframe, `html-autorun` for widgets/quizzes), JavaScript (sandboxed iframe), SQL ([sql.js](https://sql.js.org/) SQLite) · 25+ compiled languages via [Judge0 CE](https://ce.judge0.com): C, C++, Rust, Go, Java, TypeScript, Kotlin, Scala, Ruby, Swift, Haskell, Dart, C#, and more · **▶ Run All** notebook engine — one-click sequential execution with preflight dialog (block table with model/status), pre-execution model loading (AI + TTS auto-loaded before blocks run), progress bar, abort, per-block status badges, detailed console logging, and SQLite shared context store |
 | **Security** | Content Security Policy (CSP), SRI integrity hashes, XSS sanitization (DOMPurify), ReDoS protection, Firestore write-token ownership, API keys via HTTP headers, postMessage origin validation, 8-char passphrase minimum, sandboxed code execution |
-| **AI Document Tags** | `{{@AI:}}` text generation, `{{@Think:}}` deep reasoning, `{{@Image:}}` image generation (Gemini Imagen), `{{@OCR:}}` image-to-text extraction (Text/Math/Table modes via Granite Docling 258M or Florence-2 230M, PDF page rendering via pdf.js), `{{@TTS:}}` text-to-speech playback (Kokoro TTS per card, language selector, ▶ Play / ⬇ Save WAV), `{{@STT:}}` speech-to-text dictation (engine selector: Whisper/Voxtral/Web Speech API, 11 languages, Record/Stop/Insert/Clear), `{{@Translate:}}` translation (target language selector, integrated TTS pronunciation, cloud model routing), `{{@Game:}}` game builder (AI-generated or pre-built, Canvas 2D/Three.js/P5.js, import/export HTML) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`, `@upload`, `@model`, `@engine`, `@lang`, `@prebuilt`); `@model:` field persists selected model per card with intelligent defaults (OCR→`granite-docling`, TTS→`kokoro-tts`, STT→`voxtral-stt`, Image→`imagen-ultra`); editable `@prompt:` textarea and `@step:` inputs in preview cards; description/prompt separation (bare text = label, `@prompt:` = AI instruction); 📎 image/PDF upload for multimodal vision analysis; per-card model selector with document-portable model persistence, concurrent block operations |
+| **AI Document Tags** | `{{@AI:}}` text generation (`@think: Yes` for deep reasoning), `{{@Image:}}` image generation (Gemini Imagen), `{{@OCR:}}` image-to-text extraction (Text/Math/Table modes via Granite Docling 258M or Florence-2 230M, PDF page rendering via pdf.js), `{{@TTS:}}` text-to-speech playback (Kokoro TTS per card, language selector, ▶ Play / ⬇ Save WAV), `{{@STT:}}` speech-to-text dictation (engine selector: Whisper/Voxtral/Web Speech API, 11 languages, Record/Stop/Insert/Clear), `{{@Translate:}}` translation (target language selector, integrated TTS pronunciation, cloud model routing), `{{@Game:}}` game builder (AI-generated or pre-built, Canvas 2D/Three.js/P5.js, import/export HTML) — `@` prefix syntax on all tag types + metadata fields (`@name`, `@use`, `@think`, `@search`, `@prompt`, `@step`, `@upload`, `@model`, `@engine`, `@lang`, `@prebuilt`); `@model:` field persists selected model per card with intelligent defaults (OCR→`granite-docling`, TTS→`kokoro-tts`, STT→`voxtral-stt`, Image→`imagen-ultra`); editable `@prompt:` textarea and `@step:` inputs in preview cards; description/prompt separation (bare text = label, `@prompt:` = AI instruction); 📎 image/PDF upload for multimodal vision analysis; per-card model selector with document-portable model persistence, concurrent block operations |
 | **🔌 API Calls** | `{{API:}}` REST API integration — GET/POST/PUT/DELETE methods, custom headers, JSON body, response stored in `$(api_varName)` variables; inline review panel; toolbar GET/POST buttons |
 | **🔗 Agent Flow** | `{{Agent:}}` multi-step pipeline — define Step 1/2/3, chain outputs, per-card model + search provider selector, live step status indicators (⏳/✅/❌), review combined output |
 | **🔍 Web Search** | Toggle web search for AI — 7 providers: DuckDuckGo (free), Brave Search, Serper.dev, Tavily (AI-optimized), Google CSE, Wikipedia, Wikidata; search results injected into LLM context; source citations in responses; per-agent-card search provider selector |
@@ -260,9 +260,9 @@ Import files directly — they're auto-converted to Markdown client-side:
 <details open>
 <summary><strong>🏷️ AI Document Tags — Generate Entire Sections</strong></summary>
 
-**One-click document generation.** Use `{{AI:}}` for text, `{{Think:}}` for deep reasoning, and `{{Image:}}` for AI-generated images. Each tag becomes a card with generate, review, accept/reject, and regenerate controls — all operating independently.
+**One-click document generation.** Use `{{AI:}}` for text (with `@think: Yes` for deep reasoning) and `{{Image:}}` for AI-generated images. Each tag becomes a card with generate, review, accept/reject, and regenerate controls — all operating independently.
 
-<img src="public/assets/demos/15_ai_doc_tags.webp" alt="AI Document Tags — generating content with AI, Think, and Image tags" width="100%">
+<img src="public/assets/demos/15_ai_doc_tags.webp" alt="AI Document Tags — generating content with AI and Image tags, Think toggle for deep reasoning" width="100%">
 
 </details>
 

changelogs/CHANGELOG-skills-tab.md

@@ -0,0 +1,16 @@
+# CHANGELOG — Skills Template Tab + Platform Skill Document
+
+## Added
+- **`platform-skill.md`** — Comprehensive platform skill reference (859 lines) documenting all 11 DocGen tags, variable system, code execution, media embedding, Run All engine, web search, file import, and 7 template composition patterns. Designed to be fed to any AI to generate rich TextAgent templates.
+- **`js/templates/skills.js`** — New "Skills" template category that fetches `platform-skill.md` at load time using top-level `await`. Registers "Platform Skills Reference" as a standard template card.
+- **Skills tab** in Templates modal — appears alongside All, AI, Documentation, Project, etc. as a regular category pill.
+
+## Modified
+- **`src/main.js`** — Added `skills.js` to Phase 3c template imports.
+- **`js/templates.js`** — Added `__MDV_TEMPLATES_SKILLS` to template concat array, `skills` case to icon class/icon switch statements.
+- **`js/modal-templates.js`** — Added Skills category button to template pills row.
+- **`css/modals.css`** — Added `overflow-x: auto`, `flex-shrink: 0`, and hidden scrollbar to `.template-categories` to prevent pill overflow when many categories are present.
+- **`js/templates/documentation.js`** — Minor text fix.
+- **`README.md`** — Minor corrections (`@Think` → `@think: yes` mode of `{{@AI:}}`).
+- **`js/ai-docgen-ui.js`** — Minor fix.
+- **`js/help-mode.js`** — Minor fix.

css/modals.css

@@ -1302,6 +1302,9 @@
 .template-categories {
   display: flex;
   padding: 16px 24px 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  flex-shrink: 0;
 }
 
 .template-cat-pills {
@@ -1311,6 +1314,16 @@
   border: 1.5px solid #c0c0cc;
   border-radius: 10px;
   padding: 3px;
+  flex-shrink: 0;
+}
+
+/* Hide scrollbar but keep scrolling */
+.template-categories::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+.template-categories {
+  scrollbar-width: none;
 }
 
 [data-theme="dark"] .template-cat-pills {

js/ai-docgen-ui.js

@@ -62,7 +62,7 @@
         var blocks = M.parseDocgenBlocks(text);
 
         if (blocks.length === 0) {
-            showToast('No {{AI:}}, {{Think:}}, {{Image:}}, or {{Agent:}} blocks found. Tag sections first.', 'warning');
+            showToast('No {{AI:}}, {{Image:}}, or {{Agent:}} blocks found. Tag sections first.', 'warning');
             return;
         }
 

js/help-mode.js

@@ -237,7 +237,7 @@
         },
         '[data-action="think-tag"]': {
             name: 'AI Think Tag',
-            desc: 'Wrap text in {{Think: ...}} — AI uses deep reasoning mode to analyze and respond with step-by-step thinking.',
+            desc: 'Wrap text in {{AI: @think: Yes ...}} — AI uses deep reasoning mode to analyze and respond with step-by-step thinking.',
             shortcut: null,
             demo: 'assets/demos/15_ai_doc_tags.webp'
         },
@@ -346,7 +346,7 @@
         },
         '#docgen-fill-btn': {
             name: 'Fill All AI Blocks',
-            desc: 'Process all {{AI:}}, {{Think:}}, {{Image:}}, {{Agent:}}, and {{API:}} tags in the document. Each block generates independently and can be accepted, rejected, or regenerated.',
+            desc: 'Process all {{AI:}}, {{Image:}}, {{Agent:}}, and {{API:}} tags in the document. Each block generates independently and can be accepted, rejected, or regenerated.',
             shortcut: null,
             demo: 'assets/demos/15_ai_doc_tags.webp'
         },

js/modal-templates.js

@@ -642,6 +642,7 @@ const chatResponse = await openai.chat.completions.create({
                     <button class="template-cat-btn" data-category="tables">Tables</button>
                     <button class="template-cat-btn" data-category="finance">Finance</button>
                     <button class="template-cat-btn" data-category="games">Games</button>
+                    <button class="template-cat-btn" data-category="skills">Skills</button>
                 </div>
             </div>
             <div class="template-grid" id="template-grid"></div>

js/templates.js

@@ -19,7 +19,8 @@
     window.__MDV_TEMPLATES_AI || [],
     window.__MDV_TEMPLATES_AGENTS || [],
     window.__MDV_TEMPLATES_FINANCE || [],
-    window.__MDV_TEMPLATES_GAMES || []
+    window.__MDV_TEMPLATES_GAMES || [],
+    window.__MDV_TEMPLATES_SKILLS || []
   );
 
 
@@ -49,6 +50,7 @@
       case 'ai': return 'creative';
       case 'finance': return 'project';
       case 'games': return 'creative';
+      case 'skills': return 'doc';
       default: return 'doc';
     }
   }
@@ -67,6 +69,7 @@
       case 'ai': return 'bi-robot';
       case 'finance': return 'bi-graph-up-arrow';
       case 'games': return 'bi-controller';
+      case 'skills': return 'bi-book';
       default: return 'bi-file-earmark';
     }
   }
@@ -503,6 +506,7 @@
       templateCategories.querySelectorAll('.template-cat-btn').forEach(b => {
         b.classList.toggle('active', b === btn);
       });
+
       filterTemplates();
     });
   }

js/templates/documentation.js

@@ -18,7 +18,7 @@ window.__MDV_TEMPLATES_DOCUMENTATION = [
       '| **Rendering** | GitHub Styling · Syntax Highlighting (180+ langs) · LaTeX Math (MathJax) · Mermaid Diagrams (zoom/pan/export) · PlantUML · Callout blocks · Footnotes · Emoji · Anchor links |\n' +
       '| **🎬 Media Embedding** | Video playback via `![alt](video.mp4)` syntax · YouTube/Vimeo auto-embeds · `embed` code block for responsive media grids (`cols=1-4`, `height=N`) · Video.js v10 with native fallback · Website URLs as rich link preview cards |\n' +
       '| **🤖 AI Assistant** | 3 local Qwen 3.5 sizes (0.8B / 2B / 4B via WebGPU/WASM) · Gemini 3.1 Flash Lite · Groq Llama 3.3 70B · OpenRouter — summarize, expand, rephrase, grammar-fix, explain, simplify, auto-complete; AI writing tags; per-card model selection; smart model loading UX (cache vs download, delete cached models) |\n' +
-      '| **🏷️ AI Document Tags** | `{{@AI:}}` text · `{{@Think:}}` reasoning · `{{@Image:}}` images · `{{@Memory:}}` context · `{{@Agent:}}` pipelines · `{{@OCR:}}` image-to-text (Text/Math/Table, Granite Docling, Florence-2) · `{{@TTS:}}` speech · `{{@STT:}}` dictation · `{{@Translate:}}` translation · `{{@Game:}}` game builder — `@model:` per-card persistence · `@upload:` image/PDF · `@prompt:` editable textareas · concurrent blocks |\n' +
+      '| **🏷️ AI Document Tags** | `{{@AI:}}` text (`@think: Yes` for reasoning) · `{{@Image:}}` images · `{{@Memory:}}` context · `{{@Agent:}}` pipelines · `{{@OCR:}}` image-to-text (Text/Math/Table, Granite Docling, Florence-2) · `{{@TTS:}}` speech · `{{@STT:}}` dictation · `{{@Translate:}}` translation · `{{@Game:}}` game builder — `@model:` per-card persistence · `@upload:` image/PDF · `@prompt:` editable textareas · concurrent blocks |\n' +
       '| **🔌 API Calls** | `{{API:}}` REST API integration — GET/POST/PUT/DELETE · custom headers · JSON body · response stored in `$(api_varName)` · inline review panel · toolbar GET/POST buttons |\n' +
       '| **🔗 Agent Flow** | `{{@Agent:}}` multi-step pipelines — chain @step 1→2→3, output feeds next step · per-card model + search provider selector · live status indicators |\n' +
       '| **🔍 Web Search** | Toggle web search for AI — DuckDuckGo (free) · Brave Search · Serper.dev — search results injected into LLM context · source citations |\n' +

js/templates/skills.js

@@ -0,0 +1,18 @@
+// ============================================
+// templates/skills.js — Skills Templates
+// Platform Skills content is fetched from platform-skill.md
+// ============================================
+
+// Fetch content synchronously before templates.js reads it
+const _resp = await fetch('platform-skill.md').catch(() => null);
+const _skillContent = (_resp && _resp.ok) ? await _resp.text() : '# TextAgent — Platform Skill Reference\n\n> Skills content could not be loaded.';
+
+window.__MDV_TEMPLATES_SKILLS = [
+  {
+    name: 'Platform Skills Reference',
+    category: 'skills',
+    icon: 'bi-book',
+    description: 'Complete reference of all TextAgent capabilities — feed this to any AI to generate rich templates',
+    content: _skillContent
+  }
+];