@aexol/spectral 0.9.229 → 0.9.231

package/dist/designer/data/skills/design-brief.ts

@@ -0,0 +1,144 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const designBrief: DesignSkill = {
+    name: "design-brief",
+    scenario: "design",
+    description:
+      "Parse a design brief into concrete tokens. Resolves 8 design dimensions (palette, accent, typography, display, layout, mood, density, constraints) from natural language or I-Lang structured format, then generates a DESIGN.md and visual preview.",
+    outputKind: "html",
+    workflow: `# Design Brief Skill
+
+Parse a structured or natural-language design brief into a concrete DESIGN.md and optional visual preview HTML.
+
+## Background
+
+This skill resolves the 8 key design dimensions that every design artifact needs, using a closed vocabulary of symbolic values that map to concrete CSS tokens. It eliminates ambiguity from vague requests like "make it clean" or "make it professional."
+
+## Phase 1 — Accept input
+
+The user provides a design brief in one of two formats:
+
+### Option A: I-Lang structured brief
+\`\`\`
+[PLAN:@DESIGN|type=saas_landing]
+  |palette=navy_and_white|accent=coral
+  |typography=inter|display=space_grotesk
+  |layout=single_column|max_width=1200px
+  |mood=professional_minimal
+  |density=spacious|section_gap=96px
+  |hero=headline+subhead+cta
+  |sections=features,pricing,testimonials,footer
+  |exclude=animations,parallax,gradients
+  |responsive=mobile_first
+\`\`\`
+
+### Option B: Natural language
+> "I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."
+
+If the user provides Option B, convert it using the mapping table below, then proceed.
+
+### Natural language → I-Lang mapping
+
+| Natural language phrase | Dimension | I-Lang value |
+|------------------------|-----------|-------------|
+| "dark mode", "dark theme" | palette | \`monochrome_dark\` |
+| "light", "white background" | palette | \`light_clean\` |
+| "earthy", "warm tones" | palette | \`earth_tones\` |
+| "pop of color", "vibrant" | accent | \`electric_blue\` or \`coral\` |
+| "subtle accent" | accent | \`muted_sage\` or \`slate\` |
+| "clean", "minimal", "simple" | mood | \`professional_minimal\` |
+| "playful", "fun", "friendly" | mood | \`playful\` |
+| "bold", "brutalist", "raw" | mood | \`brutalist\` |
+| "editorial", "magazine-like" | mood | \`editorial\` |
+| "spacious", "lots of whitespace" | density | \`spacious\` |
+| "compact", "dense", "information-rich" | density | \`compact\` |
+| "Inter", "system font" | typography | \`inter\` or \`system_ui\` |
+| "serif", "traditional" | typography | \`georgia\` or \`playfair\` |
+| "monospace", "code-like" | typography | \`jetbrains_mono\` |
+| "no animations", "static" | exclude | \`animations\` |
+| "no gradients" | exclude | \`gradients\` |
+| "single page" | layout | \`single_column\` |
+| "two columns", "sidebar" | layout | \`two_column\` |
+| "mobile first" | responsive | \`mobile_first\` |
+
+## Phase 2 — Validate 8 dimensions
+
+Every design brief must resolve these 8 dimensions. If any are missing, select sensible defaults:
+
+| # | Dimension | Key | Example values |
+|---|-----------|-----|---------------|
+| 1 | Color palette | \`palette\` | navy_and_white, earth_tones, monochrome_dark, light_clean |
+| 2 | Accent color | \`accent\` | coral, electric_blue, emerald, muted_sage, slate |
+| 3 | Body typography | \`typography\` | inter, system_ui, dm_sans, georgia |
+| 4 | Display typography | \`display\` | space_grotesk, clash_display, same_as_body, playfair |
+| 5 | Layout model | \`layout\` | single_column, two_column, asymmetric |
+| 6 | Mood | \`mood\` | professional_minimal, playful, brutalist, editorial |
+| 7 | Density | \`density\` | compact, balanced, spacious |
+| 8 | Constraints | \`exclude\` | animations, gradients, stock_photos, carousel |
+
+### Symbolic → concrete token resolution
+
+| Symbolic value | Concrete tokens |
+|---------------|----------------|
+| \`palette=navy_and_white\` | Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8 |
+| \`palette=monochrome_dark\` | Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA |
+| \`palette=light_clean\` | Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B |
+| \`palette=earth_tones\` | Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E |
+| \`accent=coral\` | Accent: #F97316, Hover: #EA580C |
+| \`accent=electric_blue\` | Accent: #3B82F6, Hover: #2563EB |
+| \`accent=emerald\` | Accent: #10B981, Hover: #059669 |
+| \`accent=muted_sage\` | Accent: #84A98C, Hover: #6B8F73 |
+| \`accent=slate\` | Accent: #64748B, Hover: #475569 |
+| \`density=compact\` | Section spacing: 48px, Content padding: 16px/24px |
+| \`density=balanced\` | Section spacing: 72px, Content padding: 24px/40px |
+| \`density=spacious\` | Section spacing: 96px, Content padding: 24px/48px |
+
+### Default resolution rules
+
+| Unspecified dimension | Default rule |
+|----------------------|-------------|
+| \`palette\` | If mood=editorial → \`light_clean\`. If mood=brutalist → \`monochrome_dark\`. Else → \`light_clean\`. |
+| \`accent\` | If palette is dark → \`coral\`. If palette is light → \`electric_blue\`. |
+| \`typography\` | Always → \`inter\` (highest cross-platform legibility). |
+| \`display\` | If mood=editorial → \`playfair\`. If mood=brutalist → \`space_grotesk\`. Else → \`same_as_body\`. |
+| \`layout\` | Always → \`single_column\`. |
+| \`mood\` | Always → \`professional_minimal\`. |
+| \`density\` | Always → \`balanced\`. |
+| \`exclude\` | Always → none (no constraints unless specified). |
+
+## Phase 3 — Generate DESIGN.md
+
+Produce a DESIGN.md with these sections:
+1. **Visual Theme & Atmosphere** — mood, feel, references
+2. **Color Palette & Roles** — background, surface, text, accent, semantic colors
+3. **Typography Rules** — display, body, mono font specs with sizes
+4. **Component Stylings** — buttons, cards, inputs with concrete CSS values
+5. **Layout Principles** — max width, grid, section spacing, content padding
+6. **Depth & Elevation** — shadows, borders
+7. **Do's and Don'ts** — 5-6 rules for agents
+8. **Responsive Behavior** — breakpoints at 640px, 768px, 1024px, 1280px
+9. **Agent Prompt Guide** — constraints for code generation
+
+All color hex values, font stacks, and spacing values must come from the resolved tokens in Phase 2 — do not invent values.
+
+## Phase 4 — Generate brief-preview.html
+
+Create a single HTML file visualizing the resolved tokens with 4 sections:
+1. **Color palette swatches** — labeled with role and hex code
+2. **Typography specimens** — Display, Body, and Mono at declared sizes
+3. **Spacing ruler** — section spacing and content padding, labeled
+4. **Component preview** — 2-3 live components (button, card, input) using the resolved tokens
+
+Style the preview itself with the resolved design system tokens.
+
+## Phase 5 — Report defaults applied
+
+List any dimensions the user did not specify and the defaults applied:
+\`\`\`
+Dimensions resolved from defaults:
+- display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
+- density: set to "balanced" (rule: no spacing preference given)
+\`\`\`
+
+This transparency prevents silent assumptions from propagating into the final design.`,
+  };

package/dist/designer/data/skills/design-skill.d.ts

@@ -0,0 +1,10 @@
+export interface DesignSkill {
+    name: string;
+    scenario: string;
+    description: string;
+    /** What kind of artifact this produces */
+    outputKind: "html" | "html-multi" | "slides";
+    /** The full workflow guide for the LLM */
+    workflow: string;
+}
+//# sourceMappingURL=design-skill.d.ts.map

package/dist/designer/data/skills/design-skill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-skill.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/design-skill.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC7C,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;CACjB"}

package/dist/designer/data/skills/design-skill.js

@@ -0,0 +1 @@
+export {};

package/dist/designer/data/skills/design-skill.ts

@@ -0,0 +1,9 @@
+export interface DesignSkill {
+	name: string;
+	scenario: string;
+	description: string;
+	/** What kind of artifact this produces */
+	outputKind: "html" | "html-multi" | "slides";
+	/** The full workflow guide for the LLM */
+	workflow: string;
+}

package/dist/designer/data/skills/docs-page.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const docsPage: DesignSkill;
+//# sourceMappingURL=docs-page.d.ts.map

package/dist/designer/data/skills/docs-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-page.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/docs-page.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,WAoEpB,CAAC"}

package/dist/designer/data/skills/docs-page.js

@@ -0,0 +1,68 @@
+export const docsPage = {
+    name: "docs-page",
+    scenario: "engineering",
+    description: "Documentation page — left sidebar nav (sticky), scrollable article body, right table of contents. Three-column layout with grouped navigation links, code blocks, callouts, and proper RTL support.",
+    outputKind: "html",
+    workflow: `# Docs Page Skill
+
+Produce a single, three-column documentation page in one HTML file.
+
+## Phase 1 — Pre-flight
+
+1. Read the active design system. Use the body type token for prose; the mono token for code; respect line-height and max-width rules.
+2. Pick a concrete topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
+
+## Phase 2 — Three-column layout
+
+\`\`\`css
+.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 720px) 200px; gap: 0; min-height: 100vh; }
+
+/* Left sidebar — sticky nav */
+.docs-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 24px; border-right: 1px solid var(--border); background: var(--bg); }
+.docs-nav-group { margin-bottom: 24px; }
+.docs-nav-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding: 0 8px; }
+.docs-nav-link { display: block; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: var(--muted); text-decoration: none; }
+.docs-nav-link:hover { color: var(--fg); background: var(--surface); }
+.docs-nav-link.active { color: var(--fg); background: var(--surface); border-left: 2px solid var(--accent); margin-left: -2px; }
+
+/* Article body */
+.docs-article { padding: 48px 64px; max-width: 720px; }
+
+/* Right TOC — sticky */
+.docs-toc { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 16px; border-left: 1px solid var(--border); font-size: 13px; }
+.docs-toc-title { font-weight: 600; margin-bottom: 12px; }
+.docs-toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; }
+.docs-toc a:hover, .docs-toc a.active { color: var(--accent); }
+\`\`\`
+
+## Phase 3 — Article Components
+
+### Code blocks
+\`\`\`css
+pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; margin: 24px 0; }
+code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
+pre code { background: none; padding: 0; }
+\`\`\`
+
+### Callout boxes
+\`\`\`css
+.callout { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--bg)); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; }
+.callout.warning { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 5%, var(--bg)); }
+.callout-title { font-weight: 600; margin-bottom: 4px; }
+\`\`\`
+
+### Typography
+\`\`\`css
+.docs-article h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
+.docs-article h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 48px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+.docs-article h3 { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 8px; }
+.docs-article p { font-size: 16px; line-height: 1.7; margin: 12px 0; color: var(--fg); }
+\`\`\`
+
+## Phase 4 — Content Rules
+- Navigation: 3-5 groups of 4-8 links each
+- Article: H1, lede paragraph, H2 sections, code blocks, callouts (note/warning), inline links, lists
+- TOC: "On this page" with H2 anchors, current section highlighted on scroll
+- Concrete content: specific API names, command examples, plausible parameters — not placeholders
+- Respect RTL: layout expressed on the inline axis so it flips correctly under dir="rtl"`,
+};

package/dist/designer/data/skills/docs-page.ts

@@ -0,0 +1,71 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const docsPage: DesignSkill = {
+    name: "docs-page",
+    scenario: "engineering",
+    description:
+      "Documentation page — left sidebar nav (sticky), scrollable article body, right table of contents. Three-column layout with grouped navigation links, code blocks, callouts, and proper RTL support.",
+    outputKind: "html",
+    workflow: `# Docs Page Skill
+
+Produce a single, three-column documentation page in one HTML file.
+
+## Phase 1 — Pre-flight
+
+1. Read the active design system. Use the body type token for prose; the mono token for code; respect line-height and max-width rules.
+2. Pick a concrete topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
+
+## Phase 2 — Three-column layout
+
+\`\`\`css
+.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 720px) 200px; gap: 0; min-height: 100vh; }
+
+/* Left sidebar — sticky nav */
+.docs-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 24px; border-right: 1px solid var(--border); background: var(--bg); }
+.docs-nav-group { margin-bottom: 24px; }
+.docs-nav-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding: 0 8px; }
+.docs-nav-link { display: block; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: var(--muted); text-decoration: none; }
+.docs-nav-link:hover { color: var(--fg); background: var(--surface); }
+.docs-nav-link.active { color: var(--fg); background: var(--surface); border-left: 2px solid var(--accent); margin-left: -2px; }
+
+/* Article body */
+.docs-article { padding: 48px 64px; max-width: 720px; }
+
+/* Right TOC — sticky */
+.docs-toc { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 16px; border-left: 1px solid var(--border); font-size: 13px; }
+.docs-toc-title { font-weight: 600; margin-bottom: 12px; }
+.docs-toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; }
+.docs-toc a:hover, .docs-toc a.active { color: var(--accent); }
+\`\`\`
+
+## Phase 3 — Article Components
+
+### Code blocks
+\`\`\`css
+pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; margin: 24px 0; }
+code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
+pre code { background: none; padding: 0; }
+\`\`\`
+
+### Callout boxes
+\`\`\`css
+.callout { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--bg)); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; }
+.callout.warning { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 5%, var(--bg)); }
+.callout-title { font-weight: 600; margin-bottom: 4px; }
+\`\`\`
+
+### Typography
+\`\`\`css
+.docs-article h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
+.docs-article h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 48px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+.docs-article h3 { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 8px; }
+.docs-article p { font-size: 16px; line-height: 1.7; margin: 12px 0; color: var(--fg); }
+\`\`\`
+
+## Phase 4 — Content Rules
+- Navigation: 3-5 groups of 4-8 links each
+- Article: H1, lede paragraph, H2 sections, code blocks, callouts (note/warning), inline links, lists
+- TOC: "On this page" with H2 anchors, current section highlighted on scroll
+- Concrete content: specific API names, command examples, plausible parameters — not placeholders
+- Respect RTL: layout expressed on the inline axis so it flips correctly under dir="rtl"`,
+  };

package/dist/designer/data/skills/index.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const DESIGN_SKILLS: DesignSkill[];
+//# sourceMappingURL=index.d.ts.map

package/dist/designer/data/skills/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAerD,eAAO,MAAM,aAAa,EAAE,WAAW,EActC,CAAC"}

package/dist/designer/data/skills/index.js

@@ -0,0 +1,28 @@
+import { blogPost } from "./blog-post.js";
+import { critique } from "./critique.js";
+import { dashboard } from "./dashboard.js";
+import { designBrief } from "./design-brief.js";
+import { docsPage } from "./docs-page.js";
+import { magazinePoster } from "./magazine-poster.js";
+import { mobileApp } from "./mobile-app.js";
+import { motionFrames } from "./motion-frames.js";
+import { pricingPage } from "./pricing-page.js";
+import { saasLanding } from "./saas-landing.js";
+import { slideDeck } from "./slide-deck.js";
+import { socialCarousel } from "./social-carousel.js";
+import { webPrototype } from "./web-prototype.js";
+export const DESIGN_SKILLS = [
+    webPrototype,
+    saasLanding,
+    slideDeck,
+    mobileApp,
+    dashboard,
+    socialCarousel,
+    designBrief,
+    critique,
+    pricingPage,
+    docsPage,
+    blogPost,
+    magazinePoster,
+    motionFrames,
+];

package/dist/designer/data/skills/index.ts

@@ -0,0 +1,30 @@
+import type { DesignSkill } from "./design-skill.js";
+import { blogPost } from "./blog-post.js";
+import { critique } from "./critique.js";
+import { dashboard } from "./dashboard.js";
+import { designBrief } from "./design-brief.js";
+import { docsPage } from "./docs-page.js";
+import { magazinePoster } from "./magazine-poster.js";
+import { mobileApp } from "./mobile-app.js";
+import { motionFrames } from "./motion-frames.js";
+import { pricingPage } from "./pricing-page.js";
+import { saasLanding } from "./saas-landing.js";
+import { slideDeck } from "./slide-deck.js";
+import { socialCarousel } from "./social-carousel.js";
+import { webPrototype } from "./web-prototype.js";
+
+export const DESIGN_SKILLS: DesignSkill[] = [
+  webPrototype,
+  saasLanding,
+  slideDeck,
+  mobileApp,
+  dashboard,
+  socialCarousel,
+  designBrief,
+  critique,
+  pricingPage,
+  docsPage,
+  blogPost,
+  magazinePoster,
+  motionFrames,
+];

package/dist/designer/data/skills/magazine-poster.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const magazinePoster: DesignSkill;
+//# sourceMappingURL=magazine-poster.d.ts.map

package/dist/designer/data/skills/magazine-poster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magazine-poster.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/magazine-poster.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,cAAc,EAAE,WAsE1B,CAAC"}

package/dist/designer/data/skills/magazine-poster.js

@@ -0,0 +1,70 @@
+export const magazinePoster = {
+    name: "magazine-poster",
+    scenario: "creative",
+    description: "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
+    outputKind: "html",
+    workflow: `# Magazine Poster Skill
+
+Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.
+
+## Phase 1 — Determine Format
+
+- **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
+- **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
+- **Social cover** (square: 1080×1080px) — optimized for social sharing
+
+## Phase 2 — Composition Modes
+
+### Mode A: Typography-first
+Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
+\`\`\`css
+.poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
+.poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
+.poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
+.poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
+.poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
+\`\`\`
+
+### Mode B: Image-first
+Large image dominates 70% of the canvas, typography overlays or sits below.
+\`\`\`css
+.poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
+.poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
+.poster-text-block { padding: 48px 64px; }
+\`\`\`
+
+### Mode C: Split-screen
+Two-panel composition — color block left, image right (or vice versa).
+\`\`\`css
+.poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
+.poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
+.poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
+.poster-split-panel.right { background: var(--bg); }
+\`\`\`
+
+## Phase 3 — Typography Scale
+
+\`\`\`css
+/* Magazine typography is dramatic — go big */
+.display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
+.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
+.display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
+.poster-body { font-size: 18px; line-height: 1.6; }
+.poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
+\`\`\`
+
+## Phase 4 — Design Elements
+
+- **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
+- **Photo treatment**: Use mix-blend-mode on images over color backgrounds
+- **Grid lines**: Thin horizontal/vertical rules as structural elements
+- **Page numbers**: ALWAYS include an issue/volume/page-number block
+- **Date line**: MONTH YYYY format in the masthead area
+
+## Phase 5 — Anti-Kitsch Rules
+- No emoji in editorial design
+- Use the design system's display font at scale — not a safe web font
+- Headline should create tension: unexpected word break, dramatic line split, or bold claim
+- One focal point per poster — don't make everything compete
+- white-space is intentional, not leftover`,
+};

package/dist/designer/data/skills/magazine-poster.ts

@@ -0,0 +1,73 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const magazinePoster: DesignSkill = {
+    name: "magazine-poster",
+    scenario: "creative",
+    description:
+      "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
+    outputKind: "html",
+    workflow: `# Magazine Poster Skill
+
+Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.
+
+## Phase 1 — Determine Format
+
+- **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
+- **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
+- **Social cover** (square: 1080×1080px) — optimized for social sharing
+
+## Phase 2 — Composition Modes
+
+### Mode A: Typography-first
+Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
+\`\`\`css
+.poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
+.poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
+.poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
+.poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
+.poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
+\`\`\`
+
+### Mode B: Image-first
+Large image dominates 70% of the canvas, typography overlays or sits below.
+\`\`\`css
+.poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
+.poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
+.poster-text-block { padding: 48px 64px; }
+\`\`\`
+
+### Mode C: Split-screen
+Two-panel composition — color block left, image right (or vice versa).
+\`\`\`css
+.poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
+.poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
+.poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
+.poster-split-panel.right { background: var(--bg); }
+\`\`\`
+
+## Phase 3 — Typography Scale
+
+\`\`\`css
+/* Magazine typography is dramatic — go big */
+.display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
+.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
+.display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
+.poster-body { font-size: 18px; line-height: 1.6; }
+.poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
+\`\`\`
+
+## Phase 4 — Design Elements
+
+- **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
+- **Photo treatment**: Use mix-blend-mode on images over color backgrounds
+- **Grid lines**: Thin horizontal/vertical rules as structural elements
+- **Page numbers**: ALWAYS include an issue/volume/page-number block
+- **Date line**: MONTH YYYY format in the masthead area
+
+## Phase 5 — Anti-Kitsch Rules
+- No emoji in editorial design
+- Use the design system's display font at scale — not a safe web font
+- Headline should create tension: unexpected word break, dramatic line split, or bold claim
+- One focal point per poster — don't make everything compete
+- white-space is intentional, not leftover`,
+  };

package/dist/designer/data/skills/mobile-app.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSkill } from "./design-skill.js";
+export declare const mobileApp: DesignSkill;
+//# sourceMappingURL=mobile-app.d.ts.map

package/dist/designer/data/skills/mobile-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-app.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/mobile-app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,WAqOrB,CAAC"}