@aexol/spectral 0.9.269 → 0.9.271

package/dist/designer/data/skills/social-carousel.ts

@@ -1,138 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const socialCarousel: DesignSkill = {
-    name: "social-carousel",
-    scenario: "marketing",
-    description:
-      "Social media carousel. Multiple slides in a single HTML file with horizontal scroll, designed for Instagram/LinkedIn/Twitter export.",
-    outputKind: "html",
-    workflow: `# Social Carousel Skill
-
-Produce a social media carousel as a single HTML file. 1080×1080 (Instagram) or 1200×628 (LinkedIn/Twitter), horizontal scroll, export-friendly.
-
-## Phase 0 — Pre-flight
-
-1. Read the design system.
-2. Determine: platform (instagram=1080×1080, linkedin=1200×627), number of cards (3-10), topic.
-3. Vocalize: "I'll create a [N]-card carousel for [platform] about [topic]."
-
-## Phase 1 — Shell
-
-Create \`carousel.html\`:
-
-\`\`\`html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Carousel</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-    :root {
-      --card-w: 1080px;
-      --card-h: 1080px;
-      /* Design system tokens */
-    }
-
-    body {
-      background: #f0f0f0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      font-family: var(--font-sans);
-    }
-
-    .carousel-container {
-      width: min(var(--card-w), 95vw);
-      overflow-x: auto;
-      scroll-snap-type: x mandatory;
-      display: flex;
-      gap: 16px;
-      padding: 40px 0;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .card {
-      flex-shrink: 0;
-      width: min(var(--card-w), 90vw);
-      aspect-ratio: 1;
-      scroll-snap-align: center;
-      border-radius: 12px;
-      overflow: hidden;
-      background: var(--color-bg-primary);
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
-    }
-
-    @media (max-width: 1100px) {
-      .card { width: 85vw; }
-    }
-  </style>
-</head>
-<body>
-  <div class="carousel-container">
-    <div class="card">
-      <!-- Card 1 content -->
-    </div>
-    <!-- More cards -->
-  </div>
-</body>
-</html>
-\`\`\`
-
-## Phase 2 — Card Layouts
-
-### Title Card (first)
-A bold, eye-catching title. Centered, large typography, accent color background or dark solid.
-\`\`\`css
-.card-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-accent); color: #fff; }
-.card-title .number { font-size: 14px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; }
-.card-title h1 { font-size: 64px; font-weight: 800; line-height: 1.1; }
-.card-title p { font-size: 24px; opacity: 0.9; margin-top: 16px; max-width: 600px; }
-\`\`\`
-
-### Content Card
-\`\`\`css
-.card-content { flex: 1; display: flex; flex-direction: column; padding: 64px; }
-.card-content h2 { font-size: 42px; font-weight: 700; margin-bottom: 24px; }
-.card-content p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
-.card-content .number { font-size: 14px; color: var(--color-text-secondary); margin-top: auto; }
-\`\`\`
-
-### Stat Card
-\`\`\`css
-.card-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
-.card-stat .stat-value { font-size: 120px; font-weight: 800; color: var(--color-accent); line-height: 1; }
-.card-stat .stat-label { font-size: 24px; color: var(--color-text-secondary); margin-top: 16px; }
-\`\`\`
-
-### Quote Card
-\`\`\`css
-.card-quote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
-.card-quote blockquote { font-size: 36px; font-style: italic; line-height: 1.4; max-width: 700px; }
-.card-quote cite { font-size: 20px; color: var(--color-text-secondary); margin-top: 24px; font-style: normal; }
-\`\`\`
-
-### CTA Card (last)
-\`\`\`css
-.card-cta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-bg-primary); }
-.card-cta h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
-.card-cta p { font-size: 24px; color: var(--color-text-secondary); margin-bottom: 32px; }
-.card-cta .cta-text { font-size: 28px; font-weight: 600; color: var(--color-accent); }
-\`\`\`
-
-## Phase 3 — Content Rules
-
-- Each card has a clear visual hierarchy: big number/headline → supporting text → card number
-- Card number shows position (e.g., "1/8") in bottom corner
-- Title card grabs attention — use solid accent or dark bg
-- Content cards: 30-60 words max
-- Stat cards: one big number, one-line label
-- Last card: always a CTA or summary with contact/handle
-- Consistent padding within cards (64-80px)
-- Each card works as a standalone image when screenshot`,
-  };

package/dist/designer/data/skills/web-prototype.d.ts

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

package/dist/designer/data/skills/web-prototype.d.ts.map

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

package/dist/designer/data/skills/web-prototype.js

@@ -1,159 +0,0 @@
-export const webPrototype = {
-    name: "web-prototype",
-    scenario: "design",
-    description: "General-purpose web prototype. Single self-contained HTML file with modern CSS, responsive layout, and polished design tokens.",
-    outputKind: "html",
-    workflow: `# Web Prototype Skill
-
-Produce a single, self-contained HTML file for a web page prototype. This is your workflow — follow it exactly.
-
-## Phase 0 — Pre-flight (before writing any code)
-
-1. Read the active DESIGN SYSTEM (provided below). Map its color tokens to CSS custom properties.
-2. Determine: what kind of page? Landing page, marketing site, docs, SaaS, portfolio?
-3. Vocalize the system you'll use before writing: "I'll use the [X] design system with [Y] color palette and [Z] typography."
-
-## Phase 1 — HTML Shell
-
-Create \`index.html\` with this skeleton:
-
-\`\`\`html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Page Title</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-    :root {
-      /* Map design system tokens here */
-      --color-bg: ...;
-      --color-text: ...;
-      --color-accent: ...;
-      --font-sans: ...;
-      --font-serif: ...;
-      --radius: 8px;
-      --max-width: 1080px;
-    }
-
-    body {
-      font-family: var(--font-sans);
-      color: var(--color-text);
-      background: var(--color-bg);
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
-
-    /* Write all component styles below */
-  </style>
-</head>
-<body>
-  <!-- Sections go here -->
-</body>
-</html>
-\`\`\`
-
-## Phase 2 — Compose Sections
-
-Pick from these section patterns based on the page type. Each section is a semantic HTML block inside \`.container\`:
-
-### Hero (always first)
-\`\`\`html
-<section class="hero">
-  <div class="container">
-    <h1>Bold headline that states the value</h1>
-    <p>One-sentence subtext that adds context. 20-30 words max.</p>
-    <div class="hero-actions">
-      <a href="#" class="btn-primary">Primary CTA</a>
-      <a href="#" class="btn-secondary">Secondary</a>
-    </div>
-  </div>
-</section>
-\`\`\`
-
-### Feature Grid
-\`\`\`html
-<section class="features">
-  <div class="container">
-    <h2>Section heading</h2>
-    <div class="grid-3">
-      <div class="feature-card">
-        <div class="feature-icon">[icon]</div>
-        <h3>Feature name</h3>
-        <p>Concise description. One sentence.</p>
-      </div>
-      <!-- repeat 3-6 times -->
-    </div>
-  </div>
-</section>
-\`\`\`
-
-### Social Proof
-\`\`\`html
-<section class="proof">
-  <div class="container">
-    <h2>Trusted by</h2>
-    <div class="logo-strip">[company logos or names]</div>
-    <blockquote>"Compelling quote from a real-sounding persona." <cite>— Name, Role at Company</cite></blockquote>
-  </div>
-</section>
-\`\`\`
-
-### CTA Footer
-\`\`\`html
-<section class="cta">
-  <div class="container">
-    <h2>Ready to start?</h2>
-    <p>One-sentence prompt.</p>
-    <a href="#" class="btn-primary">Get Started</a>
-  </div>
-</section>
-\`\`\`
-
-### Pricing (if needed)
-\`\`\`html
-<section class="pricing">
-  <div class="container">
-    <h2>Simple pricing</h2>
-    <div class="grid-3">
-      <div class="pricing-card">
-        <h3>Starter</h3>
-        <div class="price">$X<span>/mo</span></div>
-        <ul>
-          <li>Feature one</li>
-          <li>Feature two</li>
-        </ul>
-        <a href="#" class="btn-primary">Get Started</a>
-      </div>
-      <!-- 2-3 tiers -->
-    </div>
-  </div>
-</section>
-\`\`\`
-
-## Phase 3 — Component Styles
-
-Apply design-system tokens to each component:
-
-- **Hero**: Full-bleed background matching --color-bg-secondary or --color-bg-primary (dark systems). h1 at 48-80px, 700-800 weight, tight line-height. Subtext at 18-20px, --color-text-secondary.
-- **Grid**: CSS Grid, \`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\`, 24-32px gap.
-- **Feature Cards**: Padding 32px, background --color-bg-surface, border-radius --radius, subtle border from --color-border.
-- **Buttons**: Display inline-flex, align-items center, padding 12px 24px, border-radius --radius, font-weight 600. Primary: --color-accent bg, white text. Secondary: transparent, accent border.
-- **Responsive**: Mobile-first. At 768px, adjust grid columns, reduce heading sizes by 25%, stack hero content vertically.
-
-## Phase 4 — Anti-Slop Check
-
-Before finalizing, verify:
-- [ ] No warm beige/cream/peach backgrounds (unless the design system specifies them)
-- [ ] No Inter or Roboto unless the design system calls for them
-- [ ] No gradient backgrounds unless the design system uses them
-- [ ] No emoji as icons — use Unicode symbols or SVG
-- [ ] No lorem ipsum — every word is meaningful
-- [ ] No rounded-left-border accent cards (the "AI slop" signature)
-- [ ] Colors come from the design system, not defaults
-- [ ] Typography scale is consistent (not random sizes)`,
-};

package/dist/designer/data/skills/web-prototype.ts

@@ -1,162 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const webPrototype: DesignSkill = {
-    name: "web-prototype",
-    scenario: "design",
-    description:
-      "General-purpose web prototype. Single self-contained HTML file with modern CSS, responsive layout, and polished design tokens.",
-    outputKind: "html",
-    workflow: `# Web Prototype Skill
-
-Produce a single, self-contained HTML file for a web page prototype. This is your workflow — follow it exactly.
-
-## Phase 0 — Pre-flight (before writing any code)
-
-1. Read the active DESIGN SYSTEM (provided below). Map its color tokens to CSS custom properties.
-2. Determine: what kind of page? Landing page, marketing site, docs, SaaS, portfolio?
-3. Vocalize the system you'll use before writing: "I'll use the [X] design system with [Y] color palette and [Z] typography."
-
-## Phase 1 — HTML Shell
-
-Create \`index.html\` with this skeleton:
-
-\`\`\`html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Page Title</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-    :root {
-      /* Map design system tokens here */
-      --color-bg: ...;
-      --color-text: ...;
-      --color-accent: ...;
-      --font-sans: ...;
-      --font-serif: ...;
-      --radius: 8px;
-      --max-width: 1080px;
-    }
-
-    body {
-      font-family: var(--font-sans);
-      color: var(--color-text);
-      background: var(--color-bg);
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
-
-    /* Write all component styles below */
-  </style>
-</head>
-<body>
-  <!-- Sections go here -->
-</body>
-</html>
-\`\`\`
-
-## Phase 2 — Compose Sections
-
-Pick from these section patterns based on the page type. Each section is a semantic HTML block inside \`.container\`:
-
-### Hero (always first)
-\`\`\`html
-<section class="hero">
-  <div class="container">
-    <h1>Bold headline that states the value</h1>
-    <p>One-sentence subtext that adds context. 20-30 words max.</p>
-    <div class="hero-actions">
-      <a href="#" class="btn-primary">Primary CTA</a>
-      <a href="#" class="btn-secondary">Secondary</a>
-    </div>
-  </div>
-</section>
-\`\`\`
-
-### Feature Grid
-\`\`\`html
-<section class="features">
-  <div class="container">
-    <h2>Section heading</h2>
-    <div class="grid-3">
-      <div class="feature-card">
-        <div class="feature-icon">[icon]</div>
-        <h3>Feature name</h3>
-        <p>Concise description. One sentence.</p>
-      </div>
-      <!-- repeat 3-6 times -->
-    </div>
-  </div>
-</section>
-\`\`\`
-
-### Social Proof
-\`\`\`html
-<section class="proof">
-  <div class="container">
-    <h2>Trusted by</h2>
-    <div class="logo-strip">[company logos or names]</div>
-    <blockquote>"Compelling quote from a real-sounding persona." <cite>— Name, Role at Company</cite></blockquote>
-  </div>
-</section>
-\`\`\`
-
-### CTA Footer
-\`\`\`html
-<section class="cta">
-  <div class="container">
-    <h2>Ready to start?</h2>
-    <p>One-sentence prompt.</p>
-    <a href="#" class="btn-primary">Get Started</a>
-  </div>
-</section>
-\`\`\`
-
-### Pricing (if needed)
-\`\`\`html
-<section class="pricing">
-  <div class="container">
-    <h2>Simple pricing</h2>
-    <div class="grid-3">
-      <div class="pricing-card">
-        <h3>Starter</h3>
-        <div class="price">$X<span>/mo</span></div>
-        <ul>
-          <li>Feature one</li>
-          <li>Feature two</li>
-        </ul>
-        <a href="#" class="btn-primary">Get Started</a>
-      </div>
-      <!-- 2-3 tiers -->
-    </div>
-  </div>
-</section>
-\`\`\`
-
-## Phase 3 — Component Styles
-
-Apply design-system tokens to each component:
-
-- **Hero**: Full-bleed background matching --color-bg-secondary or --color-bg-primary (dark systems). h1 at 48-80px, 700-800 weight, tight line-height. Subtext at 18-20px, --color-text-secondary.
-- **Grid**: CSS Grid, \`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\`, 24-32px gap.
-- **Feature Cards**: Padding 32px, background --color-bg-surface, border-radius --radius, subtle border from --color-border.
-- **Buttons**: Display inline-flex, align-items center, padding 12px 24px, border-radius --radius, font-weight 600. Primary: --color-accent bg, white text. Secondary: transparent, accent border.
-- **Responsive**: Mobile-first. At 768px, adjust grid columns, reduce heading sizes by 25%, stack hero content vertically.
-
-## Phase 4 — Anti-Slop Check
-
-Before finalizing, verify:
-- [ ] No warm beige/cream/peach backgrounds (unless the design system specifies them)
-- [ ] No Inter or Roboto unless the design system calls for them
-- [ ] No gradient backgrounds unless the design system uses them
-- [ ] No emoji as icons — use Unicode symbols or SVG
-- [ ] No lorem ipsum — every word is meaningful
-- [ ] No rounded-left-border accent cards (the "AI slop" signature)
-- [ ] Colors come from the design system, not defaults
-- [ ] Typography scale is consistent (not random sizes)`,
-  };

package/dist/designer/data/systems/agentic/DESIGN.md

@@ -1,71 +0,0 @@
-# Design System Inspired by Agentic
-
-> Category: Themed & Unique
-> Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
-
-## 1. Visual Theme & Atmosphere
-
-Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
-
-- **Visual style:** modern, bold
-- **Color stance:** surface/subtle layers
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#FF5701` — Token from style foundations.
-- **Secondary:** `#F6F6F1` — Token from style foundations.
-- **Success:** `#16A34A` — Token from style foundations.
-- **Warning:** `#D97706` — Token from style foundations.
-- **Danger:** `#DC2626` — Token from style foundations.
-- **Surface:** `#FFFFFF` — Token from style foundations.
-- **Text:** `#111827` — Token from style foundations.
-- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#FF5701) for CTA emphasis.
-- Use Surface (#FFFFFF) for large backgrounds and cards.
-- Keep body copy on Text (#111827) for legibility.
-
-## 3. Typography
-
-- **Scale:** 14/16/18/24/32/40
-- **Families:** primary=Playfair Display, display=Playfair Display, mono=JetBrains Mono
-- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
-- Headings should carry the style personality; body text should optimize scanability and contrast.
-
-## 4. Spacing & Grid
-
-- **Spacing scale:** 8pt baseline grid
-- Keep vertical rhythm consistent across sections and components.
-- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
-
-## 5. Layout & Composition
-
-- Prefer clear content blocks with consistent internal padding.
-- Keep hierarchy obvious: headline → support text → primary action.
-- Use whitespace to separate concerns before adding borders or shadows.
-
-## 6. Components
-
-- Buttons: primary action uses `#FF5701`; secondary actions stay neutral.
-- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
-- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
-
-## 7. Motion & Interaction
-
-- Use subtle transitions that emphasize Primary (#FF5701) as the interaction signal.
-- Default to short, purposeful transitions (150–250ms) with stable easing.
-- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
-
-## 8. Voice & Brand
-
-- Tone should reflect the visual style: concise, confident, and product-specific.
-- Keep microcopy action-oriented and avoid generic filler language.
-- Preserve the style identity in headlines while keeping UI labels literal and clear.
-
-## 9. Anti-patterns
-
-- Do not introduce off-palette colors when an existing token can solve the problem.
-- Do not flatten hierarchy by using the same type size/weight for all text.
-- Do not add decorative effects that reduce readability or accessibility.
-- Do not mix unrelated visual metaphors in the same interface.