@aexol/spectral 0.9.230 → 0.9.234

package/dist/designer/data/skills/motion-frames.ts

@@ -0,0 +1,124 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const motionFrames: DesignSkill = {
+    name: "motion-frames",
+    scenario: "creative",
+    description:
+      "CSS animation and motion design frames. Keyframe-driven animations, scroll-triggered reveals, staggered lists, loading states, and page transitions — all CSS-only where possible.",
+    outputKind: "html",
+    workflow: `# Motion Frames Skill
+
+Produce a motion design showcase as a single HTML file. CSS keyframe animations, scroll-triggered effects, and subtle micro-interactions — no JavaScript libraries.
+
+## Phase 1 — Animation Vocabulary
+
+### Entrance Animations
+\`\`\`css
+/* Fade up */
+@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+
+/* Scale in */
+@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+
+/* Slide from left */
+@keyframes slideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
+
+/* Reveal by clip-path */
+@keyframes clipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
+\`\`\`
+
+### Scroll-Triggered Reveals
+\`\`\`css
+/* Use scroll-driven animations (modern browsers) */
+.reveal {
+  animation: fadeUp 0.6s ease-out;
+  animation-timeline: view();
+  animation-range: entry 20% cover 40%;
+}
+
+/* Fallback: use Intersection Observer pattern in a small script */
+.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
+.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
+\`\`\`
+
+### Staggered Lists
+\`\`\`css
+.stagger-list > * { opacity: 0; animation: fadeUp 0.4s ease-out forwards; }
+.stagger-list > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-list > *:nth-child(2) { animation-delay: 80ms; }
+.stagger-list > *:nth-child(3) { animation-delay: 160ms; }
+.stagger-list > *:nth-child(4) { animation-delay: 240ms; }
+.stagger-list > *:nth-child(5) { animation-delay: 320ms; }
+.stagger-list > *:nth-child(6) { animation-delay: 400ms; }
+/* Continue pattern: delay = (n-1) * 80ms up to n=20 */
+\`\`\`
+
+### Loading States
+\`\`\`css
+/* Spinner */
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
+
+/* Skeleton pulse */
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+.skeleton { background: linear-gradient(90deg, var(--surface) 25%, color-mix(in oklab, var(--surface) 50%, var(--bg)) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; }
+
+/* Progress bar */
+@keyframes progress { from { width: 0%; } to { width: 100%; } }
+.progress-bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; animation: progress 2s ease-out forwards; }
+\`\`\`
+
+### Hover Micro-Interactions
+\`\`\`css
+/* Subtle card lift */
+.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
+.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
+
+/* Button press */
+.btn-press { transition: transform 0.1s ease; }
+.btn-press:active { transform: scale(0.97); }
+
+/* Link underline slide */
+.link-slide { position: relative; text-decoration: none; }
+.link-slide::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; }
+.link-slide:hover::after { width: 100%; }
+
+/* Image zoom */
+.img-zoom { overflow: hidden; border-radius: 8px; }
+.img-zoom img { transition: transform 0.3s ease; }
+.img-zoom:hover img { transform: scale(1.05); }
+\`\`\`
+
+### Page Transitions (View Transitions API)
+\`\`\`css
+/* Add to :root for cross-fade transitions */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.4s;
+}
+
+/* Named transitions for specific elements */
+.hero-title { view-transition-name: hero-title; }
+.hero-image { view-transition-name: hero-image; }
+\`\`\`
+
+## Phase 2 — Showcase Layout
+
+Build a single HTML page demonstrating each animation category:
+1. **Entrance section** — cards/stats that animate in on load
+2. **Scroll reveal section** — content that appears as you scroll
+3. **Staggered list** — feature list with cascading reveal
+4. **Loading section** — skeleton screens next to real content
+5. **Hover gallery** — cards with different hover treatments
+6. **Interactive section** — buttons and links with micro-interactions
+
+## Phase 3 — Motion Design Rules
+- **Duration**: 150-400ms for micro-interactions; 400-800ms for entrances; DON'T use values above 1s
+- **Easing**: ease-out for entrances (fast start, settle gracefully); ease-in-out for continuous animations
+- **Stagger**: 60-100ms between children; maximum 20 items in a stagger
+- **Performance**: animate transform and opacity only (no width/height/margin animations)
+- **Respect reduced motion**: wrap animations in @media (prefers-reduced-motion: no-preference)
+- **No animation on every element** — pick 2-3 key moments per page
+- **Animation should communicate** — loading state, new content arriving, affordance — not just decoration`,
+  };

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

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

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

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

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

@@ -0,0 +1,76 @@
+export const pricingPage = {
+    name: "pricing-page",
+    scenario: "marketing",
+    description: "Standalone pricing page — header, plan tier cards, feature comparison table, and FAQ. Uses CSS Grid for plan rows and comparison table. 2-4 tiers with recommended tier accent.",
+    outputKind: "html",
+    workflow: `# Pricing Page Skill
+
+Produce a single-screen pricing page that respects the active design system.
+
+## Phase 1 — Classify the product
+
+Pick a tier shape based on the brief:
+- **3-tier** (most common): Free / Pro / Team or Starter / Growth / Enterprise
+- **4-tier** when the brief says "scale" or "enterprise plus"
+- **2-tier** when it says "individual / business" or "personal / pro"
+
+## Phase 2 — Sections (in order)
+
+1. **Hero** — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
+   \`\`\`css
+   .pricing-hero { text-align: center; padding: 80px 0 48px; }
+   .toggle { display: inline-flex; border-radius: 999px; background: var(--surface); padding: 4px; margin-top: 24px; }
+   .toggle button { padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
+   .toggle button.active { background: var(--fg); color: var(--bg); }
+   \`\`\`
+
+2. **Plan cards** — one card per tier. Each card: tier name, price (display font + larger scale for the number), 1-line positioning, 4-6 bullet features, primary CTA.
+   \`\`\`css
+   .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
+   .plan-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; display: flex; flex-direction: column; }
+   .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
+   .plan-card.recommended::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-on, white); padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+   .plan-name { font-size: 20px; font-weight: 600; }
+   .plan-price { font-size: 48px; font-weight: 800; line-height: 1; margin: 16px 0 4px; font-family: var(--font-display, var(--font-body)); }
+   .plan-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
+   .plan-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
+   .plan-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft, var(--border)); }
+   \`\`\`
+
+3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells. Group features into 2-3 logical sections (Core, Collaboration, Support, Security). Sticky header.
+   \`\`\`css
+   .comparison { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
+   .comparison h2 { text-align: center; margin-bottom: 32px; }
+   .comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+   .comparison-table th { text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--border); }
+   .comparison-table th:not(:first-child) { text-align: center; }
+   .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); }
+   .comparison-table td:not(:first-child) { text-align: center; }
+   .section-header td { font-weight: 600; background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
+   \`\`\`
+
+4. **FAQ** — 4-6 collapsible Q&A items using \`<details><summary>\` (no JS needed).
+   \`\`\`css
+   .faq { max-width: 720px; margin: 64px auto; padding: 0 24px; }
+   .faq h2 { text-align: center; margin-bottom: 32px; }
+   .faq details { border-bottom: 1px solid var(--border-soft, var(--border)); padding: 20px 0; }
+   .faq summary { font-weight: 600; cursor: pointer; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
+   .faq summary::after { content: "+"; font-size: 20px; }
+   .faq details[open] summary::after { content: "−"; }
+   .faq p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
+   \`\`\`
+
+5. **Footer CTA** — single line + button.
+
+## Phase 3 — Content Rules
+- Prices are plausible for the product (not "$X / month")
+- Accent appears on the recommended tier and one CTA only
+- No fake feature names — every row reads as something a real product would offer
+- Comparison table renders cleanly at 1024px and stacks readably below 768px (scroll-x or stacked)
+
+## Phase 4 — Anti-Slop Check
+- [ ] Prices use specific numbers ($29, $79, $199)
+- [ ] Recommended tier is visually distinct
+- [ ] FAQ answers are concrete, not generic
+- [ ] No price-related emoji (💸, 💰, 🤑)`,
+};

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

@@ -0,0 +1,79 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const pricingPage: DesignSkill = {
+    name: "pricing-page",
+    scenario: "marketing",
+    description:
+      "Standalone pricing page — header, plan tier cards, feature comparison table, and FAQ. Uses CSS Grid for plan rows and comparison table. 2-4 tiers with recommended tier accent.",
+    outputKind: "html",
+    workflow: `# Pricing Page Skill
+
+Produce a single-screen pricing page that respects the active design system.
+
+## Phase 1 — Classify the product
+
+Pick a tier shape based on the brief:
+- **3-tier** (most common): Free / Pro / Team or Starter / Growth / Enterprise
+- **4-tier** when the brief says "scale" or "enterprise plus"
+- **2-tier** when it says "individual / business" or "personal / pro"
+
+## Phase 2 — Sections (in order)
+
+1. **Hero** — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
+   \`\`\`css
+   .pricing-hero { text-align: center; padding: 80px 0 48px; }
+   .toggle { display: inline-flex; border-radius: 999px; background: var(--surface); padding: 4px; margin-top: 24px; }
+   .toggle button { padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
+   .toggle button.active { background: var(--fg); color: var(--bg); }
+   \`\`\`
+
+2. **Plan cards** — one card per tier. Each card: tier name, price (display font + larger scale for the number), 1-line positioning, 4-6 bullet features, primary CTA.
+   \`\`\`css
+   .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
+   .plan-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; display: flex; flex-direction: column; }
+   .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
+   .plan-card.recommended::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-on, white); padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+   .plan-name { font-size: 20px; font-weight: 600; }
+   .plan-price { font-size: 48px; font-weight: 800; line-height: 1; margin: 16px 0 4px; font-family: var(--font-display, var(--font-body)); }
+   .plan-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
+   .plan-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
+   .plan-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft, var(--border)); }
+   \`\`\`
+
+3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells. Group features into 2-3 logical sections (Core, Collaboration, Support, Security). Sticky header.
+   \`\`\`css
+   .comparison { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
+   .comparison h2 { text-align: center; margin-bottom: 32px; }
+   .comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+   .comparison-table th { text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--border); }
+   .comparison-table th:not(:first-child) { text-align: center; }
+   .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); }
+   .comparison-table td:not(:first-child) { text-align: center; }
+   .section-header td { font-weight: 600; background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
+   \`\`\`
+
+4. **FAQ** — 4-6 collapsible Q&A items using \`<details><summary>\` (no JS needed).
+   \`\`\`css
+   .faq { max-width: 720px; margin: 64px auto; padding: 0 24px; }
+   .faq h2 { text-align: center; margin-bottom: 32px; }
+   .faq details { border-bottom: 1px solid var(--border-soft, var(--border)); padding: 20px 0; }
+   .faq summary { font-weight: 600; cursor: pointer; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
+   .faq summary::after { content: "+"; font-size: 20px; }
+   .faq details[open] summary::after { content: "−"; }
+   .faq p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
+   \`\`\`
+
+5. **Footer CTA** — single line + button.
+
+## Phase 3 — Content Rules
+- Prices are plausible for the product (not "$X / month")
+- Accent appears on the recommended tier and one CTA only
+- No fake feature names — every row reads as something a real product would offer
+- Comparison table renders cleanly at 1024px and stacks readably below 768px (scroll-x or stacked)
+
+## Phase 4 — Anti-Slop Check
+- [ ] Prices use specific numbers ($29, $79, $199)
+- [ ] Recommended tier is visually distinct
+- [ ] FAQ answers are concrete, not generic
+- [ ] No price-related emoji (💸, 💰, 🤑)`,
+  };

package/dist/designer/data/skills/saas-landing.d.ts

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

package/dist/designer/data/skills/saas-landing.d.ts.map

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

package/dist/designer/data/skills/saas-landing.js

@@ -0,0 +1,71 @@
+export const saasLanding = {
+    name: "saas-landing",
+    scenario: "marketing",
+    description: "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Production-ready marketing page structure.",
+    outputKind: "html",
+    workflow: `# SaaS Landing Skill
+
+Produce a single-page SaaS landing page. This is your workflow — follow it exactly.
+
+## Phase 0 — Pre-flight
+
+1. Read the design system. Map all color tokens.
+2. Determine: product name, tagline, audience, has pricing? how many social proof items?
+3. Vocalize: "I'll build a SaaS landing for [product] using the [system] design system. Sections: hero, features (6), social proof (3 logos + quote), pricing (3 tiers), CTA."
+
+## Phase 1 — Shell
+
+Create \`index.html\` with the same skeleton as web-prototype, but use this section order:
+
+1. **Navigation** — Sticky top, 64px height. Logo left, nav links right (Features, Pricing, Docs), "Sign In" + "Get Started" CTA.
+2. **Hero** — Two-column: left = headline + subtext + CTA + "no credit card" badge, right = product screenshot or illustration.
+3. **Trust Strip** — 5-6 company logos, grayscale, 80px height each.
+4. **Features** — 3×2 grid. Each card: icon, title, description. Focus on benefits, not specs.
+5. **How It Works** — 3-step horizontal flow. Number + title + short description.
+6. **Social Proof** — Quote block + person attribution.
+7. **Pricing** — 3-tier cards. Highlight the middle tier with a "Popular" badge.
+8. **FAQ** — Accordion or simple Q&A list, 4-6 items.
+9. **CTA Footer** — Full-width, centered, strong headline.
+10. **Footer** — Logo, copyright, link columns.
+
+## Phase 2 — Key Component Styles
+
+### Navigation
+\`\`\`css
+.nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; backdrop-filter: blur(12px); }
+.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
+.nav-links { display: flex; gap: 32px; align-items: center; }
+\`\`\`
+
+### Hero
+\`\`\`css
+.hero { padding: 120px 0 80px; }
+.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
+.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
+.hero p { font-size: 20px; color: var(--color-text-secondary); margin: 24px 0 32px; max-width: 480px; }
+\`\`\`
+
+### Pricing Cards
+\`\`\`css
+.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+.pricing-card { padding: 40px 32px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
+.pricing-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); transform: scale(1.03); }
+.price { font-size: 48px; font-weight: 800; margin: 16px 0; }
+.price span { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); }
+\`\`\`
+
+## Phase 3 — Content Rules
+
+- Every headline sells a benefit, not describes a feature
+- Pricing: use specific numbers ($29, $79, $199) not "Free / Pro / Enterprise" placeholders
+- Social proof: realistic company names, real-sounding quote
+- CTA button text: action-oriented — "Start Building", "Get Early Access", "See Plans"
+- No lorem ipsum, no placeholder images that look like placeholders — use gradient shapes
+
+## Phase 4 — Anti-Slop Check
+
+Same checklist as web-prototype, plus:
+- [ ] Pricing cards don't all look identical — featured tier is visually distinct
+- [ ] Hero doesn't use a gradient background (use solid, pattern, or image)
+- [ ] Trust logos are monochrome, same height, evenly spaced`,
+};

package/dist/designer/data/skills/saas-landing.ts

@@ -0,0 +1,74 @@
+import type { DesignSkill } from "./design-skill.js";
+
+export const saasLanding: DesignSkill = {
+    name: "saas-landing",
+    scenario: "marketing",
+    description:
+      "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Production-ready marketing page structure.",
+    outputKind: "html",
+    workflow: `# SaaS Landing Skill
+
+Produce a single-page SaaS landing page. This is your workflow — follow it exactly.
+
+## Phase 0 — Pre-flight
+
+1. Read the design system. Map all color tokens.
+2. Determine: product name, tagline, audience, has pricing? how many social proof items?
+3. Vocalize: "I'll build a SaaS landing for [product] using the [system] design system. Sections: hero, features (6), social proof (3 logos + quote), pricing (3 tiers), CTA."
+
+## Phase 1 — Shell
+
+Create \`index.html\` with the same skeleton as web-prototype, but use this section order:
+
+1. **Navigation** — Sticky top, 64px height. Logo left, nav links right (Features, Pricing, Docs), "Sign In" + "Get Started" CTA.
+2. **Hero** — Two-column: left = headline + subtext + CTA + "no credit card" badge, right = product screenshot or illustration.
+3. **Trust Strip** — 5-6 company logos, grayscale, 80px height each.
+4. **Features** — 3×2 grid. Each card: icon, title, description. Focus on benefits, not specs.
+5. **How It Works** — 3-step horizontal flow. Number + title + short description.
+6. **Social Proof** — Quote block + person attribution.
+7. **Pricing** — 3-tier cards. Highlight the middle tier with a "Popular" badge.
+8. **FAQ** — Accordion or simple Q&A list, 4-6 items.
+9. **CTA Footer** — Full-width, centered, strong headline.
+10. **Footer** — Logo, copyright, link columns.
+
+## Phase 2 — Key Component Styles
+
+### Navigation
+\`\`\`css
+.nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; backdrop-filter: blur(12px); }
+.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
+.nav-links { display: flex; gap: 32px; align-items: center; }
+\`\`\`
+
+### Hero
+\`\`\`css
+.hero { padding: 120px 0 80px; }
+.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
+.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
+.hero p { font-size: 20px; color: var(--color-text-secondary); margin: 24px 0 32px; max-width: 480px; }
+\`\`\`
+
+### Pricing Cards
+\`\`\`css
+.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+.pricing-card { padding: 40px 32px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
+.pricing-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); transform: scale(1.03); }
+.price { font-size: 48px; font-weight: 800; margin: 16px 0; }
+.price span { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); }
+\`\`\`
+
+## Phase 3 — Content Rules
+
+- Every headline sells a benefit, not describes a feature
+- Pricing: use specific numbers ($29, $79, $199) not "Free / Pro / Enterprise" placeholders
+- Social proof: realistic company names, real-sounding quote
+- CTA button text: action-oriented — "Start Building", "Get Early Access", "See Plans"
+- No lorem ipsum, no placeholder images that look like placeholders — use gradient shapes
+
+## Phase 4 — Anti-Slop Check
+
+Same checklist as web-prototype, plus:
+- [ ] Pricing cards don't all look identical — featured tier is visually distinct
+- [ ] Hero doesn't use a gradient background (use solid, pattern, or image)
+- [ ] Trust logos are monochrome, same height, evenly spaced`,
+  };

package/dist/designer/data/skills/slide-deck.d.ts

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

package/dist/designer/data/skills/slide-deck.d.ts.map

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

package/dist/designer/data/skills/slide-deck.js

@@ -0,0 +1,213 @@
+export const slideDeck = {
+    name: "slide-deck",
+    scenario: "marketing",
+    description: "Presentation slide deck as a single HTML file. Fixed 16:9 canvas with keyboard navigation, slide counter, and print-to-PDF support.",
+    outputKind: "slides",
+    workflow: `# Slide Deck Skill
+
+Produce a presentation deck as a single HTML file. 16:9 ratio (1920×1080), keyboard navigation, slide counter.
+
+## Phase 0 — Pre-flight
+
+1. Read the design system for color tokens.
+2. Determine: deck title, audience, number of slides, tone (pitch, educational, report).
+3. Vocalize the plan: "I'll create a [N]-slide deck: [slide titles in order]."
+
+## Phase 1 — Framework Skeleton
+
+Create \`deck.html\` with this exact framework. The scaling/navigation JS is load-bearing — copy it verbatim.
+
+\`\`\`html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Deck Title</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+    :root {
+      --slide-w: 1920px;
+      --slide-h: 1080px;
+      /* Design system tokens here */
+    }
+
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font-sans); }
+
+    #scaler {
+      position: absolute;
+      top: 50%; left: 50%;
+      transform-origin: 0 0;
+    }
+
+    .slide {
+      position: absolute;
+      top: 0; left: 0;
+      width: var(--slide-w);
+      height: var(--slide-h);
+      display: none;
+      overflow: hidden;
+    }
+    .slide.active { display: flex; }
+
+    #counter {
+      position: fixed; bottom: 16px; right: 16px; z-index: 100;
+      background: rgba(0,0,0,0.6); color: #fff; padding: 4px 12px;
+      border-radius: 4px; font-size: 14px; font-family: monospace;
+    }
+
+    @media print {
+      html, body { width: auto; height: auto; overflow: visible; background: #fff; }
+      #scaler { position: static; transform: none; }
+      .slide { position: relative; display: block !important; break-after: page; }
+      #counter { display: none; }
+    }
+  </style>
+</head>
+<body>
+  <div id="scaler">
+    <div class="slide active" data-slide="1"><!-- content --></div>
+    <div class="slide" data-slide="2"><!-- content --></div>
+    <!-- ... -->
+  </div>
+  <div id="counter">1 / N</div>
+  <script>
+    const slides = document.querySelectorAll('.slide');
+    let current = 0;
+    function show(i) {
+      slides[current].classList.remove('active');
+      current = (i + slides.length) % slides.length;
+      slides[current].classList.add('active');
+      document.getElementById('counter').textContent = (current + 1) + ' / ' + slides.length;
+    }
+    function scale() {
+      const scaler = document.getElementById('scaler');
+      const sw = window.innerWidth, sh = window.innerHeight;
+      const ratio = Math.min(sw / 1920, sh / 1080);
+      scaler.style.transform = 'translate(' + (sw/2) + 'px,' + (sh/2) + 'px) scale(' + ratio + ')';
+    }
+    document.addEventListener('keydown', e => {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); show(current - 1); }
+      if (e.key === 'Home') { e.preventDefault(); show(0); }
+      if (e.key === 'End') { e.preventDefault(); show(slides.length - 1); }
+    });
+    window.addEventListener('resize', scale);
+    scale();
+    localStorage.setItem('deck-slide', current);
+  </script>
+</body>
+</html>
+\`\`\`
+
+## Phase 2 — Slide Layouts
+
+Each slide is a \`.slide\` div with \`.active\` on the first. Tag slides with \`data-slide="N"\`.
+
+### Title Slide
+\`\`\`html
+<div class="slide active" data-slide="1">
+  <div class="slide-content title-slide">
+    <p class="slide-label">Company · Date</p>
+    <h1>Deck Title</h1>
+    <p class="slide-subtitle">One-line subtitle</p>
+  </div>
+</div>
+\`\`\`
+Style: centered content, 80px headline, dark background with design-system colors.
+
+### Text-Only Slide
+\`\`\`html
+<div class="slide" data-slide="2">
+  <div class="slide-content text-slide">
+    <h2>Section Title</h2>
+    <ul>
+      <li>Bullet point one — keep it short, 8-12 words</li>
+      <li>Bullet point two</li>
+      <li>Bullet point three</li>
+    </ul>
+  </div>
+</div>
+\`\`\`
+
+### Two-Column Slide
+\`\`\`html
+<div class="slide" data-slide="3">
+  <div class="slide-content two-col">
+    <div class="col">
+      <h2>Left Heading</h2>
+      <p>Descriptive text. 20-40 words.</p>
+    </div>
+    <div class="col">
+      <div class="chart-placeholder">[chart, image, or code block]</div>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Metrics Slide
+\`\`\`html
+<div class="slide" data-slide="4">
+  <div class="slide-content metrics-slide">
+    <h2>Key Results</h2>
+    <div class="metrics-grid">
+      <div class="metric">
+        <span class="metric-value">85%</span>
+        <span class="metric-label">Metric name</span>
+      </div>
+      <!-- 3-4 metrics -->
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Closing Slide
+\`\`\`html
+<div class="slide" data-slide="N">
+  <div class="slide-content title-slide closing">
+    <h1>Thank You</h1>
+    <p class="slide-subtitle">contact@company.com</p>
+  </div>
+</div>
+\`\`\`
+
+## Phase 3 — Slide Styles
+
+\`\`\`css
+.slide-content { width: 100%; height: 100%; padding: 80px 120px; display: flex; flex-direction: column; justify-content: center; }
+
+.title-slide { align-items: center; text-align: center; background: var(--color-bg-primary); }
+.title-slide h1 { font-size: 80px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
+.slide-label { font-size: 20px; color: var(--color-text-secondary); margin-bottom: 24px; }
+.slide-subtitle { font-size: 28px; color: var(--color-text-secondary); margin-top: 16px; }
+
+.text-slide h2 { font-size: 48px; font-weight: 700; margin-bottom: 40px; }
+.text-slide ul { font-size: 28px; line-height: 1.8; }
+.text-slide li { margin-bottom: 12px; color: var(--color-text-secondary); }
+.text-slide li::marker { color: var(--color-accent); }
+
+.two-col { flex-direction: row; gap: 80px; }
+.two-col .col { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+.two-col h2 { font-size: 48px; margin-bottom: 24px; }
+.two-col p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
+
+.metrics-slide { align-items: center; justify-content: center; text-align: center; }
+.metrics-grid { display: flex; gap: 80px; margin-top: 48px; }
+.metric-value { font-size: 72px; font-weight: 800; color: var(--color-accent); display: block; }
+.metric-label { font-size: 20px; color: var(--color-text-secondary); margin-top: 8px; display: block; }
+
+.closing { background: var(--color-bg-primary); }
+\`\`\`
+
+## Phase 4 — Content Rules for Slides
+
+- Slide text is never smaller than 24px — this is a 16:9 canvas, not a web page
+- Headlines: 48-80px, one line preferred
+- Body text: 24-28px
+- Bullet points: 28px, max 5 per slide, each 6-12 words
+- Every slide gets a \`data-slide="N"\` attribute
+- Slides are 1-indexed
+- Max 12 slides unless the user asks for more
+- The closing slide always says "Thank You" with contact info`,
+};