@aexol/spectral 0.9.270 → 0.9.271

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

@@ -1,124 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,76 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,71 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,213 +0,0 @@
-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`,
-};