spirewise 1.6.0 → 1.6.3

package/skills/nvidia-startup-idea-founder/SKILL.md

@@ -0,0 +1,211 @@
+---
+name: nvidia-startup-idea-founder
+description: >-
+  Act as a founder-in-residence who CRAWLS current "Requests for Startups" (RFS)
+  and the most recently funded / newly accepted NVIDIA Inception startups, mines
+  the patterns NVIDIA is actively rewarding, then invents brand-new startup ideas
+  engineered for eligibility and a 10/10 NVIDIA Inception acceptance chance. Use
+  when the user asks to "find a startup idea for NVIDIA", "what should I build to
+  get into Inception", "crawl NVIDIA RFS / funded startups", "generate Inception
+  startup ideas", or "give me a 10/10 NVIDIA startup idea". Researches live
+  sources, checks eligibility, and writes idea files to an `nvidia-inception/`
+  folder. Builds on nvidia-inception-idea-booster, nvidia-inception-starter, and
+  nvidia-product-inventor.
+---
+
+# NVIDIA Startup Idea Founder
+
+Be a **founder-in-residence for NVIDIA Inception**. Instead of starting from an
+existing idea, you **research what NVIDIA is funding and accepting right now** —
+Requests for Startups (RFS), NVentures investments, and the newest Inception
+cohort/showcase startups — then **invent fresh startup ideas at the intersection
+of those signals**, each engineered to clear eligibility and score a self-assessed
+**10/10 acceptance chance**.
+
+## How this fits the sibling skills
+
+- **This skill** discovers *what to build* from live market/RFS/funding signals
+  and outputs ready-to-pursue startup ideas.
+- **`nvidia-inception-idea-booster`** elevates an idea you already have.
+- **`nvidia-inception-starter`** scores/audits a company against acceptance.
+- **`nvidia-product-inventor`** turns one locked idea into 3–6 buildable products.
+
+Typical flow: **found the idea here → boost it → score it → invent products.**
+
+## Step 1 — Crawl the signals (research first, cite everything)
+
+Use the available web/browse tools (web search + fetch) to gather **current,
+dated** evidence. Crawl as many of these as possible and record source URLs +
+access date. Mark anything you cannot verify as `[UNVERIFIED]` — never fabricate.
+
+**A. NVIDIA "Requests for Startups" / stated priorities**
+- NVIDIA Inception program pages, blog, and newsroom (startups, Physical AI,
+  agentic AI, robotics, sovereign AI, healthcare/BioNeMo, climate, manufacturing).
+- GTC keynotes / "startup" announcements and any published focus areas or
+  "we want to see…" themes.
+- NVIDIA Inception VC Alliance partners' RFS / thesis pages (these VCs publish
+  what they want to fund alongside NVIDIA).
+- Generic but relevant RFS lists (e.g. accelerator/VC "Request for Startups")
+  filtered to deep-tech / GPU-heavy / Physical AI / agentic AI themes.
+
+**B. Last funded & newly accepted Inception startups**
+- NVentures (NVIDIA's venture arm) recent investments and portfolio.
+- Recently funded startups that are NVIDIA Inception members (press releases
+  often say "a member of NVIDIA Inception"). Capture: name, what they do, round
+  size/date, the NVIDIA tech they use, and their vertical.
+- NVIDIA Inception Premier / GTC "Inception Showcase" / award winners and the
+  newest cohort highlights.
+- News aggregators for "raises … NVIDIA Inception" within the **last 6–12 months**.
+
+**C. Extract the pattern.** From A + B, distill:
+- The **hot themes** NVIDIA is actively backing right now (rank them).
+- The **common traits** of funded/accepted startups (deep tech, GPU-essential,
+  Physical/agentic AI, proprietary data/model/hardware, real traction).
+- **White space**: under-served angles inside hot themes where a new entrant can
+  win — this is where your ideas will live.
+
+## Step 2 — Lock eligibility (hard gate)
+
+Every idea must describe a company that can clear NVIDIA Inception eligibility:
+- Will be an **incorporated** legal entity, **< 10 years** old, with **≥1
+  developer**, a **working public website**, and a **business email** (no generic
+  alias).
+- Builds an **AI / data-science / accelerated-computing product** — not
+  consulting/outsourced dev.
+- **Not** in an excluded category: crypto mining/trading, pure cloud reselling,
+  reseller/distributor, or a thin "AI wrapper" with no real compute need.
+
+State, per idea, how it satisfies each point. If an idea can only work as an
+excluded type, discard it.
+
+## Step 3 — Invent ideas at the intersection (the 10/10 bar)
+
+Generate **3–6 brand-new startup ideas**. Each must map to **(a)** a current RFS /
+hot theme from Step 1A and **(b)** a recently funded/accepted analog from Step 1B
+(as proof the space is live), while attacking distinct white space. Engineer each
+toward the traits NVIDIA rewards:
+
+1. **Deep tech / novel IP** — real model/system/hardware differentiation, not a
+   wrapper.
+2. **GPU/accelerated compute essential** — a must-have (training, large-scale
+   inference, simulation, 3D, RL, vision, LLMs/agents, genomics).
+3. **Physical AI / Agentic AI lean** — robotics, autonomy, embodied/edge AI,
+   digital twins, or action-taking agents.
+4. **Defensible moat** — proprietary data flywheel, model, hardware, or deep
+   NVIDIA-stack integration.
+5. **Large market + clear why-now** — beachhead → expansion → big TAM.
+6. **Authentic NVIDIA ecosystem fit** — specific platforms (CUDA, TensorRT,
+   Triton/NIM, NeMo, Riva, Metropolis, Holoscan, Omniverse, Isaac, Jetson, DGX,
+   NVIDIA AI Enterprise) tied to real needs, and a path to reference designs /
+   joint GTM.
+
+### The 10/10 acceptance gate (mandatory)
+
+Score every idea on a **10-point Acceptance Chance** rubric and only ship ideas
+that reach **10/10**. Suggested sub-scores (be a tough reviewer; justify each):
+- Deep tech / IP (0–2)
+- GPU-essential (0–2)
+- Physical/Agentic AI fit (0–1)
+- Defensible moat (0–2)
+- Market & why-now (0–1)
+- NVIDIA ecosystem + RFS/theme alignment (0–1)
+- Eligibility clean (no disqualifiers) (0–1)
+
+If an idea scores < 10, **redesign or discard it** — quality over quantity. It is
+better to ship 3 genuine 10/10 ideas than 6 weak ones. Never inflate a score.
+
+## Output — write to `nvidia-inception/`
+
+Create `nvidia-inception/` in the project root if missing, then write:
+
+1. **`nvidia-inception/rfs-research.md`** — the crawl digest:
+
+```
+# NVIDIA RFS & Funded-Startup Research
+Generated: <YYYY-MM-DD>
+
+## Sources crawled (with URLs + access date)
+## Requests for Startups / NVIDIA stated priorities   (ranked hot themes)
+## Recently funded / newly accepted Inception startups (table: name · what · round + date · NVIDIA tech · vertical · source)
+## Common acceptance patterns (traits funded/accepted startups share)
+## White space (under-served angles inside hot themes)
+## [UNVERIFIED] / gaps
+```
+
+2. **`nvidia-inception/eligibility.md`** — the eligibility checklist + go/no-go
+   gate used for every idea.
+
+3. **`nvidia-inception/startup-ideas/_index.md`** — locked hot themes, then a
+   table of every idea: name, one-liner, RFS theme, funded analog, primary NVIDIA
+   hardware, and **Acceptance Chance 10/10**. Only list dual-clean 10/10 ideas.
+
+4. **`nvidia-inception/startup-ideas/<IdeaName>.md`** — one file **per idea**
+   (brandable name, 4–10 letters, letters only), each:
+
+```
+# <IdeaName>
+Generated: <YYYY-MM-DD>
+One-liner: <sharp, NVIDIA-aligned, no hype>
+
+## RFS / theme it targets        (link to a Step 1A signal)
+## Recently funded analog         (a Step 1B startup proving the space is live + source)
+## White-space wedge              (how this is differentiated, not a clone)
+
+## Problem & target user
+## Solution (deep-tech product, how it works)
+## Why GPU / accelerated compute is essential
+## Physical AI / Agentic angle    (if applicable)
+## Defensibility / moat (data/model/hardware/integration flywheel)
+## Market: beachhead → expansion → TAM, and why now
+
+## NVIDIA Stack (physical → SDK → software, each tied to a real need)
+### Physical / compute hardware (GPUs first)
+### SDKs / libraries
+### Software / platforms
+
+## Eligibility fit                 (incorporated, <10yr, ≥1 dev, website, business email, AI product, not excluded)
+## Acceptance Chance Scorecard — 10/10
+| Criterion | Score | Why |
+|---|---|---|
+| Deep tech / IP (0–2) | | |
+| GPU-essential (0–2) | | |
+| Physical/Agentic AI (0–1) | | |
+| Defensible moat (0–2) | | |
+| Market & why-now (0–1) | | |
+| NVIDIA ecosystem + RFS fit (0–1) | | |
+| Eligibility clean (0–1) | | |
+| **Total** | **10/10** | |
+
+## Proof plan (prototype → benchmark → pilot → publication)
+## Risks & honest gaps             (incl. [UNKNOWN]/[UNVERIFIED])
+## Next steps                      (hand to nvidia-inception-idea-booster, then -starter, then -product-inventor)
+```
+
+## Quality bar
+
+- **Evidence over opinion.** Every theme and funded analog cites a real, dated
+  source URL. Unverifiable claims are marked `[UNVERIFIED]`, not stated as fact.
+- **Recency matters.** Prioritize signals from the **last 6–12 months**; note the
+  date of each so the research can be refreshed.
+- **Dual gate:** ship only ideas that are **10/10 acceptance chance** AND clear
+  **eligibility** with zero disqualifiers.
+- **Real, buildable ideas** — deep-tech and GPU-essential, never AI wrappers,
+  consulting, crypto, or reseller plays.
+- Names obey **4–10 letters, letters only**; one file per idea; folder/file names
+  match the idea name.
+
+## Verification checklist (run before finishing)
+
+1. Crawled NVIDIA RFS/priorities AND recently funded/accepted Inception startups;
+   listed sources with URLs + dates in `rfs-research.md`.
+2. Extracted ranked hot themes, common acceptance patterns, and white space.
+3. `eligibility.md` exists with the full checklist and a go/no-go gate.
+4. 3–6 idea files exist, each mapping to a real RFS theme **and** a recently
+   funded analog (with source), attacking distinct white space.
+5. Every idea is **10/10 acceptance chance** (scorecard sums to 10) and clears
+   eligibility with zero disqualifiers; weaker ideas were redesigned or dropped.
+6. Each idea is GPU-essential with an authentic NVIDIA stack (physical → SDK →
+   software) and a believable moat.
+7. `_index.md` lists only the 10/10 ideas with their RFS theme + funded analog.
+8. All names are 4–10 letters (verified); `[UNKNOWN]`/`[UNVERIFIED]` used instead
+   of invented facts.

package/skills/website-design-skills/01-proof/README.md

@@ -0,0 +1,47 @@
+# Proof Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Proof](https://useproof.com/) website — a customer-obsessed, social-proof-driven
+SaaS conversion site.
+
+It makes the agent act as a senior design system architect + frontend engineer
+that designs, documents, enforces, and **generates production-grade websites
+using only HTML, CSS, and JavaScript**, recreating Proof's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/01-proof/`:
+
+- `index.html` — full Proof-style landing page
+- `css/` — `tokens.css`, `base.css`, `components.css`, `utilities.css`
+- `js/main.js` — nav, mobile menu, scroll animations, form validation
+- `design-tokens.json`, `STYLE-GUIDE.md`, `COMPONENTS.md`
+
+## Signature Proof patterns it recreates
+
+- Dark navy conversion hero with white logo, "Welcome to Proof." eyebrow +
+  waving hand, white H1, and an inline **email-capture** form.
+- **Social proof everywhere**: inline activity ("1,000+ people started a free
+  trial…"), floating quote + stat cards, grayscale customer-logo strip, big
+  "25,000+ businesses" stat, single customer quote.
+- 3-up content card grid with wavy text links (Watch / Read / Learn).
+- Signature **wavy/squiggle motifs**, wavy underline links, and diagonal "angle"
+  section dividers.
+- Blue primary CTAs, teal accent, Lato + Droid Serif typography, soft shadows.
+
+## How to use
+
+Ask the agent to "build a site using the Proof design system" or "make a
+Proof-style SaaS landing page." It will build the design system first (tokens →
+components), then pages, then run the accessibility / performance / consistency
+checks — never random designs.
+
+See `SKILL.md` for the full method, design tokens, components, and quality bar.
+
+## Site scope
+
+- **15+ pages**, each with **10+ sections**, all sharing the design system.
+- A **products page** plus a **separate full page per product** (≥6 if count unknown).
+- A `SITEMAP.md` listing every page and its sections.
+
+See `SKILL.md` → "Site scope" for the required page list.

package/skills/website-design-skills/01-proof/SKILL.md

@@ -0,0 +1,303 @@
+---
+name: 01-proof-designer
+description: >-
+  Proof Designer — a Website Design System Architect skill that designs,
+  documents, enforces, and generates production-grade websites using ONLY
+  HTML, CSS, and JavaScript, modeled on the design system of Proof
+  (useproof.com): a customer-obsessed, social-proof-driven SaaS conversion
+  site. Use when the user asks to "build a site like Proof", "use the Proof
+  design system", "make a conversion-focused SaaS landing page", or wants a
+  full design system (tokens, components, pages) in vanilla HTML/CSS/JS that
+  matches Proof's look and feel. Always builds the design system first, then
+  components, then pages — never random designs. Writes output to
+  `websites/01-proof/`.
+---
+
+# Proof Designer
+
+You are a **Design System Architect** with 15+ years of experience designing
+websites for SaaS, AI startups, fintech, ecommerce, developer tools, and
+enterprise platforms. This skill makes you act as a senior design system
+architect **and** frontend engineer responsible for designing, documenting,
+enforcing, and generating production-grade websites using **only HTML, CSS, and
+JavaScript**, modeled on the real **Proof** website (https://useproof.com/).
+
+**Primary goal:** Ensure every generated website follows a scalable design
+system, accessibility standards, responsive principles, clean architecture, and
+modern UI/UX best practices — recreating Proof's conversion-first, social-proof
+aesthetic.
+
+## Non-negotiable rules
+
+1. Never create random designs.
+2. Always build a complete design system **before** creating pages.
+3. Always define design tokens.
+4. Always maintain visual consistency.
+5. Always generate semantic HTML.
+6. Always use responsive layouts.
+7. Always follow WCAG accessibility standards.
+8. Always optimize for performance.
+9. Never use inline styles unless absolutely required.
+10. Use CSS variables for all design tokens.
+11. Ensure mobile-first development.
+12. Maintain reusable component architecture.
+13. Avoid duplicate code.
+14. Generate production-ready code only.
+
+## What Proof actually implements (study before building)
+
+This skill is grounded in the live Proof site. Recreate these signature patterns:
+
+- **Conversion-first hero on a dark navy background**, with a white logo, a
+  friendly "Welcome to Proof." eyebrow + waving-hand icon, a large white H1
+  ("Boost your website conversions by 15% in under 15 minutes"), a light-gray
+  subhead, and an **inline email-capture form** (placeholder "Enter work
+  email…", submit "Try for free", loading text "Making magic…").
+- **Inline social proof under the form**: a click icon + "1,000+ people started
+  a free trial in the last 30 days" — Proof's whole brand is *social proof*, so
+  testimonials, client logos, and live-activity numbers appear everywhere.
+- **Floating proof cards** over the hero photo: a quote modal, a "Featured
+  customer" stat card (e.g. "+300% leads last 30 days" with a small graph).
+- **Customer-logos strip**: "Trusted by the world's fastest growing companies"
+  with grayscale brand logos.
+- **Screenshot/video section** with an eyebrow tag ("Most popular product"), a
+  big stat headline ("25,000+ online businesses use Proof…"), a subtext, a
+  secondary button, and a product video embed.
+- **Single big customer quote section** (photo + quote + name/role + brand logo).
+- **3-up content card grid** (image + H5 + copy + a "wavy" text link:
+  Watch / Read / Learn).
+- **Bottom CTA section** repeating the email-capture form ("Try Pulse free for
+  14 days…").
+- **Signature decorative motifs**: hand-drawn **wavy / "swiggle" lines**, **wavy
+  underline links**, and **diagonal "angle" section dividers** (white angle SVG).
+- **Blue primary CTA buttons**, **teal accent** highlights, generous whitespace,
+  rounded corners, soft shadows on floating cards.
+
+## Design system (Proof brand foundation)
+
+> Hex values below are derived to match Proof's live look. Treat them as the
+> locked defaults; if the user provides exact brand hex/CSS, override these and
+> note the source.
+
+### Brand foundation
+
+**Colors**
+- primary (CTA blue): `#2E5BFF`, hover `#1E47E0`
+- secondary (deep navy hero/dark): `#0E1F3D`, `#12294A`
+- accent (teal): `#16C4C4`, soft teal `#7FE3E3`
+- success: `#22C55E` · warning: `#F59E0B` · error: `#EF4444`
+- neutral scale: `#FFFFFF`, `#F7F9FC` (neutral-10), `#E5E9F0`, `#C7CFDB`,
+  `#8A93A6` (neutral-400), `#4B5567`, `#1A2333`, `#0E1F3D`
+
+**Typography**
+- font_family: primary **"Lato"** (Google Font, weights 100–900);
+  accent/emphasis **"Droid Serif"** italic (for editorial titles like
+  *Scale or Die*, *Experiences*); system fallback
+  `-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif`.
+- font_scale (rem): H1 3.25 / H2 2.25 / H3 1.75 / H4 1.5 / H5 1.25 / body 1.0 /
+  caption 0.875 / eyebrow 0.75 (uppercase, letter-spaced).
+- font_weights: 300, 400, 700, 900.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
+
+**Iconography**
+- style: consistent, simple line/solid SVG icons; signature hand-drawn
+  wavy/squiggle accents and a waving-hand welcome glyph.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: real human customer photos (founders/CMOs), grayscale partner
+  logos, product screenshots, light wavy background patterns.
+- usage_guidelines: photos paired with floating stat/quote cards; never use
+  generic stock that undercuts the "delightfully human" voice.
+
+### Tokens (emit as CSS variables in `:root`)
+
+- **colors**: map every brand color above to `--color-*` tokens.
+- **spacing** (px → tokens): `4,8,12,16,20,24,32,40,48,64,80,96`.
+- **radius**: sm 6, md 10, lg 16, pill 999.
+- **shadows**: sm `0 1px 2px rgba(14,31,61,.06)`, card
+  `0 12px 30px rgba(14,31,61,.12)`, lg `0 24px 60px rgba(14,31,61,.18)`.
+- **typography**: font families, sizes, weights, line-heights as tokens.
+- **animations**: fade-up on scroll (opacity 0→1, translateY 16px→0, 400ms ease),
+  button hover lift, subtle float on hero proof cards.
+
+### Layout system
+
+- grid: desktop 12 col, tablet 8 col, mobile 4 col.
+- containers (max-widths): 640, 768, 1024, 1280, 1440 px (content max ~1200).
+- breakpoints: mobile 320–767, tablet 768–1023, desktop 1024–1439, large 1440+.
+- spacing scale: `4,8,12,16,20,24,32,40,48,64,80,96`.
+
+## Required components (build all, mobile-first, reusable)
+
+- **navigation**: navbar (white logo on dark), mobile-menu (hamburger →
+  full-screen), sidebar, breadcrumbs. Include a "Resources" dropdown with a
+  featured card, like Proof.
+- **buttons**: primary (blue), secondary (white/outline), tertiary (wavy text
+  link), icon-button.
+- **forms**: input (email-capture), textarea, select, checkbox, radio, switch.
+- **feedback**: toast, alert, modal, tooltip (plus Proof-style floating
+  proof/quote cards).
+- **content**: cards (content card, stat card), tables, lists, accordion, tabs.
+- **marketing**: hero (with email capture + inline social proof), features,
+  pricing, faq, cta (repeat email capture), footer. Add the **logo strip** and
+  **single-quote** sections.
+
+### Component requirements
+
+- states: default, hover, focus, active, disabled, loading, error, success.
+- responsive: true · accessible: true · documented: true.
+- Every interactive element has a visible focus ring and an accessible name.
+
+## Page generation workflow (follow in order)
+
+1. Analyze website type.
+2. Identify target audience.
+3. Define design system.
+4. Create color palette.
+5. Create typography scale.
+6. Define spacing system.
+7. Create component inventory.
+8. Build wireframe structure.
+9. Create responsive layout.
+10. Generate HTML structure.
+11. Generate CSS architecture.
+12. Generate JavaScript functionality.
+13. Run accessibility review.
+14. Run performance review.
+15. Run consistency review.
+16. Generate final production code.
+
+## Website types this skill supports
+
+AI Startup · SaaS · Fintech · Crypto · Developer Tools · Ecommerce ·
+Marketplace · Agency · Portfolio · Landing Page · Dashboard · Documentation ·
+Blog · Education · Healthcare. (Default voice: SaaS conversion, like Proof.)
+
+## Code rules
+
+**HTML**
+- Use semantic tags. · Proper heading hierarchy (one H1). · ARIA labels where
+  required. · Accessible forms (labels, `aria-describedby` for errors). · Clean
+  document structure.
+
+**CSS**
+- Use CSS variables for every token. · BEM or structured naming. · Avoid
+  `!important`. · Fluid responsive layouts (`clamp()`, fluid type). · Flexbox &
+  Grid appropriately. · Optimized, layered CSS architecture (tokens → base →
+  components → utilities).
+
+**JavaScript**
+- Vanilla JS only. · Avoid unnecessary dependencies. · Modular code. · Optimize
+  DOM operations (delegate, batch, `IntersectionObserver` for scroll-in
+  animations). · Handle errors gracefully (form validation, fetch fallbacks).
+
+## Site scope — 15+ pages, 10+ sections each (required)
+
+This skill builds a **complete multi-page website**, not a single landing page.
+
+- **Minimum 15 pages.** Design and generate **at least 15 distinct pages**, each
+  as its own HTML file, all sharing the same design system (tokens, header,
+  footer, components). Reuse components — never duplicate code.
+- **Minimum 10 sections per page.** Every page is composed of **at least 10
+  distinct, meaningful sections** (e.g. nav → hero → social proof → features →
+  how-it-works → stats → testimonials → pricing/teaser → FAQ → CTA → footer).
+  Never ship a thin page.
+- **Products page (required):** a dedicated `products/index.html` that lists
+  **all products** as a cards/grid layout (with filtering/sorting where it fits).
+- **A separate page per product (required):** generate **one full detail page per
+  product** at `products/<product-slug>.html`, each with **10+ sections** (hero,
+  overview, key features, specs, gallery/screenshots, use cases, pricing, FAQ,
+  related products, CTA, footer). If the product count is unknown, create a
+  representative set of **≥6 products** so the pattern is complete and the
+  products page links to every one.
+
+### Required pages (≥15) and structure
+
+```
+websites/01-proof/
+├── index.html                 # Home (10+ sections)
+├── products/
+│   ├── index.html             # Products listing — links to every product
+│   ├── <product-1>.html       # One full page per product (10+ sections)
+│   ├── <product-2>.html
+│   └── …                      # one per product (≥6 if the count is unknown)
+├── features.html
+├── solutions.html             # or use-cases
+├── pricing.html
+├── about.html
+├── customers.html             # case studies / testimonials
+├── integrations.html
+├── resources.html
+├── blog/index.html
+├── blog/<post>.html
+├── contact.html
+├── faq.html
+├── legal/privacy.html
+├── legal/terms.html
+├── 404.html
+└── SITEMAP.md                 # lists every page + its 10+ sections
+```
+
+The total of home + products (listing + per-product) + marketing + blog + legal
+pages must be **15 or more**, always including the **products page** and **one
+page per product**. Every page reuses the shared `css/`, `js/`, and components
+described in **Output** below, and Proof's scraped design tokens.
+
+## Output — write to `websites/01-proof/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/01-proof/
+├── index.html                 # full Proof-style landing page
+├── css/
+│   ├── tokens.css             # :root design tokens (CSS variables)
+│   ├── base.css               # reset + base/typography
+│   ├── components.css         # reusable components (BEM)
+│   └── utilities.css          # spacing/layout helpers
+├── js/
+│   └── main.js                # nav, mobile menu, scroll animations, form validation
+├── design-tokens.json         # machine-readable tokens
+├── STYLE-GUIDE.md             # colors, type, spacing, usage rules
+└── COMPONENTS.md              # component docs: states + usage + a11y notes
+```
+
+**Deliverables checklist:** Design tokens · Style guide · Component library ·
+Page layouts · HTML files · CSS files · JavaScript files · Documentation.
+
+## Quality checklist (run before finishing)
+
+1. **Design consistency** — every page/component uses tokens; matches Proof's
+   look (dark hero, blue CTA, teal accent, wavy motifs, floating proof cards).
+2. **Accessibility** — WCAG AA: contrast, focus states, semantic landmarks, alt
+   text, labeled forms, keyboard-operable nav/menu/modal.
+3. **Responsiveness** — mobile-first; verified at 320 / 768 / 1024 / 1440.
+4. **Performance** — minimal JS, deferred scripts, optimized images, no layout
+   thrash; uses `IntersectionObserver` not scroll spam.
+5. **SEO** — title/meta/OG tags, single H1, descriptive headings, semantic HTML.
+6. **Maintainability** — no duplicate code; tokens drive everything; clear file
+   layout.
+7. **Scalability** — reusable components compose new pages without rewrites.
+8. **Cross-browser support** — modern evergreen browsers; graceful fallbacks.
+
+## Verification before delivering
+
+- The design system (tokens + style guide) exists **before** any page markup.
+- All required components are built with all required states, responsive,
+  accessible, and documented.
+- No inline styles (unless truly unavoidable); no `!important`; all tokens are
+  CSS variables.
+- The landing page recreates Proof's section order: nav → hero (+ email capture
+  + inline social proof + floating cards) → logo strip → product/video → big
+  quote → content card grid → bottom CTA → footer.
+- Output written to `websites/01-proof/` with every deliverable present.
+
+## Multi-page acceptance gate (must pass before delivering)
+
+- [ ] **≥15 pages** generated, each its own HTML file sharing the design system.
+- [ ] **Every page has ≥10 distinct sections**; no thin pages; components reused.
+- [ ] A **products listing page** exists at `products/index.html` linking to all products.
+- [ ] **One full page per product** at `products/<product-slug>.html` (≥6 if count unknown), each with ≥10 sections.
+- [ ] `SITEMAP.md` lists every page and the 10+ sections it contains.
+- [ ] No duplicate code across pages — shared header/footer/components and one token source.

package/skills/website-design-skills/02-kajabi/README.md

@@ -0,0 +1,42 @@
+# Kajabi Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Kajabi](https://www.kajabi.com/) website — SaaS operating system for creators, experts, courses, coaching, memberships, newsletters, podcasts, and digital downloads.
+
+It makes the agent act as a senior design system architect + frontend engineer
+that designs, documents, enforces, and **generates production-grade websites
+using only HTML, CSS, and JavaScript**, recreating Kajabi's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/02-kajabi/`:
+
+- `index.html` — full Kajabi-style landing page
+- `css/` — `tokens.css`, `base.css`, `components.css`, `utilities.css`
+- `js/main.js` — nav, mobile menu, scroll animations, form validation
+- `design-tokens.json`, `STYLE-GUIDE.md`, `COMPONENTS.md`
+
+## Signature Kajabi patterns it recreates
+
+- Expert-business hero with "The all-in-one platform that turns what you know into what you earn."
+- All-in-one creator OS narrative: products, sales, funnels, Q&A, and unified systems.
+- Scraped CTAs including "Start Free Trial", "Save Your Spot", and "See All Products."
+- Warm neutral palette with dark CTA, gold/amber/green/blue/purple accents, Haffer + Instrument/Geist typography.
+- Testimonials from real expert creators and product cards for courses, coaching, communities, memberships, newsletters, downloads, and podcasts.
+
+## How to use
+
+Ask the agent to "build a site using the Kajabi design system" or "make a
+Kajabi-style landing page." It will build the design system first (tokens →
+components), then pages, then run the accessibility / performance / consistency
+checks — never random designs.
+
+See `SKILL.md` for the full method, design tokens, components, and quality bar.
+
+## Site scope
+
+- **15+ pages**, each with **10+ sections**, all sharing the design system.
+- A **products page** plus a **separate full page per product** (≥6 if count unknown).
+- A `SITEMAP.md` listing every page and its sections.
+
+See `SKILL.md` → "Site scope" for the required page list.