@compilr-dev/sdk 0.17.11 → 0.17.12

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

@@ -5,3 +5,5 @@
  * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
  */
 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;

package/dist/skills/canvas-skills.js

@@ -31,6 +31,8 @@ export const canvasSkill = defineSkill({
 - **carousel** — multiple slide "sheets"; author each slide as a top-level \`<section data-sheet>…</section>\`.
 - **board** — an infinite 2D board of loosely-placed elements.
 
+**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.
+
 ## STEPS
 
 1. **Clarify only if needed.** If the request is concrete, go straight to authoring. If the subject or type is ambiguous, ask ONE short question (what should it show, or which type) — do not run a long interview.
@@ -67,3 +69,87 @@ export const canvasSkill = defineSkill({
 - Keep \`html\` self-contained and within the sandbox limits above — anything that needs the network or same-origin will silently fail to render.
 - One canvas per request unless the user asks for several.`,
 });
+// =============================================================================
+// /infographic — craft guide for a single-composition canvas
+// =============================================================================
+export const infographicSkill = defineSkill({
+    name: 'infographic',
+    description: 'Craft guidance for authoring a GREAT infographic canvas — visual hierarchy, grid & rhythm, ' +
+        'type scale, stat tiles, restrained color, and correct charts. Consult this after choosing the ' +
+        'infographic canvas type; the general "canvas" skill covers the mechanics, this covers the design.',
+    tags: ['visual', 'canvas', 'infographic', 'design'],
+    prompt: `Craft guide for an INFOGRAPHIC — a single self-contained composition (poster / stat card / one-pager). This is design guidance; author with the canvas tools (see the \`canvas\` skill for mechanics, structure, theme vars, and Tweaks).
+
+## The one rule above all
+**Decide the single takeaway, then build a hierarchy around it.** One element must dominate — a hero stat, a headline, a key chart — and everything else visibly supports it. If everything is the same weight, it's a wall of noise. A viewer should get the point in 3 seconds, then find detail.
+
+## Layout — grid & rhythm
+- Use a real **CSS grid**, not free-floating boxes. Consistent gutters; align everything to the grid.
+- One **spacing scale** (multiples of 8px). Generous whitespace is a feature — don't fill every pixel.
+- Group related content into **cards** (\`var(--canvas-card)\` background, \`var(--canvas-border)\` hairline, consistent padding). Cards create structure and scannability.
+
+## Type
+- Strong **contrast between levels**: a big display number/headline (48–96px) → uppercase, letter-spaced **section labels** (12–14px, \`var(--canvas-muted)\`) → body (14–16px).
+- 1–2 families (system stack is fine). Use \`font-variant-numeric: tabular-nums\` for figures so numbers align.
+- Few words. Labels are short; let the numbers and shapes carry meaning.
+
+## Numbers & data
+- Prefer **stat tiles**: big value + small label + optional delta (▲/▼ with \`var(--canvas-accent)\`/muted). Don't decorate numbers with chartjunk.
+- **Charts only when they earn it**, as inline SVG, with the right form: bar = compare categories, line = trend over time, donut = 2–3 parts of a whole (never more). **Label directly** on the marks; avoid legends when you can. No 3D, no gradients-as-data, no needless axes.
+
+## Color
+- Structure with \`var(--canvas-bg)\` / \`var(--canvas-fg)\` / \`var(--canvas-card)\` / \`var(--canvas-border)\`.
+- **ONE accent** (\`var(--canvas-accent)\`) used sparingly — for the focal point and one or two emphases. Resist coloring everything.
+- Use multiple colors ONLY to encode categories, and then from a small restrained set — never rainbow for decoration.
+
+## Icons & shapes
+- Inline **SVG**, filled/stroked with the theme vars, a consistent stroke width. No emoji as primary iconography.
+
+## Before you finish
+- Set the background explicitly to \`var(--canvas-bg)\` (see the canvas skill's export note).
+- Add 2–4 **bound** Tweaks (accent color, headline size, a section toggle) — declared AND referenced in the HTML.
+
+## Anti-patterns (fix on sight)
+- No focal point / everything equal weight. • Inconsistent spacing or off-grid boxes. • Paragraphs of body text. • A chart where a single number would do. • Hardcoded dark colors or decorative gradients. • Legends where direct labels fit.`,
+});
+// =============================================================================
+// /carousel — craft guide for a slide-deck canvas
+// =============================================================================
+export const carouselSkill = defineSkill({
+    name: 'carousel',
+    description: 'Craft guidance for authoring a GREAT slide carousel / presentation canvas — one idea per slide, ' +
+        'a narrative arc, a consistent master layout, and 16:9 discipline. Consult this after choosing the ' +
+        'carousel canvas type; the general "canvas" skill covers the mechanics, this covers the design.',
+    tags: ['visual', 'canvas', 'carousel', 'presentation', 'design'],
+    prompt: `Craft guide for a CAROUSEL / presentation — a sequence of slide "sheets". This is design guidance; author with the canvas tools (see the \`canvas\` skill). Each slide is a top-level \`<section data-sheet>…</section>\`; add one per \`canvas_edit\` append.
+
+## The two rules above all
+1. **One idea per slide.** If a sheet is making two points, split it into two sheets. A slide is a beat, not a page.
+2. **Consistency is the whole game.** Every slide shares the same master layout — identical margins, title position, type scale, and footer. That repetition is what makes a set of slides read as ONE deck instead of a pile of unrelated images.
+
+## Narrative arc
+Structure the sequence like a story, not a list:
+- **Cover** (title + one-line premise) → **context / problem** → **key points, one per slide** → **payoff / summary** → **close / CTA**.
+- Order the middle so each slide sets up the next. If two slides can swap freely, the arc is weak.
+
+## The 16:9 frame
+- Slides are a fixed **16:9** page — design *within* it, with safe margins (don't run content to the edge).
+- **Don't overfill.** One headline + a few supporting elements + breathing room. Whitespace reads as confidence.
+- Give **every slide a visual anchor** — a big number, a simple chart, an icon, a diagram — not just text.
+
+## Type (read-at-a-glance)
+- Big **slide titles** (32–44px), few words. Short bullets (≤ ~6 words each, a handful at most). Body ≥ 18px.
+- High contrast; \`var(--canvas-fg)\` on \`var(--canvas-bg)\`. \`var(--canvas-accent)\` for emphasis and section dividers.
+
+## Consistency toolkit
+- A shared header zone (title, optional kicker/section label) in the same spot on every slide.
+- A shared footer (page number \`n / N\`, optional brand) — small, \`var(--canvas-muted)\`.
+- The same card/grid system reused slide to slide.
+
+## Before you finish
+- Set \`background: var(--canvas-bg)\` on EACH \`<section data-sheet>\` (see the canvas skill's export note — transparent slides export white).
+- Add 2–4 **bound** Tweaks (accent color, title size, a toggle for footer/page numbers).
+
+## 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).`,
+});

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 } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (35 total).
+ * All platform-specific skills (37 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 } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill } 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 } from './canvas-skills.js';
+import { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (35 total).
+ * All platform-specific skills (37 total).
  */
 export const platformSkills = [
     // Software (9)
@@ -70,6 +70,8 @@ export const platformSkills = [
     plotThreadsSkill,
     sceneBreakdownSkill,
     bookReviewSkill,
-    // Canvas (1)
+    // Canvas (3)
     canvasSkill,
+    infographicSkill,
+    carouselSkill,
 ];

package/package.json

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