spirewise 1.6.2 → 1.6.3

package/skills/website-design-skills/32-nauto/SKILL.md

@@ -0,0 +1,273 @@
+---
+name: 32-nauto-designer
+description: >-
+  Nauto 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 Nauto
+  (https://www.nauto.com/): an AI fleet safety platform whose dash cams predict and help prevent collisions in real time. Use when the user asks to "build a site like Nauto",
+  "use the Nauto design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches Nauto's look and
+  feel. Always builds the design system first, then components, then pages —
+  never random designs. Writes output to `websites/32-nauto/`.
+---
+
+# Nauto 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 **Nauto** website (https://www.nauto.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 Nauto's live, scraped 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 Nauto actually implements (study before building)
+
+This skill is grounded in the live Nauto site. Recreate these signature patterns:
+
+- **Urgent safety hero**, with the live H1 "The only AI Dash Cam that predicts and helps prevent crashes" and metadata promise around an AI-powered fleet safety platform that predicts and prevents collisions in real time.
+- **Top alert/banner pattern**: "Are you getting the truth from your dash cam provider?" with "Learn more →" before the main nav.
+- **Navigation observed live**: Product, Industries, Resources, Company, Log in, and the primary CTA "Get a quote →".
+- **Section order observed live**: banner → nav → hero → "Most smart dash cams don’t prevent crashes" problem cards → real-time prevention promise → 30+ risk-factor explanation → invisible red flags → product feature proof → bpx energy case study → complete fleet operations platform → operational/compliance sections → FAQ.
+- **Real proof points** include "Nauto monitors 30+ risk factors at once" and "bpx energy reduces at-fault collisions by 62% with Nauto," plus stat tiles for 89 / 75 / 62 in the case-study area.
+- **Visual motifs**: full-bleed road/dash-cam video or imagery, black overlays, electric safety blue CTAs, green success/action accents, high-contrast risk cards, animated tab/progress behavior, and arrow-forward links.
+- **Logo treatment**: simple Nauto wordmark in a clean nav; the product should feel like safety hardware + AI software, not generic SaaS.
+
+## Design system (Nauto brand foundation)
+
+> Hex values below are scraped from the live site HTML/CSS where noted. Values
+> marked inferred should be treated as approximations only; prefer scraped values
+> whenever available.
+
+### Brand foundation
+
+**Colors**
+- primary / safety blue: `#275DFF` (scraped `--base-color-brand--blue`)
+- primary hover / focus blue: `#2D62FF` (scraped `--base-color-system--focus-state`)
+- accent / safety green: `#12B259` (scraped `--base-color-brand--green`)
+- background / dark overlay: `#151515` (scraped `--base-color-neutral--black`)
+- surface white: `#FFFFFF` (scraped `--base-color-neutral--white`)
+- warning yellow: `#FCF8D8` (scraped `--base-color-system--warning-yellow`)
+- error red: `#FF2B2B` (scraped `--base-color-brand--red`)
+- success: `#22C55E` · warning: `#F59E0B` · error: `#EF4444` (shared fallback tokens unless a scraped brand-specific value above applies)
+- neutral scale: `#FFFFFF`, `#F7F9FC`, `#E5E9F0`, `#C7CFDB`, `#8A93A6`,
+  `#4B5567`, `#1A2333`, `#0E1726`
+
+**Typography**
+- font_family: primary **Circular** with **Geist** for UI/headings and **Geist Mono** for technical/stat labels (scraped `@font-face`); fallback `Arial, Helvetica Neue, Segoe UI, Verdana, 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, 500, 600, 700, 800, 900 where available in the scraped family.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
+
+**Iconography**
+- style: fleet/safety line icons, dash-cam risk markers, arrow-forward SVGs, dropdown chevrons, compliance and operations icons.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: road footage/video, dash-cam hardware, driver/fleet imagery, product dashboards, incident/risk visualizations, and enterprise case-study visuals.
+- usage_guidelines: Use real product/customer context and live-site motifs; avoid
+  generic stock that weakens Nauto's specific market position.
+
+### 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, and motion cues consistent with Nauto's live site.
+
+### 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**: banner + navbar, Product/Industries dropdowns, Resources and Company links, mobile-menu, sidebar, breadcrumbs; include Log in and Get a quote →.
+- **buttons**: primary electric-blue CTA with arrow, dark secondary login button, white/outline button, tertiary Learn more → link, icon-button.
+- **forms**: input, textarea, select, checkbox, radio, switch.
+- **feedback**: toast, alert, modal, tooltip, plus Nauto-specific proof/feature cards.
+- **content**: cards, stat cards, product panels, tables, lists, accordion, tabs.
+- **marketing**: banner, hero, problem cards, risk-factor proof, product video/screenshot section, case-study stat block, platform modules, FAQ, bottom quote CTA, footer.
+
+### 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: fleet safety and collision-prevention, like Nauto.)
+
+## 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/32-nauto/
+├── 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 Nauto's scraped design tokens.
+
+## Output — write to `websites/32-nauto/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/32-nauto/
+├── index.html                 # full Nauto-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 Nauto (safety blue/green, black overlays, dash-cam video motif, predictive risk copy, fleet operations proof).
+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 Nauto's live section order: banner → nav → hero → smart-dash-cam problem → prevention/risk factors → feature proof → bpx case study → fleet operations modules → FAQ → CTA → footer.
+- Output written to `websites/32-nauto/` 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/33-bill/README.md

@@ -0,0 +1,44 @@
+# BILL Designer
+
+A **Website Design System Architect** skill modeled on the live
+[BILL](https://www.bill.com/) website — Fintech — AI-powered financial operations platform for businesses and accounting firms.
+
+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 BILL's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/33-bill/`:
+
+- `index.html` — full BILL-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 BILL patterns it recreates
+
+- AI-finance hero, with the live H1 "Meet BILL. Your AI-powered financial operations platform." and metadata around AP, AR, spend, expense, budgets, payments, and business credit.
+- Navigation observed live: AP & AR, Spend & Expense, Business Credit, Accountants, Resources, Request a Demo, Pricing, and Login; footer/nav also exposes Product, Solutions, Resources, Blog, Company.
+- Section order observed live: nav → hero → feature grid → "Save time on payments with AI-enhanced AP automation" → cash-flow/credit/expense section → business and firm paths → "Customers succeed with BILL" → nearly-half-million-businesses proof → final AI-powered financial automation CTA.
+- Real feature labels include Automated payments, Payment Options, Approval Workflows, Business Credit, Spend & Expense, and 2-way sync.
+- Social proof: "Join the nearly half a million businesses transforming their financial operations with BILL" and customer quote content such as Bee Nance / Generation Teach.
+- Real scraped typography: primary **Soehne Buch** and broader **Soehne** family (`Soehne Buch`, `Soehne Halbfett`, `Soehne Dreiviertelfett`, `Soehne Fett`, `Soehne Extrafett`, etc.) plus **Chivo Mono** and Google **Instrument Serif** (scraped from CSS/WebFont).
+- Real scraped colors: primary / BILL blue `#024DBD`, primary active blue `#0242A1`, accent orange `#FF5A0A`, accent teal `#238D8C`, background warm grey `#F6F6F3`.
+
+## How to use
+
+Ask the agent to "build a site using the BILL design system" or "make a
+BILL-style Fintech 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/33-bill/SKILL.md

@@ -0,0 +1,273 @@
+---
+name: 33-bill-designer
+description: >-
+  BILL 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 BILL
+  (https://www.bill.com/): a financial operations platform for AP, AR, spend, expense, business credit, and accounting firm workflows. Use when the user asks to "build a site like BILL",
+  "use the BILL design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches BILL's look and
+  feel. Always builds the design system first, then components, then pages —
+  never random designs. Writes output to `websites/33-bill/`.
+---
+
+# BILL 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 **BILL** website (https://www.bill.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 BILL's live, scraped 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 BILL actually implements (study before building)
+
+This skill is grounded in the live BILL site. Recreate these signature patterns:
+
+- **AI-finance hero**, with the live H1 "Meet BILL. Your AI-powered financial operations platform." and metadata around AP, AR, spend, expense, budgets, payments, and business credit.
+- **Navigation observed live**: AP & AR, Spend & Expense, Business Credit, Accountants, Resources, Request a Demo, Pricing, and Login; footer/nav also exposes Product, Solutions, Resources, Blog, Company.
+- **Section order observed live**: nav → hero → feature grid → "Save time on payments with AI-enhanced AP automation" → cash-flow/credit/expense section → business and firm paths → "Customers succeed with BILL" → nearly-half-million-businesses proof → final AI-powered financial automation CTA.
+- **Real feature labels** include Automated payments, Payment Options, Approval Workflows, Business Credit, Spend & Expense, and 2-way sync.
+- **Social proof**: "Join the nearly half a million businesses transforming their financial operations with BILL" and customer quote content such as Bee Nance / Generation Teach.
+- **Visual motifs**: warm off-white financial surfaces, dark brown/black text, BILL blue CTAs, orange highlight accents, teal/success states, precise iconography, card modules, and product UI panels.
+- **Logo treatment**: blue BILL wordmark in a polished enterprise fintech header; maintain trust, clarity, and compliance over novelty.
+
+## Design system (BILL brand foundation)
+
+> Hex values below are scraped from the live site HTML/CSS where noted. Values
+> marked inferred should be treated as approximations only; prefer scraped values
+> whenever available.
+
+### Brand foundation
+
+**Colors**
+- primary / BILL blue: `#024DBD` (scraped `--_colors---color-primitives--blue-500`)
+- primary active blue: `#0242A1` (scraped `--_buttons---button-tertiary-text-active-color`)
+- accent orange: `#FF5A0A` (scraped `--_colors---color-primitives--orange-500`)
+- accent teal: `#238D8C` (scraped `--_colors---color-primitives--teal-500`)
+- background warm grey: `#F6F6F3` (scraped `--_colors---neutral-palette--grey-200`)
+- surface / white: `#FDFCFC` (scraped `--_colors---neutral-palette--grey-100`)
+- text dark: `#161412` (scraped `--_colors---neutral-palette--black`)
+- success: `#22C55E` · warning: `#F59E0B` · error: `#EF4444` (shared fallback tokens unless a scraped brand-specific value above applies)
+- neutral scale: `#FFFFFF`, `#F7F9FC`, `#E5E9F0`, `#C7CFDB`, `#8A93A6`,
+  `#4B5567`, `#1A2333`, `#0E1726`
+
+**Typography**
+- font_family: primary **Soehne Buch** and broader **Soehne** family (`Soehne Buch`, `Soehne Halbfett`, `Soehne Dreiviertelfett`, `Soehne Fett`, `Soehne Extrafett`, etc.) plus **Chivo Mono** and Google **Instrument Serif** (scraped from CSS/WebFont); fallback `Inter`, Arial, system sans.
+- 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, 500, 600, 700, 800, 900 where available in the scraped family.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
+
+**Iconography**
+- style: financial operation line icons, approval/payment arrows, account/credit glyphs, precise 20px SVG icons, and restrained product UI symbols.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: BILL product screens, AP/AR workflow cards, customer portraits, accountant/business split panels, and warm financial dashboard illustrations.
+- usage_guidelines: Use real product/customer context and live-site motifs; avoid
+  generic stock that weakens BILL's specific market position.
+
+### 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, and motion cues consistent with BILL's live site.
+
+### 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**: full fintech nav with AP & AR / Spend & Expense / Business Credit / Accountants dropdowns, mobile-menu, sidebar, breadcrumbs; include Request a Demo, Pricing, Login.
+- **buttons**: primary BILL-blue CTA, orange/accent emphasis, tertiary warm-grey button, arrow text link, icon-button.
+- **forms**: input, textarea, select, checkbox, radio, switch.
+- **feedback**: toast, alert, modal, tooltip, plus BILL-specific proof/feature cards.
+- **content**: cards, stat cards, product panels, tables, lists, accordion, tabs.
+- **marketing**: hero, feature grid, AP automation section, cash-flow/expense section, business/firm path cards, customer stories, scale proof, FAQ/pricing CTA, footer.
+
+### 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: financial operations fintech, like BILL.)
+
+## 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/33-bill/
+├── 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 BILL's scraped design tokens.
+
+## Output — write to `websites/33-bill/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/33-bill/
+├── index.html                 # full BILL-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 BILL (Soehne typography, warm greys, BILL blue CTAs, orange/teal accents, AI financial ops and customer trust proof).
+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 BILL's live section order: nav → hero → feature grid → AP automation → cash-flow/credit/expense → business/accountant paths → customer success → half-million proof → bottom CTA → footer.
+- Output written to `websites/33-bill/` 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/34-localyzer/README.md

@@ -0,0 +1,44 @@
+# Localyzer Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Localyzer](https://www.localyzer.io/) website — SaaS — local online marketing automation platform for multi-location brands.
+
+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 Localyzer's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/34-localyzer/`:
+
+- `index.html` — full Localyzer-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 Localyzer patterns it recreates
+
+- Bold local-ads hero, with the live H1 "Supercharge Your Local Ads" and metadata about streamlining local online marketing across Google, Facebook, Instagram, YouTube, and more.
+- Navigation observed live: Solutions, About, Blog, Careers, Contact, language switcher (en/De), and "Book a Demo".
+- Section order observed live: nav → book-demo modal → hero/stat cards → created/generated/served metrics → trusted-by leading businesses → benefit cards → "BUILT FOR Marketing Impact" → customer testimonials → latest insights/blog grid → footer.
+- Real metrics: "created over 80.000 local campaigns", "generated 2,5 billion local impressions", "served over 300.000 ads on multiple channels", plus small UI stat cards like CTR 3,59% and CLICKS 527.
+- Real benefit labels include Consistent Branding, Automation & Precision, Scalable Solutions, Expand your reach, Maximize ROI, Save Time, channel FLEXIBILITY, and Dedicated Support.
+- Real scraped typography: primary **Open Sauce / Open Sauce One** and display **National 2 Condensed** (preloaded and scraped `@font-face`).
+- Real scraped colors: primary / jungle `#003F3A`, primary hover `#00625A`, accent / turquoise `#00D9CC`, accent / lemon `#FAFA45`, accent / peach `#FF8B6A`.
+
+## How to use
+
+Ask the agent to "build a site using the Localyzer design system" or "make a
+Localyzer-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.