@aexol/spectral 0.9.269 → 0.9.271

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

@@ -1,121 +0,0 @@
-export const motionFrames = {
-    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/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"}