@aexol/spectral 0.9.230 → 0.9.231

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

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

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

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

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

@@ -0,0 +1,162 @@
+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/skills.d.ts

@@ -8,16 +8,10 @@
  * The LLM reads the skill workflow, then uses its existing tools (write, read,
  * bash) to produce output files in the working directory.
  */
-export interface DesignSkill {
-    name: string;
-    scenario: string;
-    description: string;
-    /** What kind of artifact this produces */
-    outputKind: "html" | "html-multi" | "slides";
-    /** The full workflow guide for the LLM */
-    workflow: string;
-}
-export declare const DESIGN_SKILLS: DesignSkill[];
+import { DESIGN_SKILLS } from "./data/skills/index.js";
+import type { DesignSkill } from "./data/skills/design-skill.js";
+export { DESIGN_SKILLS };
+export type { DesignSkill };
 /** Lookup a skill by name (case-insensitive). */
 export declare function findSkill(name: string): DesignSkill | undefined;
 /** Format a skill workflow as markdown for the LLM. */

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

@@ -1 +1 @@
-{"version":3,"file":"skills.d.ts","sourceRoot":"","sources":["../../src/designer/skills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC7C,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EAunDtC,CAAC;AAEF,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAM/D;AAED,uDAAuD;AACvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAE5D;AAED,2CAA2C;AAC3C,wBAAgB,gBAAgB,IAAI,MAAM,CAYzC"}
+{"version":3,"file":"skills.d.ts","sourceRoot":"","sources":["../../src/designer/skills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAM/D;AAED,uDAAuD;AACvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAE5D;AAED,2CAA2C;AAC3C,wBAAgB,gBAAgB,IAAI,MAAM,CAYzC"}