@compilr-dev/sdk 0.18.6 → 0.18.8

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

@@ -8,3 +8,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;
+export declare const canvasStylesSkill: import("@compilr-dev/agents").Skill;

package/dist/skills/canvas-skills.js

@@ -39,7 +39,7 @@ export const canvasSkill = defineSkill({
    - **Purpose & audience** — what is it for, who reads it?
    - **Canvas type** — infographic, carousel, or board? (Offer the choice unless obvious.)
    - **Key content / data** — the actual points, numbers, sections, or slides to include. Don't invent data.
-   - **Style / brand** — theme-matched (default) or a specific palette/brand?
+   - **Style / brand** — theme-matched (default), a specific palette/brand, or a named **aesthetic**? For infographics & carousels you can offer a look from the \`canvas-styles\` skill (skeuomorphic, glass, brutalist, editorial, retro) as part of THIS same question — don't default every canvas to the flat theme look.
    For open design directions (which layout, which visual approach), present concrete options with **\`propose_alternatives\`** instead of guessing.
    **Skip questions the user already answered**, and if they gave full detail or explicitly said "just make it / surprise me / your call", go straight to authoring. Keep it to ONE focused round — a short question batch, never a long interview — then build.
 
@@ -226,3 +226,74 @@ Give each mock a small title above it ("OPTION A — Terminal-first"). Two or th
 ## 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.`,
 });
+// =============================================================================
+// /canvas-styles — the aesthetic catalogue (skeuomorphic, glass, brutalist, …)
+// =============================================================================
+export const canvasStylesSkill = defineSkill({
+    name: 'canvas-styles',
+    description: 'The visual STYLE CATALOGUE for canvases — six named aesthetics (theme-flat, skeuomorphic, ' +
+        'glassmorphism, brutalist, editorial/print, retro/synthwave) each with a concrete, sandbox-safe, ' +
+        'export-safe CSS recipe. Consult when picking or offering a look beyond the default theme-matched flat style.',
+    tags: ['visual', 'canvas', 'style', 'aesthetic', 'design'],
+    prompt: `The STYLE CATALOGUE for canvases — pick a coherent visual aesthetic instead of defaulting to the flat theme look. Design guidance; author with the canvas tools (see the \`canvas\` skill for mechanics). Applies to **infographic** and **carousel** (a board is a diagram surface — keep it theme-flat unless asked).
+
+## How to use it
+- **Offer during the brief, don't over-ask.** In the canvas skill's Step 1, if the user hasn't named a style, include a SHORT aesthetic menu (2–4 fitting options from below) in the SAME \`propose_alternatives\`/\`ask_user\` round — never a separate interview. If they said "surprise me / your call", just pick the one that best fits the content and build.
+- **A style is a SYSTEM, not a trick.** Surfaces, borders, shadows, type, spacing, and accent all move together. Apply the whole recipe — half a recipe reads as a mistake.
+
+## Hard constraints (every style — the sandbox is strict)
+- **NO external fonts/CSS.** Use the SYSTEM font stack given per style. No \`@import\`, no \`fonts.googleapis\`, no webfonts.
+- **EXPORT-SAFE background.** Always set an EXPLICIT background (never \`transparent\`) on the outer wrapper (and each \`<section data-sheet>\`). A look that leans on the page background breaks on the WHITE PDF export.
+- **\`backdrop-filter\` is fragile.** It renders on screen and in \`canvas_screenshot\`, but PDF export MAY drop it — so for glass, give every panel a semi-opaque SOLID fallback fill too, so it still reads without the blur.
+- **You MAY override the theme vars** for a committed aesthetic (declare your own palette in \`<style>\`), but keep text/background contrast strong. For "theme-matched", use \`var(--canvas-*)\` as-is. Either way, set the bg explicitly.
+- Keep Tweaks working: still expose 2–4 bound controls (accent, a size slider, a toggle) even inside a strong style.
+
+## The six styles
+
+### 1. theme-flat  — DEFAULT
+Clean, modern, theme-driven. Reach for it for data, dashboards, and anything "serious/neutral".
+- Font: \`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif\`. Palette: the \`var(--canvas-*)\` tokens as-is.
+- Flat surfaces, thin \`1px var(--canvas-border)\` lines, subtle or no shadow, radius 0–8px, strong type scale, generous whitespace, \`var(--canvas-accent)\` used sparingly.
+
+### 2. skeuomorphic  — tactile, physical
+Soft, real-material surfaces — great for device/app-UI mockups and "premium product" one-pagers.
+- Font: \`system-ui, -apple-system, sans-serif\`. Light neutral palette; explicit bg, e.g. \`background:linear-gradient(180deg,#f3f4f6,#e2e5ea)\`.
+- Surfaces get a subtle vertical gradient + a top highlight + a soft drop shadow:
+  \`background:linear-gradient(180deg,#ffffff,#eceff3);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px rgba(20,24,40,.18);border:1px solid rgba(0,0,0,.06)\`
+- Buttons look pressable (same recipe, smaller). Emboss labels with \`text-shadow:0 1px 0 rgba(255,255,255,.6)\`. Keep it light — skeuo on pure black looks muddy.
+
+### 3. glassmorphism  — frosted, layered
+Translucent panels floating over a colorful blurred backdrop. Modern hero/feature look.
+- Font: \`system-ui, -apple-system, sans-serif\`. Give the wrapper a rich explicit bg with soft color blobs:
+  \`background:radial-gradient(60% 60% at 20% 20%,#6d28d9,transparent),radial-gradient(50% 50% at 80% 30%,#0ea5e9,transparent),#0b1020\`
+- Panels: \`background:rgba(255,255,255,.10);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.20);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.30)\`
+  — the \`rgba(...,.10)\` is the SOLID fallback (bump to \`.16\` if text is hard to read on export). Light text (\`#f8fafc\`) on the dark backdrop; keep contrast up.
+
+### 4. brutalist  — raw, high-impact
+Loud, unapologetic — manifestos, dev-tools, bold statements. (Matches the compilr terminal aesthetic.)
+- Font: \`ui-monospace, "SF Mono", Menlo, Consolas, monospace\` (or a heavy \`system-ui\` at 800 weight). Explicit \`background:#fafafa\` (or a flat block color).
+- Hard everything: \`border:3px solid #0a0a0a;border-radius:0;box-shadow:6px 6px 0 #0a0a0a\`. Flat fills, NO gradients, NO soft shadows. Oversized headings, tight grid, ONE loud accent (\`var(--canvas-accent)\` or a hot color) as solid blocks. High contrast, visible structure.
+
+### 5. editorial / print  — typographic, refined
+Magazine/essay feel — long-form, reports, "considered" content.
+- Font: SERIF — \`Georgia, "Iowan Old Style", "Times New Roman", serif\`. Explicit warm paper bg \`#faf8f3\`, ink text \`#1a1a1a\`.
+- Hairline rules between sections \`border-top:1px solid #d8d3c8\`; small-caps kickers \`text-transform:uppercase;letter-spacing:.12em;font-size:.75em\`; a drop cap:
+  \`p.lead::first-letter{float:left;font-family:Georgia,serif;font-size:3.4em;line-height:.8;padding:.05em .08em 0 0}\`
+- Multi-column body where it fits: \`column-count:2;column-gap:32px\`. One restrained accent for kickers/rules. Generous margins; let type carry it.
+
+### 6. retro / synthwave  — neon, 80s
+Hype/launch/gaming/music. Dark base, neon glow, chrome.
+- Font: heavy \`system-ui\` for headings. Explicit dark bg with a horizon gradient: \`background:linear-gradient(180deg,#1a0033 0%,#2d0a4e 55%,#0d001a 100%)\`.
+- Neon palette: hot pink \`#ff2bd6\`, cyan \`#22d3ee\`, violet \`#a855f7\`. Glow on headings/borders: \`text-shadow:0 0 8px currentColor,0 0 22px currentColor\` and \`box-shadow:0 0 12px #22d3ee,inset 0 0 12px rgba(34,211,238,.3)\`.
+- Optional perspective grid at the bottom via repeating linear-gradients or an inline SVG. Chrome/gradient text with \`background:linear-gradient(#fff,#8ab4ff);-webkit-background-clip:text;color:transparent\`. (Glow via \`text-shadow\` exports fine.)
+
+## Pick-by-content cheatsheet
+- **Data / stats / dashboard / neutral** → theme-flat (or glass for a hero moment)
+- **App / device / product-UI showcase** → skeuomorphic or glass
+- **Manifesto / dev-tool / bold statement** → brutalist
+- **Long-form / essay / report / "serious"** → editorial
+- **Launch / hype / gaming / music / 80s** → retro
+
+## Before you finish
+Run \`canvas_validate\` then \`canvas_screenshot\` (canvas skill Steps 5–6) — a committed style is exactly where a screenshot catches trouble: glass panels with too-low contrast, retro glow washing out text, editorial columns overflowing, or an accidentally-transparent export background. Fix with \`canvas_edit\` and screenshot again.`,
+});

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

@@ -11,7 +11,7 @@ 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, boardSkill } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill, boardSkill, canvasStylesSkill, } from './canvas-skills.js';
 /**
  * All platform-specific skills (38 total).
  */

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, boardSkill } from './canvas-skills.js';
+export { canvasSkill, infographicSkill, carouselSkill, boardSkill, canvasStylesSkill, } 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,7 +25,7 @@ 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, boardSkill } from './canvas-skills.js';
+import { canvasSkill, infographicSkill, carouselSkill, boardSkill, canvasStylesSkill, } from './canvas-skills.js';
 /**
  * All platform-specific skills (38 total).
  */
@@ -75,4 +75,5 @@ export const platformSkills = [
     infographicSkill,
     carouselSkill,
     boardSkill,
+    canvasStylesSkill,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/sdk",
-  "version": "0.18.6",
+  "version": "0.18.8",
   "description": "Universal agent runtime for building AI-powered applications",
   "type": "module",
   "main": "dist/index.js",
@@ -76,7 +76,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@compilr-dev/agents": "^0.6.5",
+    "@compilr-dev/agents": "^0.6.7",
     "@compilr-dev/logger": "^0.1.0",
     "ajv": "^6.14.0",
     "yaml": "^2.8.4"