spirewise 1.6.2 → 1.7.0

package/skills/website-design-skills/28-zentail/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: 28-zentail-designer
+description: >-
+  Zentail 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 live design system of Zentail
+  (https://www.zentail.com/): SaaS — marketplace listing and multichannel ecommerce software. Use when the user asks to "build a site like Zentail",
+  "use the Zentail design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches Zentail's real
+  look and feel. Always builds the design system first, then components, then
+  pages — never random designs. Writes output to `websites/28-zentail/`.
+---
+
+# Zentail 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 **Zentail** website (https://www.zentail.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 Zentail's teal ecommerce-operations, stats-driven 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 Zentail actually implements (study before building)
+
+This skill is grounded in the live Zentail site. Recreate these signature patterns:
+
+- **Teal floating hero panel**: H1 "More of your catalog live. More of your business in sync." with subhead about launching faster, publishing accurately, and reducing manual marketplace work.
+- **Primary CTA language**: header/mobile "Book a demo" and hero button "Let's Talk"; login link points to app.zentail.com.
+- **Header navigation**: Integrations dropdown (Walmart, Target Plus, Amazon, 3rd Party Integrations), Platform dropdown, Pricing, Resources, Login, Book a demo.
+- **Stats strip immediately after hero**: "99% publish rate", "3x faster launches", "18x faster time to list", "100+ hours saved monthly", "+24% profitability per SKU".
+- **Marketplace logo grid**: "Focused on the marketplaces that drive results" with Amazon, Walmart, Target, eBay, Shopify, BigCommerce, Newegg logos.
+- **Benefit-card section**: "Why high growth teams choose Zentail" with No templates/No mapping, Stay compliant automatically, Built for speed and simplicity, Real people/Real support.
+- **Testimonials**: "What sellers are saying" slider with customer quote bubbles and brand/customer photos.
+
+## Design system (Zentail brand foundation)
+
+> Values below are from live-scraped HTML/CSS unless marked **(inferred)**.
+> Treat scraped values as locked defaults; if the user provides exact brand
+> hex/CSS, override these and note the source.
+
+### Brand foundation
+
+**Colors**
+- primary dark teal (scraped): `#013035`; hover/nav teal `#0E5361`; secondary teal `#016E79`
+- accent cyan (scraped): `#00BED0`, `#00BDCF`, lighter `#4BD2E1`, soft `#D0F3F7`
+- accent orange/yellow (scraped): `#FFA170`, `#FC856B`, `#FDBF38`
+- background / surface (scraped): `#FFFFFF`, `#FAFAFA`, `#F8F8F8`, `#E6E6E6`
+- text / dark (scraped): `#191A23`, `#6E6E6E`, `#A3A3A7`
+- overlay (scraped): `rgba(1,48,53,.85)` / mobile `rgb(1,48,53)`
+
+**Typography**
+- font_family: scraped **Open Sans**, **Roboto**, **Roboto Condensed**, and **Roboto Slab** via WebFont.load; CSS primarily uses Roboto for body/UI; 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, 500, 600, 700, 800.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
+
+**Iconography**
+- style: simple ecommerce/operations line SVGs (cart, warehouse, chart, list, sync, support headset) in teal/cyan.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: marketplace logos, UI illustration SVGs, floating stats cards, testimonial portraits/logos.
+- usage_guidelines: Use teal hero containers, cyan/orange gradients, visible operational stats, and marketplace logos to make multichannel value concrete.
+
+### Tokens (emit as CSS variables in `:root`)
+
+- **colors**: map every brand color above to `--color-*` tokens, preserving
+  scraped names where available.
+- **spacing** (px → tokens): `4,8,12,16,20,24,32,40,48,64,80,96`.
+- **radius**: sm 6, md 10, lg 16, pill 999 plus large floating panel radii.
+- **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-in floating SVG UI cards, testimonial slider, dropdown chevron rotation, button hover lift.
+
+### 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**: ecommerce mega-dropdown navbar, mobile-menu, sidebar, breadcrumbs.
+- - **buttons**: dark-teal primary, cyan/orange accent, secondary outline, tertiary arrow link, icon-button.
+- - **forms**: demo modal/contact form, input, textarea, select, checkbox, radio, switch.
+- - **feedback**: toast, alert, modal, tooltip, Calendly/demo modal.
+- - **content**: stats cards, marketplace logo grid, benefit cards, testimonial slider, tables, lists, accordion, tabs.
+- - **marketing**: teal hero, stats strip, marketplace logos, feature sections, reviews, pricing, faq, 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: SaaS — marketplace listing and multichannel ecommerce software.)
+
+## 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/28-zentail/
+├── 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 Zentail's scraped design tokens.
+
+## Output — write to `websites/28-zentail/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/28-zentail/
+├── index.html                 # full Zentail-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 Zentail's
+   look (dark teal hero, #00BED0 cyan accents, orange highlights, Roboto/Open Sans typography, stats strip, marketplace logo grid, customer slider).
+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 Zentail's live section order: nav → teal hero (+ Let’s Talk) → stats strip → marketplace-launch problem section → marketplace logo grid → high-growth benefits → feature sections → testimonials → CTA → footer.
+- Output written to `websites/28-zentail/` 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/29-zams/README.md

@@ -0,0 +1,42 @@
+# Zams Designer
+
+A **Website Design System Architect** skill modeled on the live
+[Zams](https://zams.com/) website — AI startup — AI workers for revenue teams.
+
+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 Zams's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/29-zams/`:
+
+- `index.html` — full Zams-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 Zams patterns it recreates
+
+- Hero says "AI Workers for Revenue Teams" with "get early access" and "explore AI workers" CTAs.
+- Navigation includes Integrations, Pricing, Blog, Sign In/log in, and get early access.
+- Trusted-by logo strip followed by "Meet the AI Workers" tabs: Evan, Atlas, Nico, Nova, Iris.
+- Purple #7451F2, lavender #E4DDFF, deep purple #1C161D, DM Sans + Lustria + Martian Mono.
+- Mascot/product art, button text slide hover, mobile logo marquee, coming-soon tags.
+
+## How to use
+
+Ask the agent to "build a site using the Zams design system" or "make a
+Zams-style AI revenue-worker 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/29-zams/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: 29-zams-designer
+description: >-
+  Zams 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 live design system of Zams
+  (https://zams.com/): AI startup — AI workers for revenue teams. Use when the user asks to "build a site like Zams",
+  "use the Zams design system", or wants a full design system (tokens,
+  components, pages) in vanilla HTML/CSS/JS that matches Zams's real
+  look and feel. Always builds the design system first, then components, then
+  pages — never random designs. Writes output to `websites/29-zams/`.
+---
+
+# Zams 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 **Zams** website (https://zams.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 Zams's playful revenue-automation, worker-card 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 Zams actually implements (study before building)
+
+This skill is grounded in the live Zams site. Recreate these signature patterns:
+
+- **Revenue-worker hero**: H1 "AI Workers for Revenue Teams" and subhead "Purpose-built, always-on AI workers that eliminate manual work, save you hours and reduce the cost of growing revenue."
+- **Dual hero CTAs**: primary "get early access" and secondary "explore AI workers".
+- **Header navigation**: Integrations, Pricing, Blog, Sign In/log in, and repeated "get early access" CTA.
+- **Trusted-by logo strip** directly below hero, with scrolling behavior on mobile.
+- **AI worker tabs**: "Meet the AI Workers" with Evan (Meeting Prep), Atlas (CRM Manager), Nico (Account Monitoring), Nova (Lookalike Discovery), Iris (Relationship Intelligence), with coming-soon tags.
+- **Worker detail copy**: Evan headline "Meeting Intelligence that makes every rep close like your top 10%" and Atlas headline "Zero manual CRM work. Ever again."
+- **Visual motif**: mascot/character hero assets, product screenshots, duplicated button text sliding on hover, thin section dividers.
+
+## Design system (Zams brand foundation)
+
+> Values below are from live-scraped HTML/CSS unless marked **(inferred)**.
+> Treat scraped values as locked defaults; if the user provides exact brand
+> hex/CSS, override these and note the source.
+
+### Brand foundation
+
+**Colors**
+- primary purple / CTA (scraped `--color--purple`): `#7451F2`; light purple `#B9A8F9`
+- background / surface (scraped): white `#FFFFFF`, light panel `#F6F6F6`, lavender panel `#E4DDFF`
+- text / dark (scraped): black `#000000`, deep purple `#1C161D`, grey-dark `#272727`, grey `#4F4F4F`
+- muted text / lines (scraped): `#5D5D5D`, `#766C77`, `#9E9E9E`, border `#C7C7C7`, line `#E0E0E0`
+- accessibility utility (scraped): dodger blue `#1378D1`, dark grey `#9B9B9B`
+- hover/secondary purple (scraped): `#5952A1`
+
+**Typography**
+- font_family: scraped **DM Sans** for base UI, **Lustria** for headings, and **Martian Mono** for labels/secondary text; 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, 500, 600, 700.
+- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
+
+**Iconography**
+- style: minimal line icons and mascot illustrations, mono labels, arrows, coming-soon pills.
+- sizes: 16, 20, 24, 32, 48.
+
+**Imagery**
+- style_rules: AI worker screenshots, mascot art, trusted-by logos, tabbed worker product cards.
+- usage_guidelines: Use playful purple CTAs and lavender panels, but keep layout B2B-clean with worker personas and tabbed product storytelling.
+
+### Tokens (emit as CSS variables in `:root`)
+
+- **colors**: map every brand color above to `--color-*` tokens, preserving
+  scraped names where available.
+- **spacing** (px → tokens): `4,8,12,16,20,24,32,40,48,64,80,96`.
+- **radius**: sm 6, md 10, lg 16, pill 999 with pill tags and rounded worker cards.
+- **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**: button text vertical slide on hover, mobile logo marquee, tab crossfade, section dividers, fade-up on scroll.
+
+### 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**: compact navbar, mobile-menu, sidebar, breadcrumbs.
+- - **buttons**: purple primary, white/dark-border secondary, mono label tertiary, icon-button.
+- - **forms**: early-access/pricing forms, input, textarea, select, checkbox, radio, switch.
+- - **feedback**: toast, alert, modal, tooltip, coming-soon tag.
+- - **content**: AI worker tabs/cards, trusted-by logo strip, persona cards, tables, lists, accordion, tabs.
+- - **marketing**: hero, logo strip, AI workers tabs, integrations, pricing, faq, 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: AI startup — AI workers for revenue teams.)
+
+## 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/29-zams/
+├── 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 Zams's scraped design tokens.
+
+## Output — write to `websites/29-zams/`
+
+Create the folder if missing and produce all deliverables:
+
+```
+websites/29-zams/
+├── index.html                 # full Zams-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 Zams's
+   look (DM Sans/Lustria/Martian Mono typography, #7451F2 purple CTAs, lavender panels, mascot assets, worker tabs, button text slide).
+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 Zams's live section order: nav → hero (+ dual CTAs + mascot/product art) → trusted-by logos → Meet the AI Workers tabs → worker details/integrations → pricing/FAQ → CTA → footer.
+- Output written to `websites/29-zams/` 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/30-user-interviews/README.md

@@ -0,0 +1,44 @@
+# User Interviews Designer
+
+A **Website Design System Architect** skill modeled on the live
+[User Interviews](https://www.userinterviews.com/) website — SaaS — user research recruiting and participant management 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 User Interviews's look and feel.
+
+## What it produces
+
+Writes a complete, token-driven site to `websites/30-user-interviews/`:
+
+- `index.html` — full User Interviews-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 User Interviews patterns it recreates
+
+- Direct research-recruiting hero, with the live H1 "We connect researchers and participants" and subcopy from metadata about recruiting from an audience of 6 million vetted consumers and professionals or bringing your own audience.
+- Navigation built around research workflows: Platform, Features, Solutions, Resources, Customers/Pricing-style links, plus CTAs for logging in and booking/demo paths; dropdowns surface Recruit, Research Hub, Integrations & APIs, MCP, AI Assistant, Audience targeting, Insights, Scheduling, Incentives, Quotas, Reports, and more.
+- Section order observed live: nav → hero → "Researchers at these companies gain insights faster" logo proof → "The research recruiting and insights platform" → feature cards such as "Find qualified participants, fast" and "Talk to your users without friction" → "Start recruiting" → participant-side prompt → industry-leader proof → fast bottom CTA.
+- Real CTAs and conversion language include "Book a demo", "Start recruiting", participant-side earning prompts, and speed copy like "Talk to users today. Seriously, we're fast."
+- Social proof is quantified and trust-led: the site references a 6 million vetted audience, enterprise research teams, company-logo proof, and "Industry leaders rely on User Interviews."
+- Real scraped typography: primary **Futura font / Futura book font** with supporting **Montserrat**, **Lato**, **Inter**, **Public Sans**, **Poppins**, **Bricolage Grotesque**, **IBM Plex Mono**, **Space Mono**, and custom display accents **P 22 Mackinac italic**, **Marvinvisions**, **Londrinasolid**, **EdCelandine**, **Paytone**, **Courier Prime** (all scraped from WebFont/@font-face declarations).
+- Real scraped colors: primary / CTA teal `#0E4749`, primary hover teal `#1C5D5F`, accent emerald `#177863`, accent berry `#7D3659`, background warm neutral `#F8F4F2`.
+
+## How to use
+
+Ask the agent to "build a site using the User Interviews design system" or "make a
+User Interviews-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.