@hasna/skills 0.1.60 → 0.1.62

package/skills/one-page-website/SKILL.md

@@ -1,46 +1,128 @@
 ---
 name: one-page-website
-description: Generate premium static one-page website bundles with HTML, CSS, JavaScript, copy, section map, deploy notes, and manifest.
+description: Generate a deployable static one-page website — semantic responsive HTML with inlined tokenized CSS, progressive-enhancement JavaScript, dark mode, a section map, copy, and deploy notes. No build step and no external requests.
 ---
 
 # One Page Website
 
-Generate a complete static one-page website bundle for a SaaS product, service, launch, waitlist, portfolio offer, or internal tool.
+Generate a complete static one-page site: hero, features, proof, pricing, FAQ,
+and CTA. The output is plain HTML, CSS, and JavaScript that you can open with
+`file://` or drop on any static host. There is no bundler, no framework, no
+webfont fetch, and no third-party request of any kind — which also means no
+API keys and no network access at generation time.
 
 ## Requirements
 
-- Authenticate with `skills auth login`.
-- This premium skill runs through the hosted Skills runtime; local installs expose only metadata and instructions.
+- Bun (the skill runs as `bun run src/index.ts`).
+- No API keys, no network access, no environment variables.
+- One runtime dependency: `marked`, used only to parse `--copy` markdown. Run
+  `bun install` in this skill directory. If it is missing you get
+  `Missing dependency 'marked'. Run bun install in this skill directory.`
 
 ## Usage
 
 ```bash
-skills run one-page-website "Usage-based billing for AI SaaS" --name "MeterKit" --audience "founders"
-skills run one-page-website --brief "Customer feedback analytics" --goal "join the waitlist" --style "sharp and editorial"
+# the whole page from a name and a headline
+skills run one-page-website -- --name "MeterKit" --tagline "Usage billing that finance actually trusts"
+
+# short page, bold look
+skills run one-page-website -- "Relay" --sections hero,features,cta --style bold
+
+# inject your own copy and lock the brand color
+skills run one-page-website -- --name "MeterKit" --copy ./copy.md --accent "#0F7B7B" -o ./out
+
+# name your own feature cards
+skills run one-page-website -- --name "Ledgerly" --features "Double-entry core,Close in a day,Auditor-ready exports"
+
+# machine-readable summary
+skills run one-page-website -- --name "Relay" --json
+```
+
+Then serve it:
+
+```bash
+cd out/site && python3 -m http.server 8000
 ```
 
+Run the skill directly from its directory with `bun run src/index.ts --help`.
+
 ## Options
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `--brief <text>` | Product, service, or website brief. Positional text also works. | required |
-| `--name <text>` | Brand or page name. | derived from brief |
-| `--audience <text>` | Target visitor. | software teams |
-| `--goal <text>` | Primary conversion goal. | book a demo |
-| `--style <text>` | Visual and voice direction. | polished SaaS, crisp UI, confident copy |
-| `--proof <text>` | Proof points or trust signals. | customer outcomes and workflow proof |
-| `--sections <list>` | Comma-separated sections. | hero,features,proof,pricing,faq,cta |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `--name <text>` | Brand or product name. A positional string also works. | required |
+| `--tagline <text>` | Hero headline. | generated from the name |
+| `--sections <list>` | Comma list drawn from `hero,features,proof,pricing,faq,cta`. Unknown names fail with the valid list. `hero` is always included. | all six |
+| `--style <text>` | Style direction, matched against the presets below. | `clean` |
+| `--copy <file>` | Markdown file whose headings override the generated copy. See below. | none |
+| `--goal <text>` | Primary CTA label, also used for the closing heading. | `Book a demo` |
+| `--audience <text>` | Who the page is for. Appears in the lead and the testimonial. | `software teams` |
+| `--features <list>` | Comma list of feature card titles. | generated |
+| `--accent <hex>` | Force the accent color. | from the style preset |
+| `--output <dir>`, `-o` | Output directory. | `./one-page-website` |
+| `--json` | Print the run summary as JSON on stdout. | off |
+| `--help` | Show help and exit 0. | |
+| `--version` | Print the version. | |
+
+### Style presets
+
+| Preset | Triggers on | Look |
+|--------|-------------|------|
+| `clean` (default) | clean, polished, quiet, refined, saas, minimal, crisp | System sans, blue accent, 10px radii |
+| `editorial` | editorial, magazine, serif, print, sharp | Serif display face, near-square corners, red accent |
+| `bold` | bold, loud, playful, vivid, energetic, startup | Heavy 800-weight headings, large radii, magenta accent |
+| `warm` | warm, human, friendly, approachable, amber | Amber accent, soft radii |
+| `technical` | technical, developer, mono, terminal, engineering, infra | Monospace display face, tight radii, teal accent |
+
+Presets set CSS custom properties only. Everything downstream — dark mode, both
+button variants, the CTA band — derives from those tokens.
+
+## Using `--copy`
+
+Point `--copy` at a markdown file. The mapping is:
+
+- An `# H1` becomes the hero headline.
+- Any prose before the first `## H2` becomes the hero lead.
+- An `## H2` whose slug matches a section id (`features`, `proof`, `pricing`,
+  `faq`, `cta`, `hero`) has its body rendered into that section as rich text,
+  above the generated content.
+- Any other `## H2` becomes a new section with its own id, nav entry, and
+  anchor, inserted just before the CTA.
+
+Markdown lists, tables, code blocks, and blockquotes are all styled by the
+`.rich-text` rules. Run once without `--copy`, edit the emitted `copy.md`, then
+re-run with `--copy copy.md`.
 
 ## Outputs
 
-- `site/index.html`
-- `site/styles.css`
-- `site/script.js`
-- `site/README.md`
-- `copy.md`
-- `section-map.json`
-- `deploy-notes.md`
-- `manifest.json`
+| File | Contents |
+|------|----------|
+| `site/index.html` | The page. Stylesheet inlined in `<style>` so a cold visit is one request. |
+| `site/styles.css` | The identical stylesheet as a standalone file, if you prefer to link it. |
+| `site/script.js` | Mobile nav, single-open FAQ, smooth scroll with focus management, scrollspy, header shadow. |
+| `site/README.md` | How to serve it, how to split the CSS, what each token does. |
+| `section-map.json` | Every section id, nav label, anchor, and whether a copy override was applied. |
+| `copy.md` | The generated copy in markdown, ready to edit and feed back through `--copy`. |
+| `deploy-notes.md` | Netlify / Cloudflare / GitHub Pages / S3 commands, cache headers, a CSP, and a pre-ship checklist. |
+| `manifest.json` | Every file written, with byte sizes and the run inputs. |
+
+## What "progressive enhancement" means here
+
+- The FAQ is native `<details>`/`<summary>`. It opens and closes with JavaScript
+  disabled; the script only adds single-open behaviour.
+- The mobile menu button ships `hidden` and is revealed by the script. With
+  JavaScript off, the nav list stays visible instead of being trapped behind a
+  dead button.
+- Anchor clicks move focus to the target element so keyboard and screen reader
+  users land where sighted users do.
+- `scroll-behavior: smooth` is inside a `prefers-reduced-motion: no-preference`
+  guard, and the script checks the same media query.
+- Dark mode is a `@media (prefers-color-scheme: dark)` block that overrides only
+  color tokens.
+
+## Accessibility
 
-After submitting a hosted run, poll with `skills runs status <run-id>` and download outputs with `skills exports download <run-id>`.
+Skip link to `#main`, landmark elements (`header`, `nav[aria-label]`, `main`,
+`footer`), exactly one `<h1>`, `aria-labelledby` on every section,
+`aria-expanded` on the nav toggle, `aria-current` maintained by the scrollspy,
+and a visible `:focus-visible` ring on every interactive element.

package/skills/one-page-website/package.json

@@ -2,10 +2,33 @@
   "name": "one-page-website",
   "version": "0.1.0",
   "private": true,
-  "description": "Hosted premium one-page website bundle generator",
+  "description": "Generate a deployable static one-page website with semantic HTML, tokenized CSS, progressive-enhancement JS, and deploy notes",
   "type": "module",
-  "skills": {
-    "runtime": "hosted",
-    "source": "remote"
+  "main": "src/index.ts",
+  "bin": {
+    "one-page-website": "src/index.ts"
+  },
+  "files": [
+    "src",
+    "SKILL.md",
+    "tsconfig.json"
+  ],
+  "keywords": [
+    "website",
+    "landing-page",
+    "static-site",
+    "html",
+    "skill"
+  ],
+  "scripts": {
+    "start": "bun run src/index.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "marked": "^12.0.2"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.7.0"
   }
 }

package/skills/one-page-website/src/design.ts

@@ -0,0 +1,336 @@
+import type { CliOptions, Content, Tokens } from "./types.js";
+
+export function fnv1a(input: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < input.length; i += 1) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash >>> 0;
+}
+
+function mulberry32(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* helpers                                                             */
+/* ------------------------------------------------------------------ */
+
+export function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+}
+
+export function slugify(value: string): string {
+  return (
+    value
+      .toLowerCase()
+      .normalize("NFKD")
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "section"
+  );
+}
+
+export function titleCase(value: string): string {
+  return value
+    .split(/[-\s]+/)
+    .filter(Boolean)
+    .map((word) => word[0].toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const hue = ((h % 360) + 360) % 360;
+  const sat = clamp(s, 0, 1);
+  const lit = clamp(l, 0, 1);
+  const c = (1 - Math.abs(2 * lit - 1)) * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = lit - c / 2;
+  let rgb: [number, number, number];
+  if (hue < 60) rgb = [c, x, 0];
+  else if (hue < 120) rgb = [x, c, 0];
+  else if (hue < 180) rgb = [0, c, x];
+  else if (hue < 240) rgb = [0, x, c];
+  else if (hue < 300) rgb = [x, 0, c];
+  else rgb = [c, 0, x];
+  const toHex = (v: number) =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase();
+  return `#${toHex(rgb[0])}${toHex(rgb[1])}${toHex(rgb[2])}`;
+}
+
+export function normalizeHex(token: string): string | null {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(token.trim());
+  if (!match) return null;
+  const body = match[1];
+  const full =
+    body.length === 3
+      ? body
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : body;
+  return `#${full.toUpperCase()}`;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const value = hex.replace("#", "");
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+function relativeLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function readableOn(hex: string): string {
+  return relativeLuminance(hex) > 0.5 ? "#10131A" : "#FFFFFF";
+}
+
+/* ------------------------------------------------------------------ */
+/* style presets                                                       */
+/* ------------------------------------------------------------------ */
+
+interface StylePreset {
+  name: string;
+  hue: number;
+  keywords: string[];
+  fontDisplay: string;
+  fontSans: string;
+  radius: string;
+  radiusLg: string;
+  headingWeight: number;
+  headingTracking: string;
+  measure: string;
+}
+
+const SYSTEM_SANS =
+  "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif";
+const SYSTEM_SERIF = "Georgia, Cambria, 'Times New Roman', 'Noto Serif', serif";
+const SYSTEM_MONO =
+  "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+
+const STYLE_PRESETS: StylePreset[] = [
+  {
+    name: "editorial",
+    hue: 8,
+    keywords: ["editorial", "magazine", "serif", "print", "sharp"],
+    fontDisplay: SYSTEM_SERIF,
+    fontSans: SYSTEM_SANS,
+    radius: "4px",
+    radiusLg: "8px",
+    headingWeight: 700,
+    headingTracking: "-0.01em",
+    measure: "68ch",
+  },
+  {
+    name: "bold",
+    hue: 288,
+    keywords: ["bold", "loud", "playful", "vivid", "energetic", "startup"],
+    fontDisplay: SYSTEM_SANS,
+    fontSans: SYSTEM_SANS,
+    radius: "14px",
+    radiusLg: "26px",
+    headingWeight: 800,
+    headingTracking: "-0.035em",
+    measure: "60ch",
+  },
+  {
+    name: "warm",
+    hue: 24,
+    keywords: ["warm", "human", "friendly", "approachable", "amber"],
+    fontDisplay: SYSTEM_SANS,
+    fontSans: SYSTEM_SANS,
+    radius: "12px",
+    radiusLg: "20px",
+    headingWeight: 700,
+    headingTracking: "-0.02em",
+    measure: "64ch",
+  },
+  {
+    name: "technical",
+    hue: 172,
+    keywords: ["technical", "developer", "mono", "terminal", "engineering", "infra"],
+    fontDisplay: SYSTEM_MONO,
+    fontSans: SYSTEM_SANS,
+    radius: "6px",
+    radiusLg: "10px",
+    headingWeight: 700,
+    headingTracking: "-0.02em",
+    measure: "66ch",
+  },
+  {
+    name: "clean",
+    hue: 222,
+    keywords: ["clean", "polished", "quiet", "refined", "saas", "minimal", "crisp"],
+    fontDisplay: SYSTEM_SANS,
+    fontSans: SYSTEM_SANS,
+    radius: "10px",
+    radiusLg: "18px",
+    headingWeight: 700,
+    headingTracking: "-0.025em",
+    measure: "64ch",
+  },
+];
+
+export function selectPreset(style: string): StylePreset {
+  const lower = style.toLowerCase();
+  for (const preset of STYLE_PRESETS) {
+    if (preset.keywords.some((keyword) => lower.includes(keyword))) return preset;
+  }
+  return STYLE_PRESETS[STYLE_PRESETS.length - 1];
+}
+
+export function buildTokens(preset: StylePreset, accentOverride?: string): Tokens {
+  const accent = accentOverride ?? hslToHex(preset.hue, 0.68, 0.44);
+  return {
+    preset: preset.name,
+    hue: preset.hue,
+    accent,
+    accentContrast: readableOn(accent),
+    fontDisplay: preset.fontDisplay,
+    fontSans: preset.fontSans,
+    fontMono: SYSTEM_MONO,
+    radius: preset.radius,
+    radiusLg: preset.radiusLg,
+    headingWeight: preset.headingWeight,
+    headingTracking: preset.headingTracking,
+    measure: preset.measure,
+  };
+}
+
+const FEATURE_BANK: Array<{ title: string; body: string }> = [
+  { title: "Set up in minutes", body: "Connect your stack, pick the defaults that fit, and go live the same afternoon. No migration project, no professional services line item." },
+  { title: "Answers, not dashboards", body: "Every view leads with the number that changes a decision, then lets you drill into the rows behind it when you need the detail." },
+  { title: "Built for the whole team", body: "Roles, shared views, and comment threads mean the people who own the outcome do not have to file a ticket to see the data." },
+  { title: "Auditable by default", body: "Every change is recorded with who, what, and when. Export the log whenever finance, security, or a customer asks for it." },
+  { title: "Fits your workflow", body: "A documented API, webhooks, and a CLI so the thing you already built keeps working instead of being replaced." },
+  { title: "Predictable pricing", body: "Usage is metered transparently and shown before it bills. No surprise overage invoice at the end of the quarter." },
+];
+
+const FAQ_BANK: Array<{ q: string; a: string }> = [
+  { q: "How long does setup take?", a: "Most teams are live the same day. The guided setup walks through connecting a data source, inviting your team, and turning on the first workflow." },
+  { q: "Can we try it before committing?", a: "Yes. Every plan starts with a full-feature trial, no card required. Nothing is deleted if you decide not to continue — you can export everything." },
+  { q: "How does pricing work?", a: "You pay for the plan tier plus metered usage above the included allowance. Usage is shown live in the app so there is never a surprise invoice." },
+  { q: "Where is our data stored?", a: "Data is encrypted in transit and at rest. You choose the storage region during setup, and you can request a full export or deletion at any time." },
+  { q: "Do you integrate with what we already use?", a: "There is a documented REST API, outbound webhooks, and a CLI. If a first-party integration is missing, the API covers the same surface." },
+  { q: "What does support look like?", a: "Email support on every plan, shared Slack or Teams channel on the higher tiers, and a public status page with incident history." },
+];
+
+/* ------------------------------------------------------------------ */
+/* copy generation                                                     */
+/* ------------------------------------------------------------------ */
+
+
+export function buildContent(options: CliOptions, seed: number): Content {
+  const rng = mulberry32(seed);
+  const name = options.name!.trim();
+  const audience = options.audience.trim();
+  const goal = options.goal.trim();
+  const tagline = (options.tagline ?? `${name} makes the hard part of your workflow routine`).trim();
+
+  const featureTitles = options.features
+    ? options.features
+        .split(",")
+        .map((entry) => entry.trim())
+        .filter(Boolean)
+    : [];
+
+  const features =
+    featureTitles.length > 0
+      ? featureTitles.slice(0, 6).map((title, index) => ({
+          title,
+          body: FEATURE_BANK[index % FEATURE_BANK.length].body,
+        }))
+      : FEATURE_BANK.slice(0, 6);
+
+  const stats = [
+    { value: `${40 + Math.floor(rng() * 50)}%`, label: "less manual work in the first month" },
+    { value: `${2 + Math.floor(rng() * 8)}x`, label: "faster from question to answer" },
+    { value: `${90 + Math.floor(rng() * 9)}.${Math.floor(rng() * 9)}%`, label: "uptime over the last twelve months" },
+  ];
+
+  return {
+    name,
+    tagline,
+    lead: `${name} is built for ${audience}. Replace the spreadsheet-and-screenshot routine with one place that stays current, explains itself, and holds up when someone asks how the number was produced.`,
+    eyebrow: "New",
+    goal,
+    audience,
+    features,
+    stats,
+    quote: {
+      text: `We replaced three internal tools and a standing meeting with ${name}. The part I did not expect was how quickly the rest of the team stopped asking me for numbers.`,
+      author: "A. Okafor",
+      role: `Operations lead, ${audience}`,
+    },
+    tiers: [
+      {
+        name: "Starter",
+        price: "$0",
+        cadence: "forever",
+        blurb: "For one person proving it works.",
+        items: ["1 workspace", "Up to 3 sources", "7-day history", "Community support"],
+        featured: false,
+      },
+      {
+        name: "Team",
+        price: `$${20 + Math.floor(rng() * 40)}`,
+        cadence: "per seat / month",
+        blurb: `For ${audience} running this every week.`,
+        items: ["Unlimited sources", "Roles and shared views", "12-month history", "API, webhooks, and CLI", "Email support"],
+        featured: true,
+      },
+      {
+        name: "Scale",
+        price: "Custom",
+        cadence: "annual",
+        blurb: "For the version with an audit requirement.",
+        items: ["SSO and SCIM", "Region selection", "Audit log export", "99.9% uptime SLA", "Shared Slack channel"],
+        featured: false,
+      },
+    ],
+    faqs: FAQ_BANK.slice(0, 5),
+    ctaHeading: `Ready to ${goal.toLowerCase()}?`,
+    ctaBody: `Start with the free tier, or talk to us about the version with the audit trail. Either way you will know within an afternoon whether ${name} fits.`,
+    year: new Date().getFullYear(),
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* markdown copy overrides                                             */
+/* ------------------------------------------------------------------ */
+