spirewise 1.6.0 → 1.6.3

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

@@ -0,0 +1,272 @@
+---
+name: 02-kajabi-designer
+description: >-
+  Kajabi 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 real design system of Kajabi
+  (https://www.kajabi.com/): SaaS operating system for creators, experts, courses, coaching, memberships, newsletters, podcasts, and digital downloads. Use when the user asks to "build a site like Kajabi",
+  "use the Kajabi design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches Kajabi's live look
+  and feel. Always builds the design system first, then components, then pages —
+  never random designs. Writes output to `websites/02-kajabi/`.
+---
+
+# Kajabi 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 **Kajabi** website (https://www.kajabi.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 Kajabi's expert-led, all-in-one creator-business 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 Kajabi actually implements (study before building)
+
+This skill is grounded in the live Kajabi site. Recreate these signature patterns:
+
+- **Expert-business hero** with the scraped H1 "The all-in-one platform that turns what you know into what you earn" and supporting title "Turn What You Know Into What You’re Known For."
+- **Nav and CTA flow** centers Product, product dropdowns, live Q&A prompts, and repeated CTAs including "Start Free Trial", "Save Your Spot", and "See All Products."
+- **All-in-one platform story** uses the scraped section line "All-in-one. Because six separate tools isn't a business plan." to contrast fragmented tools with a unified system.
+- **Product ecosystem cards** for Courses, Coaching, Communities, Memberships, Newsletters, Downloads, and Podcasts, using warm editorial cards rather than generic SaaS tiles.
+- **Guided proof/demo flow** includes "See exactly how it works", "Bring your entire business into one unified system", "All-in-one that actually works", "Sell with confidence", and "Funnels that convert."
+- **Real testimonial engine** includes scraped reviews from Justin Welsh, Brittney Carmichael, and Carrie Lupoli plus the quote about moving from Zapier cobbling to Kajabi "under one roof."
+- **Visual motifs**: warm off-white surfaces, black/dark CTA buttons, refined editorial sans typography, muted gold/amber/green/blue/purple accents, rounded product tiles, and subtle page-fade motion.
+
+## Design system (Kajabi brand foundation)
+
+> Hex values below are scraped from the live HTML/CSS when available. Values marked
+> **(inferred)** were inferred from visible motifs or non-inline CSS references when
+> exact inline tokens were not exposed by the live scrape.
+
+### Brand foundation
+
+**Colors**
+- primary (CTA black / neutral-950, scraped): `#0A0A0A`; hover neutral-900 `#1F1F1E`
+- accent green dark (scraped): `#405B50`; green light `#CBD7CC`
+- accent gold dark (scraped): `#D6A151`; gold light `#EFD3A9`
+- accent amber dark (scraped): `#733725`; amber light `#AD715C`
+- accent blue dark/light (scraped): `#3A6278`, `#9FC2CC`
+- accent purple dark/light (scraped): `#52405B`, `#D7CBD5`
+- background / surface (scraped): `#FDFDFC`, `#F8F8F6`, `#F1F0EF`, `#FFFFFF`
+- text / neutral scale (scraped): `#0A0A0A`, `#535250`, `#949189`, `#BCB9AE`, `#D4D3CE`, `#E0DEDC`, `#E9E8E7`
+
+**Typography**
+- font_family: primary **Haffer** (scraped CSS variable `--_typography---font--primary-family`); accent/editorial **Instrument** and monospace **Geist Mono** also appear in scraped CSS; system fallback
+  `-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif`.
+- font_scale (rem): H1 3.75 / H2 2.5 / H3 2.0 / H4 1.5 / H5 1.25 / body 1.0 /
+  caption 0.875 / eyebrow 0.75 (uppercase, letter-spaced).
+- font_weights: 400, 500, 600, 700.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.55–1.65 (body).
+
+**Iconography**
+- style: minimal product icons and arrow glyphs, with refined editorial UI cards and understated line treatments.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: creator portraits/testimonials, product ecosystem cards, warm abstract panels, and screenshots that show all-in-one business workflows.
+- usage_guidelines: Pair real scraped content patterns with purposeful product,
+  customer, or abstract visuals; avoid generic stock that weakens the brand 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, xl 24, pill 999.
+- **shadows**: sm `0 1px 2px rgba(14,23,38,.06)`, card
+  `0 12px 30px rgba(14,23,38,.12)`, lg `0 24px 60px rgba(14,23,38,.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 Kajabi-style 200ms page fade-in, smooth card reveals, and subtle product-card motion.
+
+### 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, mobile-menu (hamburger → full-screen or drawer), sidebar,
+  breadcrumbs. Match Kajabi's nav labels: Product, live Q&A / Save Your Spot, Start Free Trial, See All Products.
+- **buttons**: primary (dark filled pill / rounded button using scraped `#0A0A0A`), secondary, tertiary/text link, icon-button.
+- **forms**: input, textarea, select, checkbox, radio, switch.
+- **feedback**: toast, alert, modal, tooltip.
+- **content**: cards, stat cards, quote/testimonial cards, tables, lists, accordion, tabs.
+- **marketing**: hero, features, pricing, faq, cta, footer. Include product ecosystem cards, testimonial carousel, all-in-one comparison blocks, live Q&A CTA, and bottom trial CTA.
+
+### 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 operating system for creators, experts, courses, coaching, memberships, newsletters, podcasts, and digital downloads.)
+
+## 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/02-kajabi/
+├── 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 Kajabi's scraped design tokens.
+
+## Output — write to `websites/02-kajabi/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/02-kajabi/
+├── index.html                 # full Kajabi-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 Kajabi's
+   live look (warm off-white surfaces, dark CTA, creator-economy product cards, muted accent palette).
+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 Kajabi's section order: nav → expert hero → all-in-one problem/solution → product ecosystem → demo/how-it-works → selling/funnels features → expert testimonials → live Q&A / bottom CTA → footer.
+- Output written to `websites/02-kajabi/` 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/03-lattice/README.md

@@ -0,0 +1,42 @@
+# Lattice Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Lattice](https://lattice.com/) website — SaaS HR, people management, performance, engagement, goals, compensation, and AI agent platform.
+
+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 Lattice's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/03-lattice/`:
+
+- `index.html` — full Lattice-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 Lattice patterns it recreates
+
+- Hero: "High-performing teams are built here" with Take a tour / Request a demo CTAs.
+- Platform grid for Performance, Goals & OKRs, Engagement, Grow, Compensation, and AI Agent.
+- People-first testimonial wall with concrete stats like 100%, 30h, 2,000 hours, 27%, 3.5x, and 20%.
+- Matter + Bogart typography, sand backgrounds, green underline links, soft gradients, and card shadows.
+- Integration logo wall, G2 badges, and bottom CTA "Your people are your business."
+
+## How to use
+
+Ask the agent to "build a site using the Lattice design system" or "make a
+Lattice-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.

package/skills/website-design-skills/03-lattice/SKILL.md

@@ -0,0 +1,271 @@
+---
+name: 03-lattice-designer
+description: >-
+  Lattice 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 real design system of Lattice
+  (https://lattice.com/): SaaS HR, people management, performance, engagement, goals, compensation, and AI agent platform. Use when the user asks to "build a site like Lattice",
+  "use the Lattice design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches Lattice's live look
+  and feel. Always builds the design system first, then components, then pages —
+  never random designs. Writes output to `websites/03-lattice/`.
+---
+
+# Lattice 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 **Lattice** website (https://lattice.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 Lattice's people-first, performance-management SaaS 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 Lattice actually implements (study before building)
+
+This skill is grounded in the live Lattice site. Recreate these signature patterns:
+
+- **Announcement bars and enterprise nav** start with scraped messages "Everything we announced at Lattiverse 2026" and "Lattiverse is taking off..." plus nav labels Why Lattice, Customers, Resources, Pricing, Log in, Request a demo.
+- **Hero promise** uses the scraped H1 "High-performing teams are built here" with subhead "Lattice is your team’s daily destination for work..." and CTA "Take a tour."
+- **Platform overview grid** links Performance, Goals & OKRs, Engagement, Grow, Compensation, and AI Agent with UI screenshots and arrow-link cards.
+- **AI and habits sections**: "Unblock work and unlock potential with your personal AI Agent" followed by "Build high performance through everyday habits" with 1:1s, Updates, Feedback, and Q&A Boards.
+- **Customer proof wall**: "Trusted by top performers" with real customers GoCardless, Weave, Huge, BARK, Vantage West, LiveRamp, USAirtours, and UNREAL Snacks.
+- **Stat-driven testimonials** include scraped stats such as 100% review participation, 30h saved per engagement survey, 2,000 hours saved, 27% attrition reduction, 3.5x higher check-in completion, and 20% sales increase.
+- **G2 and integrations proof**: 3,300+ 5-star G2 reviews, HR/productivity integration logo grid, and bottom CTA "Your people are your business" with "Request a demo" and "Take a free tour."
+
+## Design system (Lattice brand foundation)
+
+> Hex values below are scraped from the live HTML/CSS when available. Values marked
+> **(inferred)** were inferred from visible motifs or non-inline CSS references when
+> exact inline tokens were not exposed by the live scrape.
+
+### Brand foundation
+
+**Colors**
+- primary (green CTA / underline, scraped): `#6BB85F`; hover/soft green `#A9EBA9`
+- deep text / black (scraped): `#001F1F`; grey text `#455252`, `#6A7878`, `#889494`
+- background sand (scraped): `#FAF9F7`, `#F7F6F2`, `#EBE7E1`; sand accent `#D4CEC4`
+- green scale (scraped): `#EAFCE9`, `#CDFACE`, `#A9EBA9`, `#6BB85F`, `#4A8F3F`, `#366625`, `#2A4E1C`
+- blue/cyan accents (scraped): `#E4F7F9`, `#BFF1F5`, `#67E2EB`, `#0794B8`, `#05537A`, `#003152`
+- purple/pink accents (scraped): `#E1E1FA`, `#7070FF`, `#4533B8`, `#FDE5FF`, `#E063C7`, `#B8337A`
+- success `#22C55E` · warning `#F59E0B` · error `#EF4444`
+
+**Typography**
+- font_family: primary **Matter** (scraped CSS variable `--font--matter`); display/editorial **Bogart** and icon font **Latticon** also appear in scraped CSS; system fallback
+  `-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif`.
+- font_scale (rem): H1 3.75 / H2 2.5 / H3 2.0 / H4 1.5 / H5 1.25 / body 1.0 /
+  caption 0.875 / eyebrow 0.75 (uppercase, letter-spaced).
+- font_weights: 400, 500, 600, 700.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.55–1.65 (body).
+
+**Iconography**
+- style: rounded HR/product iconography, Latticon quote glyphs, arrow links, and large integration logos.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: real product UI screenshots, people/customer portraits, G2 badges, and dense integration logo grids.
+- usage_guidelines: Pair real scraped content patterns with purposeful product,
+  customer, or abstract visuals; avoid generic stock that weakens the brand 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, xl 24, pill 999.
+- **shadows**: sm `0 1px 2px rgba(14,23,38,.06)`, card
+  `0 12px 30px rgba(14,23,38,.12)`, lg `0 24px 60px rgba(14,23,38,.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 Lattice-style intro reveals, soft card motion, gradient panels, and marquee-like integration grids.
+
+### 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, mobile-menu (hamburger → full-screen or drawer), sidebar,
+  breadcrumbs. Match Lattice's nav labels: Why Lattice, Customers, Resources, Pricing, Log in, Request a demo.
+- **buttons**: primary (rounded green/dark high-contrast CTA with arrow-link secondary buttons), secondary, tertiary/text link, icon-button.
+- **forms**: input, textarea, select, checkbox, radio, switch.
+- **feedback**: toast, alert, modal, tooltip.
+- **content**: cards, stat cards, quote/testimonial cards, tables, lists, accordion, tabs.
+- **marketing**: hero, features, pricing, faq, cta, footer. Include platform grid, AI Agent feature, habits cards, customer-story carousel, integration wall, G2 proof, and demo CTA.
+
+### 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 HR, people management, performance, engagement, goals, compensation, and AI agent platform.)
+
+## 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/03-lattice/
+├── 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 Lattice's scraped design tokens.
+
+## Output — write to `websites/03-lattice/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/03-lattice/
+├── index.html                 # full Lattice-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 Lattice's
+   live look (sand gradients, green link lines, Matter/Bogart type contrast, testimonial stats).
+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 Lattice's section order: announcement bar → nav → hero → platform overview grid → AI Agent → habits feature cards → customer stories/testimonials → integrations → resources/G2 proof → bottom CTA → footer.
+- Output written to `websites/03-lattice/` 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/04-petal/README.md

@@ -0,0 +1,42 @@
+# Petal Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Petal](https://www.petalcard.com/) website — fintech consumer credit-card and credit-building 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 Petal's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/04-petal/`:
+
+- `index.html` — full Petal-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 Petal patterns it recreates
+
+- Hero: "Making credit history." + "Welcome to credit, no experience necessary."
+- Animated Petal 1 / Petal 2 card cluster and Cards dropdown for Petal 1 Family / Petal 2.
+- Transparent financial microcopy: apply once, APR range, WebBank issuance, no credit check required.
+- Hanken Grotesk typography, Petal blue CTA, green credit-building accents, clean white/gray sections.
+- Feature education sections for approval odds, credit score tracking, cash back, account tabs, and testimonials.
+
+## How to use
+
+Ask the agent to "build a site using the Petal design system" or "make a
+Petal-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.