@compilr-dev/sdk 0.17.10 → 0.17.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/skills/canvas-skills.d.ts +2 -0
  2. package/dist/skills/canvas-skills.js +88 -1
  3. package/dist/skills/platform-skills.d.ts +2 -2
  4. package/dist/skills/platform-skills.js +6 -4
  5. package/package.json +1 -1
package/dist/skills/canvas-skills.d.ts CHANGED
@@ -5,3 +5,5 @@
5
5
  * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
6
6
  */
7
7
  export declare const canvasSkill: import("@compilr-dev/agents").Skill;
8
+ export declare const infographicSkill: import("@compilr-dev/agents").Skill;
9
+ export declare const carouselSkill: import("@compilr-dev/agents").Skill;
package/dist/skills/canvas-skills.js CHANGED
@@ -31,6 +31,8 @@ export const canvasSkill = defineSkill({
31
31
  - **carousel** — multiple slide "sheets"; author each slide as a top-level \`<section data-sheet>…</section>\`.
32
32
  - **board** — an infinite 2D board of loosely-placed elements.
33
33
 
34
+ **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.
35
+
34
36
  ## STEPS
35
37
 
36
38
  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.
@@ -43,7 +45,8 @@ export const canvasSkill = defineSkill({
43
45
  HTML constraints for every write:
44
46
  - 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>\`.
45
47
  - 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).
46
- - **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). Do NOT set a fixed background like \`#0a0a0a\` — the canvas would then ignore the user's theme and not update when they switch it. Only hardcode specific colors when the user explicitly asks for a particular palette or brand.
48
+ - **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.
49
+ - **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.
47
50
  - 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).
48
51
  - For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
49
52
 
@@ -66,3 +69,87 @@ export const canvasSkill = defineSkill({
66
69
  - Keep \`html\` self-contained and within the sandbox limits above — anything that needs the network or same-origin will silently fail to render.
67
70
  - One canvas per request unless the user asks for several.`,
68
71
  });
72
+ // =============================================================================
73
+ // /infographic — craft guide for a single-composition canvas
74
+ // =============================================================================
75
+ export const infographicSkill = defineSkill({
76
+ name: 'infographic',
77
+ description: 'Craft guidance for authoring a GREAT infographic canvas — visual hierarchy, grid & rhythm, ' +
78
+ 'type scale, stat tiles, restrained color, and correct charts. Consult this after choosing the ' +
79
+ 'infographic canvas type; the general "canvas" skill covers the mechanics, this covers the design.',
80
+ tags: ['visual', 'canvas', 'infographic', 'design'],
81
+ 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).
82
+
83
+ ## The one rule above all
84
+ **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.
85
+
86
+ ## Layout — grid & rhythm
87
+ - Use a real **CSS grid**, not free-floating boxes. Consistent gutters; align everything to the grid.
88
+ - One **spacing scale** (multiples of 8px). Generous whitespace is a feature — don't fill every pixel.
89
+ - Group related content into **cards** (\`var(--canvas-card)\` background, \`var(--canvas-border)\` hairline, consistent padding). Cards create structure and scannability.
90
+
91
+ ## Type
92
+ - Strong **contrast between levels**: a big display number/headline (48–96px) → uppercase, letter-spaced **section labels** (12–14px, \`var(--canvas-muted)\`) → body (14–16px).
93
+ - 1–2 families (system stack is fine). Use \`font-variant-numeric: tabular-nums\` for figures so numbers align.
94
+ - Few words. Labels are short; let the numbers and shapes carry meaning.
95
+
96
+ ## Numbers & data
97
+ - Prefer **stat tiles**: big value + small label + optional delta (▲/▼ with \`var(--canvas-accent)\`/muted). Don't decorate numbers with chartjunk.
98
+ - **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.
99
+
100
+ ## Color
101
+ - Structure with \`var(--canvas-bg)\` / \`var(--canvas-fg)\` / \`var(--canvas-card)\` / \`var(--canvas-border)\`.
102
+ - **ONE accent** (\`var(--canvas-accent)\`) used sparingly — for the focal point and one or two emphases. Resist coloring everything.
103
+ - Use multiple colors ONLY to encode categories, and then from a small restrained set — never rainbow for decoration.
104
+
105
+ ## Icons & shapes
106
+ - Inline **SVG**, filled/stroked with the theme vars, a consistent stroke width. No emoji as primary iconography.
107
+
108
+ ## Before you finish
109
+ - Set the background explicitly to \`var(--canvas-bg)\` (see the canvas skill's export note).
110
+ - Add 2–4 **bound** Tweaks (accent color, headline size, a section toggle) — declared AND referenced in the HTML.
111
+
112
+ ## Anti-patterns (fix on sight)
113
+ - 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.`,
114
+ });
115
+ // =============================================================================
116
+ // /carousel — craft guide for a slide-deck canvas
117
+ // =============================================================================
118
+ export const carouselSkill = defineSkill({
119
+ name: 'carousel',
120
+ description: 'Craft guidance for authoring a GREAT slide carousel / presentation canvas — one idea per slide, ' +
121
+ 'a narrative arc, a consistent master layout, and 16:9 discipline. Consult this after choosing the ' +
122
+ 'carousel canvas type; the general "canvas" skill covers the mechanics, this covers the design.',
123
+ tags: ['visual', 'canvas', 'carousel', 'presentation', 'design'],
124
+ 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.
125
+
126
+ ## The two rules above all
127
+ 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.
128
+ 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.
129
+
130
+ ## Narrative arc
131
+ Structure the sequence like a story, not a list:
132
+ - **Cover** (title + one-line premise) → **context / problem** → **key points, one per slide** → **payoff / summary** → **close / CTA**.
133
+ - Order the middle so each slide sets up the next. If two slides can swap freely, the arc is weak.
134
+
135
+ ## The 16:9 frame
136
+ - Slides are a fixed **16:9** page — design *within* it, with safe margins (don't run content to the edge).
137
+ - **Don't overfill.** One headline + a few supporting elements + breathing room. Whitespace reads as confidence.
138
+ - Give **every slide a visual anchor** — a big number, a simple chart, an icon, a diagram — not just text.
139
+
140
+ ## Type (read-at-a-glance)
141
+ - Big **slide titles** (32–44px), few words. Short bullets (≤ ~6 words each, a handful at most). Body ≥ 18px.
142
+ - High contrast; \`var(--canvas-fg)\` on \`var(--canvas-bg)\`. \`var(--canvas-accent)\` for emphasis and section dividers.
143
+
144
+ ## Consistency toolkit
145
+ - A shared header zone (title, optional kicker/section label) in the same spot on every slide.
146
+ - A shared footer (page number \`n / N\`, optional brand) — small, \`var(--canvas-muted)\`.
147
+ - The same card/grid system reused slide to slide.
148
+
149
+ ## Before you finish
150
+ - Set \`background: var(--canvas-bg)\` on EACH \`<section data-sheet>\` (see the canvas skill's export note — transparent slides export white).
151
+ - Add 2–4 **bound** Tweaks (accent color, title size, a toggle for footer/page numbers).
152
+
153
+ ## Anti-patterns (fix on sight)
154
+ - 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).`,
155
+ });
package/dist/skills/platform-skills.d.ts CHANGED
@@ -11,8 +11,8 @@ export { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
11
11
  export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
12
12
  export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
13
13
  export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
14
- export { canvasSkill } from './canvas-skills.js';
14
+ export { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
15
15
  /**
16
- * All platform-specific skills (35 total).
16
+ * All platform-specific skills (37 total).
17
17
  */
18
18
  export declare const platformSkills: Skill[];
package/dist/skills/platform-skills.js CHANGED
@@ -17,7 +17,7 @@ export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseRe
17
17
  // Book
18
18
  export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
19
19
  // Canvas (visual)
20
- export { canvasSkill } from './canvas-skills.js';
20
+ export { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
21
21
  // Import all for the aggregate array
22
22
  import { designSkill, sketchSkill, prdSkill, refineSkill, refineItemSkill, architectureSkill, sessionNotesSkill, buildSkill, scaffoldSkill, } from './software-skills.js';
23
23
  import { outlineSkill, literatureReviewSkill, draftSectionSkill, peerReviewSkill, researchScaffoldSkill, } from './research-skills.js';
@@ -25,9 +25,9 @@ import { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
25
25
  import { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
26
26
  import { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
27
27
  import { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
28
- import { canvasSkill } from './canvas-skills.js';
28
+ import { canvasSkill, infographicSkill, carouselSkill } from './canvas-skills.js';
29
29
  /**
30
- * All platform-specific skills (35 total).
30
+ * All platform-specific skills (37 total).
31
31
  */
32
32
  export const platformSkills = [
33
33
  // Software (9)
@@ -70,6 +70,8 @@ export const platformSkills = [
70
70
  plotThreadsSkill,
71
71
  sceneBreakdownSkill,
72
72
  bookReviewSkill,
73
- // Canvas (1)
73
+ // Canvas (3)
74
74
  canvasSkill,
75
+ infographicSkill,
76
+ carouselSkill,
75
77
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compilr-dev/sdk",
3
- "version": "0.17.10",
3
+ "version": "0.17.12",
4
4
  "description": "Universal agent runtime for building AI-powered applications",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",