@aexol/spectral 0.9.230 → 0.9.234

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"}