@compilr-dev/sdk 0.17.12 → 0.17.14

package/dist/skills/canvas-skills.d.ts

@@ -7,3 +7,4 @@
 export declare const canvasSkill: import("@compilr-dev/agents").Skill;
 export declare const infographicSkill: import("@compilr-dev/agents").Skill;
 export declare const carouselSkill: import("@compilr-dev/agents").Skill;
+export declare const boardSkill: import("@compilr-dev/agents").Skill;

package/dist/skills/canvas-skills.js

@@ -29,9 +29,9 @@ export const canvasSkill = defineSkill({
 ## Canvas types (pick one)
 - **infographic** — a single self-contained composition (poster / stat card / one-pager). Default when unsure.
 - **carousel** — multiple slide "sheets"; author each slide as a top-level \`<section data-sheet>…</section>\`.
-- **board** — an infinite 2D board of loosely-placed elements.
+- **board** — an infinite 2D coordinate space of absolutely-positioned node cards + inline-SVG connectors (mind-map / diagram / UI sketch). Wrap in \`<div data-board style="position:relative;width:Wpx;height:Hpx">\`.
 
-**Once you've picked the type, consult its craft guide for the design rules that make it good** — the \`infographic\` skill (hierarchy, grid, stat tiles, restrained color, correct charts) or the \`carousel\` skill (one idea per slide, narrative arc, consistent master layout, 16:9 discipline). This general skill covers the mechanics (tools, structure, theme, Tweaks); the per-type skill covers the craft.
+**Once you've picked the type, consult its craft guide for the design rules that make it good** — the \`infographic\` skill (hierarchy, grid, stat tiles, restrained color, correct charts), the \`carousel\` skill (one idea per slide, narrative arc, consistent master layout, 16:9 discipline), or the \`board\` skill (declared coordinate space, absolutely-positioned node cards, inline-SVG connectors, clustering). This general skill covers the mechanics (tools, structure, theme, Tweaks); the per-type skill covers the craft.
 
 ## STEPS
 
@@ -46,7 +46,7 @@ export const canvasSkill = defineSkill({
    - Do NOT include \`<html>\`, \`<head>\`, \`<meta>\`, \`<!doctype>\`, or your own CSP — the host injects the sandbox and CSP. Just the body content + a \`<style>\` and optional \`<script>\`.
    - The sandbox is \`allow-scripts\` with NO same-origin and CSP \`default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:\`. So: inline \`<style>\`/\`<script>\` only, no external fonts/CSS/JS/network, no remote images (use inline SVG or data: URIs).
    - **Match the app theme by default.** The host injects its live theme palette as CSS variables you MUST use instead of hardcoded colors: \`var(--canvas-bg)\` (page background), \`var(--canvas-fg)\` (text), \`var(--canvas-accent)\` and \`var(--canvas-secondary)\` (highlights), \`var(--canvas-muted)\` (secondary text), \`var(--canvas-border)\` (lines), \`var(--canvas-card)\` (raised surfaces). Only hardcode specific colors when the user explicitly asks for a particular palette or brand.
-   - **Always set the page background EXPLICITLY to \`var(--canvas-bg)\`** — on your outermost wrapper (and, for a carousel, on each \`<section data-sheet>\`). Do NOT use \`background: transparent\`, and do NOT hardcode a fixed color like \`#0a0a0a\`. Transparent looks fine inside the app (the frame is dark behind the canvas) but it is a trap: when the canvas is **exported to PDF or standalone HTML it renders on WHITE**, and a fixed color ignores the user's theme. \`var(--canvas-bg)\` is the only choice that both follows the theme and survives export.
+   - **Background — infographic & carousel: always set it EXPLICITLY to \`var(--canvas-bg)\`** on your outermost wrapper (and each \`<section data-sheet>\` for a carousel). Do NOT use \`background: transparent\` and do NOT hardcode a fixed color like \`#0a0a0a\`: transparent looks fine in-app but **exports to PDF/HTML on WHITE**, and a fixed color ignores the theme. **EXCEPTION — infinite board: do the OPPOSITE.** Keep the \`data-board\` root **transparent** (do not fill it) — the host paints a dot-grid backdrop that must show through, and filling it turns the infinite surface into a finite rectangle. On a board you style only the node cards; the space between them stays transparent. (See the \`board\` skill.)
    - Make it look intentional: a clear grid, strong type scale, generous spacing. Use \`var(--canvas-accent)\` sparingly for emphasis. Prefer inline SVG for shapes/charts/icons (fill/stroke with the theme vars).
    - For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
 
@@ -153,3 +153,66 @@ Structure the sequence like a story, not a list:
 ## Anti-patterns (fix on sight)
 - Paragraphs on a slide. • Slides with inconsistent layouts/margins. • Text too small to read at a glance. • Edge-to-edge clutter with no whitespace. • One giant slide doing the work of five. • A deck with no arc (slides in interchangeable order).`,
 });
+// =============================================================================
+// /board — craft guide for an infinite-board canvas (Phase 5)
+// =============================================================================
+export const boardSkill = defineSkill({
+    name: 'board',
+    description: 'Craft guidance for authoring a GREAT infinite-board canvas — a pannable/zoomable 2D space for ' +
+        'mind-maps, system diagrams, and UI-layout sketches. Nodes are absolutely positioned in a declared ' +
+        'coordinate space; connectors are inline SVG. Consult after choosing the board canvas type.',
+    tags: ['visual', 'canvas', 'board', 'diagram', 'design'],
+    prompt: `Craft guide for an INFINITE BOARD — a pannable/zoomable 2D space (mind-map, system/architecture diagram, UI-layout sketch). This is design guidance; author with the canvas tools (see the \`canvas\` skill). YOU author the board; the user pans, zooms, and lightly restyles — they do NOT drag nodes, so your layout is the final layout.
+
+## SHOW, don't TELL (the #1 rule)
+A board is a VISUAL surface — its value is that it *depicts* things, not that it holds text. If your board is mostly paragraphs and bullet lists, you've built a text document on a grid and failed the medium. That is what the "propose alternatives" text tool is for — a board must EARN its place by being visual.
+- **Depict, don't describe.** Exploring website / UI options? DRAW each option as a **wireframe mock** — a browser/window frame with a nav bar, a hero block, and content sections as labeled BOXES — laid side by side so they can be compared at a glance. Do NOT write "Option A: terminal-first hero, CLI-style product list…" as prose; SKETCH it.
+- **Architecture / flow?** Draw boxes-and-arrows (nodes + inline-SVG connectors), not a written description of the components.
+- **Mind-map?** A central node with branches and sub-nodes, not an outline.
+- Text belongs INSIDE the visual as short labels (titles, captions, a few key words) — never as the primary content of a node.
+
+### Wireframe node — the shape to reach for (UI/website boards)
+Build each screen mock as nested boxes so it reads as a *picture of a page*:
+\`\`\`
+<div style="position:absolute;left:80px;top:120px;width:520px;background:var(--canvas-card);
+     border:1px solid var(--canvas-border);border-radius:8px;overflow:hidden">
+  <div style="height:28px;background:var(--canvas-bg);display:flex;align-items:center;gap:6px;padding:0 10px">
+    <span style="width:8px;height:8px;border-radius:50%;background:var(--canvas-muted)"></span> …traffic lights…
+  </div>
+  <div style="height:44px;border-bottom:1px solid var(--canvas-border);display:flex;align-items:center;
+       justify-content:space-between;padding:0 16px"><b style="color:var(--canvas-fg)">logo</b><span style="color:var(--canvas-muted)">nav · nav · nav</span></div>
+  <div style="padding:28px 16px"><div style="height:18px;width:70%;background:var(--canvas-fg);opacity:.85"></div>
+    <div style="height:10px;width:50%;background:var(--canvas-muted);margin-top:10px"></div>
+    <div style="height:32px;width:120px;background:var(--canvas-accent);margin-top:16px;border-radius:6px"></div></div>
+  <div style="display:flex;gap:10px;padding:0 16px 20px"><div style="flex:1;height:70px;background:var(--canvas-bg);border:1px solid var(--canvas-border)"></div>…cards…</div>
+</div>
+\`\`\`
+Give each mock a small title above it ("OPTION A — Terminal-first"). Two or three of these side by side IS the deliverable.
+
+## The coordinate-space contract (REQUIRED)
+- The board is ONE HTML document laid out in a logical pixel coordinate space. Wrap everything in a root with an EXPLICIT declared size:
+  \`<div data-board style="position:relative;width:2400px;height:1500px">…</div>\`
+  The \`data-board\` element and its px \`width\`/\`height\` ARE the board's extent — the host uses them to fit-to-view and to export. Pick a size that comfortably holds your content with margins (e.g. 2000–4000 wide). Keep all content INSIDE these bounds.
+- **Nodes** are self-contained blocks, ABSOLUTELY positioned inside the board: \`position:absolute; left:Xpx; top:Ypx; width:Wpx\`. Snap X/Y/W to a grid (e.g. multiples of 20) so the board reads as ordered, not scattered.
+- **Keep the \`data-board\` root TRANSPARENT** — do NOT set a background on it (this is the one canvas type where you do NOT paint \`var(--canvas-bg)\`). The host paints a dot-grid backdrop that must show through; a solid fill turns the infinite surface into a finite dark rectangle. Style only the NODE CARDS with the theme vars (\`var(--canvas-card)\` fill, \`var(--canvas-border)\` edge, \`var(--canvas-fg)\` text, \`var(--canvas-accent)\` for emphasis) — the space BETWEEN nodes stays transparent (the grid).
+
+## Connectors — inline SVG overlay
+- Draw relationships as ONE inline-SVG layer spanning the whole board, BEHIND the nodes:
+  \`<svg style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none" viewBox="0 0 2400 1500">…</svg>\`
+- Connect node edge-points with \`<line>\`/\`<path>\` in \`var(--canvas-border)\` or \`var(--canvas-muted)\`; add \`<polygon>\`/marker arrowheads for direction. Keep the viewBox equal to the board size so SVG coordinates match node coordinates.
+- Route to avoid crossing nodes; prefer orthogonal (elbow) paths for diagrams, straight/curved for mind-maps.
+
+## Layout craft
+- **Cluster by meaning.** Group related nodes into visual clusters with shared proximity (and optionally a faint labeled region). Space clusters apart so the structure is legible at fit-zoom.
+- **A clear reading order / center of gravity.** Mind-map: a central node with branches radiating out. Architecture: layered (client → service → data), left-to-right or top-to-bottom. UI sketch: screens laid out in flow order.
+- **Label everything** — every node has a short title; every cluster/region a heading; connectors labeled when the relationship isn't obvious.
+- **Legible at a glance.** Node titles ~16–20px, body ~13–14px. Don't rely on the user zooming in to read essential labels — the board should make sense at fit-view.
+- Consistent node sizing within a cluster; consistent card style board-wide.
+
+## Before you finish
+- Confirm all content sits inside the declared \`data-board\` bounds (nothing clipped at the edges).
+- Add 2–4 **bound** Tweaks (accent color, node title size, a toggle for connector labels or a cluster).
+
+## Anti-patterns (fix on sight)
+- **Text cards instead of visuals** — paragraphs/bullet lists where a wireframe, diagram, or sketch belongs. This is the most common failure: a board of prose is just the alternatives text tool in disguise. SHOW it. • Filling the \`data-board\` background (turns the infinite surface into a finite rectangle — keep it transparent). • No \`data-board\` wrapper / no declared size (breaks fit + export). • Content outside the declared bounds. • Nodes scattered off-grid with no clusters. • Connectors that cross through nodes or are unlabeled where the relation is ambiguous. • Text only readable when zoomed in. • Reinventing a whiteboard — this is an authored diagram, not a drag-and-drop surface.`,
+});

package/dist/skills/platform-skills.d.ts

@@ -11,8 +11,8 @@ export { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
 export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
 export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
 export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
-export { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill, boardSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (37 total).
+ * All platform-specific skills (38 total).
  */
 export declare const platformSkills: Skill[];

package/dist/skills/platform-skills.js

@@ -17,7 +17,7 @@ export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseRe
 // Book
 export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
 // Canvas (visual)
-export { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill, boardSkill } from './canvas-skills.js';
 // Import all for the aggregate array
 import { designSkill, sketchSkill, prdSkill, refineSkill, refineItemSkill, architectureSkill, sessionNotesSkill, buildSkill, scaffoldSkill, } from './software-skills.js';
 import { outlineSkill, literatureReviewSkill, draftSectionSkill, peerReviewSkill, researchScaffoldSkill, } from './research-skills.js';
@@ -25,9 +25,9 @@ import { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
 import { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
 import { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
 import { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
-import { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
+import { canvasSkill, infographicSkill, carouselSkill, boardSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (37 total).
+ * All platform-specific skills (38 total).
  */
 export const platformSkills = [
     // Software (9)
@@ -70,8 +70,9 @@ export const platformSkills = [
     plotThreadsSkill,
     sceneBreakdownSkill,
     bookReviewSkill,
-    // Canvas (3)
+    // Canvas (4)
     canvasSkill,
     infographicSkill,
     carouselSkill,
+    boardSkill,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/sdk",
-  "version": "0.17.12",
+  "version": "0.17.14",
   "description": "Universal agent runtime for building AI-powered applications",
   "type": "module",
   "main": "dist/index.js",