@vpxa/aikit 0.1.57 → 0.1.59

package/scaffold/general/skills/present/SKILL.md

@@ -162,6 +162,154 @@ The dashboard uses a professional dark theme:
 
 ---
 
+## Architecture Diagrams
+
+> **Behavioral rule:** When asked to present, visualize, or display system architecture, infrastructure, or service topology — **always load the `c4-architecture` skill** and use its HTML/SVG format (Method 2 below) for rich visual output via `present`. The Mermaid method (Method 1) is acceptable only for quick in-chat previews or when the user explicitly asks for Mermaid. Default to HTML/SVG for all architecture presentations.
+
+The `present` tool can render C4-style architecture diagrams in both `html` and `browser` formats. The visual design system is centralized in the `c4-architecture` skill's reference file — load that skill for the full type registry, color palette, and template.
+
+**Design system source:** `c4-architecture/references/html-design-system.md` (single source of truth for all architecture diagram styling)
+
+### When to Use (Auto-Trigger)
+
+Load the `c4-architecture` skill and use HTML/SVG format when the user:
+- Asks to "show architecture", "present the system design", "visualize infrastructure"
+- Wants to display service topology, deployment layout, or component relationships
+- Requests architecture review output, system overview dashboards, or technical presentations
+- Uses words like "architecture diagram", "system diagram", "infrastructure diagram"
+
+### Rendering Methods
+
+| Method | Block Type | Format | When to Use |
+|--------|-----------|--------|-------------|
+| Mermaid C4 | `mermaid` | html / browser | Quick diagrams, developer-focused, version-controlled |
+| HTML/SVG | `markdown` | html / browser | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
+
+### Method 1: Mermaid C4 Diagrams
+
+Use a `mermaid` content block with standard C4 Mermaid syntax:
+
+present({
+  format: "html",  // or "browser"
+  title: "System Architecture",
+  content: [
+    {
+      type: "mermaid",
+      title: "C4 Container Diagram",
+      value: `C4Container
+  title Container Diagram - Payment System
+
+  Person(user, "Customer", "Places orders")
+
+  Container_Boundary(app, "Payment Platform") {
+
+---
+
+## Rendering Troubleshooting
+
+### Why `html` format sometimes shows raw text
+
+The `html` format renders content inside an MCP Apps companion iframe (UIResource). The chat text fallback is intentionally minimal (just the title). When the UIResource fails to load, the user sees only the title or raw JSON — NOT the rendered dashboard.
+
+**Common causes of UIResource rendering failure:**
+1. **MCP Apps not enabled** — The setting `chat.mcp.apps.enabled` must be `true` in VS Code settings
+2. **Companion app build missing** — The `packages/present` companion app must be built (`npm run build`)
+3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
+4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
+
+### When to prefer `browser` over `html`
+
+Use `format: "browser"` instead of `html` when:
+- Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
+- The output must be **guaranteed visible** (browser format always opens, no silent failures)
+- You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
+- The user reports that `html` format "didn't show anything" or "showed raw text"
+
+> **Reliability rule:** If content is complex (5+ blocks of mixed types), prefer `format: "browser"` for guaranteed rendering. The `html` format is best for simple, single-block content.
+
+### Content formatting tips to avoid rendering issues
+
+1. **Use `table` block type** instead of markdown tables inside `markdown` blocks — `table` blocks render natively; markdown pipe-tables may show as raw text in fallback
+2. **Use `cards` and `metrics`** for summary data instead of embedding it in markdown text
+3. **Keep `markdown` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
+4. **Split large content** into multiple smaller `present` calls rather than one massive content array
+5. **For charts:** Always use ChartValue format (`chartType`, `data`, `xKey`, `yKeys`) — NOT Chart.js format (`labels`, `datasets`)
+
+---
+
+    Container(api, "API Gateway", "Kong", "Routes requests")
+    Container(svc, "Payment Service", "Node.js", "Processes payments")
+    ContainerDb(db, "Payment DB", "PostgreSQL", "Transaction records")
+  }
+
+  System_Ext(stripe, "Stripe", "Payment processor")
+
+  Rel(user, api, "HTTPS")
+  Rel(api, svc, "gRPC")
+  Rel(svc, db, "SQL")
+  Rel(svc, stripe, "REST")`
+    }
+  ]
+})
+```
+
+### Method 2: HTML/SVG Architecture Diagrams
+
+For rich visual output, embed the full HTML/SVG diagram in a `markdown` block. Compose with `metrics` and `cards` blocks for a complete dashboard.
+
+**Both `format: "html"` and `format: "browser"` work with this approach.**
+
+```js
+present({
+  format: "html",  // or "browser"
+  title: "System Architecture",
+  content: [
+    {
+      type: "metrics",
+      title: "Overview",
+      value: [
+        { label: "Services", value: "6" },
+        { label: "Data Stores", value: "2" },
+        { label: "External Systems", value: "3" }
+      ]
+    },
+    {
+      type: "markdown",
+      title: "Architecture Diagram",
+      value: "<div class='arch-diagram'><style>/* design system CSS from c4-architecture/references/html-design-system.md */</style><svg viewBox='0 0 1000 680'><!-- SVG components using category colors --></svg></div>"
+    },
+    {
+      type: "cards",
+      title: "Component Summary",
+      value: [
+        { title: "Frontend", body: "React SPA + CDN delivery" },
+        { title: "Backend", body: "3 microservices, gRPC mesh" },
+        { title: "Data", body: "PostgreSQL + Redis cache" }
+      ]
+    }
+  ]
+})
+```
+
+### Component Categories (Quick Reference)
+
+The full type registry with sub-types and icon slots is in `c4-architecture/references/html-design-system.md`. Here is the category summary:
+
+| Category | Stroke | CSS Class | Use For |
+|----------|--------|-----------|---------|
+| Frontend | `#22d3ee` | `.cyan` | SPAs, mobile apps, static sites, PWAs |
+| Backend | `#34d399` | `.emerald` | API services, workers, microservices, serverless |
+| Data | `#a78bfa` | `.violet` | Databases, caches, search engines, warehouses |
+| Infrastructure | `#fbbf24` | `.amber` | CDNs, load balancers, DNS, storage |
+| Messaging | `#fb923c` | `.orange` | Queues, event buses, streams, pub/sub |
+| Security | `#fb7185` | `.rose` | Auth, API gateways, WAF, secret managers |
+| External | `#94a3b8` | `.slate` | Third-party APIs, SaaS, legacy systems |
+| Monitoring | `#38bdf8` | `.sky` | Logging, metrics, tracing, alerting |
+
+> **Centralization note:** Do not duplicate colors or type definitions here. The `c4-architecture` skill's design system is the single source of truth. When categories or colors change, they are updated in one place.
+
+---
+
 ## Best Practices
 
 1. **Use `browser` format** for data-rich content — charts, tables, dashboards. **Always use `browser` in CLI mode** (the `html` UIResource doesn't render in terminal environments).
@@ -178,6 +326,38 @@ The dashboard uses a professional dark theme:
 
 ---
 
+## Rendering Troubleshooting
+
+### Why `html` format sometimes shows raw text
+
+The `html` format renders content inside an MCP Apps companion iframe (UIResource). The chat text fallback is intentionally minimal (just the title). When the UIResource fails to load, the user sees only the title or raw JSON — NOT the rendered dashboard.
+
+**Common causes of UIResource rendering failure:**
+1. **MCP Apps not enabled** — The setting `chat.mcp.apps.enabled` must be `true` in VS Code settings
+2. **Companion app build missing** — The `packages/present` companion app must be built (`npm run build`)
+3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
+4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
+
+### When to prefer `browser` over `html`
+
+Use `format: "browser"` instead of `html` when:
+- Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
+- The output must be **guaranteed visible** (browser format always opens, no silent failures)
+- You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
+- The user reports that `html` format "didn't show anything" or "showed raw text"
+
+> **Reliability rule:** If content is complex (5+ blocks of mixed types), prefer `format: "browser"` for guaranteed rendering. The `html` format is best for simple, single-block content.
+
+### Content formatting tips to avoid rendering issues
+
+1. **Use `table` block type** instead of markdown tables inside `markdown` blocks — `table` blocks render natively; markdown pipe-tables may show as raw text in fallback
+2. **Use `cards` and `metrics`** for summary data instead of embedding it in markdown text
+3. **Keep `markdown` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
+4. **Split large content** into multiple smaller `present` calls rather than one massive content array
+5. **For charts:** Always use ChartValue format (`chartType`, `data`, `xKey`, `yKeys`) — NOT Chart.js format (`labels`, `datasets`)
+
+---
+
 ## MCP Apps Templates (VS Code Chat Widgets)
 
 When `chat.mcp.apps.enabled` is true in VS Code settings, the `present` tool can render **interactive widgets directly in the chat panel** using the `template` parameter. These are distinct from the browser/html dashboard modes.