spirewise 1.7.1 → 1.8.0

package/skills/website-design-skills/25-modyfi/SKILL.md

@@ -1,269 +0,0 @@
----
-name: 25-modyfi-designer
-description: >-
-  Modyfi 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 Modyfi
-  (https://www.modyfi.com/): retired AI creative design platform — live official URL currently returns 404. Use when the user asks to "build a site like Modyfi",
-  "use the Modyfi design system", or wants a full design system (tokens,
-  components, pages) in vanilla HTML/CSS/JS that matches Modyfi's real
-  look and feel. Always builds the design system first, then components, then
-  pages — never random designs. Writes output to `websites/25-modyfi/`.
----
-
-# Modyfi 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 **Modyfi** website (https://www.modyfi.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 Modyfi's honest unavailable-site, archive-aware 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 Modyfi actually implements (study before building)
-
-This skill is grounded in the live Modyfi site. Recreate these signature patterns:
-
-- **Live scrape result is the key fact**: `https://www.modyfi.com/` currently returns HTTP 404, so no live hero, nav, footer, CTA, CSS, fonts, or colors could be verified.
-- **Alternate domain check**: `https://www.modyfi.ai/` redirects client-side to `/lander`, which redirects to a parked GoDaddy sale page; it is not a usable Modyfi product site.
-- **Design rule**: do not invent a Modyfi homepage from memory; generated sites must visibly state when they are using placeholder/archive-awaiting tokens.
-- **Preserved product context from the existing skill only as non-scraped context**: Modyfi was an AI creative/design platform and the old skill referenced "Modyfi is joining Figma!"; treat this as archival context, not live design evidence.
-- **If the user supplies an archived capture**, rebuild around verified hero text, screenshots, CTAs, fonts, and CSS colors from that capture, then remove unavailable warnings.
-- **Until then**, produce a neutral, clearly labeled archive/transition landing page rather than a false live Modyfi clone.
-
-## Design system (Modyfi 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: no live hex available; placeholder ink `#111111` **(inferred)**
-- accent: no live hex available; placeholder violet `#7C3AED` **(inferred)**
-- background / surface: no live hex available; placeholder off-white `#FAFAFA` and dark `#0E0E10` **(inferred)**
-- text: no live hex available; placeholder `#111111`, `#6B7280`, `#FFFFFF` **(inferred)**
-- status color: use warning `#F59E0B` to label unavailable/archival surfaces **(inferred)**
-- Do **not** present these placeholders as Modyfi brand colors; replace with real archived/source CSS when provided.
-
-**Typography**
-- font_family: **not available from live scrape** — `https://www.modyfi.com/` returned 404 and `modyfi.ai` is parked; use system fallback only unless the user supplies archived CSS **(inferred)**; 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: 400, 500, 600, 700 **(inferred defaults only)**.
-- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
-
-**Iconography**
-- style: minimal line icons only; add an archive/status badge when using unavailable-site placeholders.
-- sizes: 16, 20, 24, 32, 48.
-
-**Imagery**
-- style_rules: no live imagery available; use neutral product placeholders or user-supplied archived screenshots only.
-- usage_guidelines: Never claim placeholder colors/fonts are scraped; label inferred tokens directly in STYLE-GUIDE.md and design-tokens.json.
-
-### 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 **(inferred)**.
-- **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**: subtle fade-up and button hover only **(inferred)**; avoid claiming Modyfi-specific motion without source evidence.
-
-### 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**: simple navbar, mobile-menu, sidebar, breadcrumbs, with optional archive/unavailable banner.
-- - **buttons**: primary placeholder CTA, secondary outline, tertiary text link, icon-button.
-- - **forms**: input, textarea, select, checkbox, radio, switch.
-- - **feedback**: toast, alert, modal, tooltip, unavailable-source notice.
-- - **content**: archive cards, status cards, tables, lists, accordion, tabs.
-- - **marketing**: hero, source-status strip, features, pricing, faq, cta, footer; replace placeholders if real Modyfi source is supplied.
-
-### 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: retired AI creative design platform — live official URL currently returns 404.)
-
-## 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/25-modyfi/
-├── 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 Modyfi's scraped design tokens.
-
-## Output — write to `websites/25-modyfi/`
-
-Create the folder if missing and produce all deliverables:
-
-```
-websites/25-modyfi/
-├── index.html                 # full Modyfi-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 Modyfi's
-   look (all inferred tokens clearly labeled, no fabricated live hero/nav/footer, archive-status messaging, accessible neutral layout).
-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 Modyfi's live section order: source-status banner → nav → archive-aware hero → placeholder/source-needed proof → feature cards → CTA requesting verified assets → footer.
-- Output written to `websites/25-modyfi/` 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/26-altitude/README.md

@@ -1,42 +0,0 @@
-# Altitude Designer
-
-A **Website Design System Architect** skill modeled on the live
-[Altitude](https://www.altitude.so/) website — AI startup — AI worksuite for finance 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 Altitude's look and feel.
-
-## What it produces
-
-Writes a complete, token-driven site to `websites/26-altitude/`:
-
-- `index.html` — full Altitude-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 Altitude patterns it recreates
-
-- Dark fixed header with Platform, Security, Blog, Login.
-- Hero says "The AI Worksuite for Finance." with "Request a Demo" CTA.
-- Animated mountain-line SVG is the signature motif.
-- Sherpa product section and Office-like demo file "SpaceX_IPO_Investor_Deck.pptx".
-- Inter + Libre Baskerville + Fira Code typography with OKLCH CSS tokens converted to labeled inferred hex approximations.
-
-## How to use
-
-Ask the agent to "build a site using the Altitude design system" or "make a
-Altitude-style AI finance worksuite 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/26-altitude/SKILL.md

@@ -1,270 +0,0 @@
----
-name: 26-altitude-designer
-description: >-
-  Altitude 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 Altitude
-  (https://www.altitude.so/): AI startup — AI worksuite for finance teams. Use when the user asks to "build a site like Altitude",
-  "use the Altitude design system", or wants a full design system (tokens,
-  components, pages) in vanilla HTML/CSS/JS that matches Altitude's real
-  look and feel. Always builds the design system first, then components, then
-  pages — never random designs. Writes output to `websites/26-altitude/`.
----
-
-# Altitude 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 **Altitude** website (https://www.altitude.so/).
-
-**Primary goal:** Ensure every generated website follows a scalable design
-system, accessibility standards, responsive principles, clean architecture, and
-modern UI/UX best practices — recreating Altitude's dark, finance-grade, analyst-workbench 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 Altitude actually implements (study before building)
-
-This skill is grounded in the live Altitude site. Recreate these signature patterns:
-
-- **Fixed dark header** with Altitude mountain logo and compact nav: Platform, Security, Blog, Login.
-- **Finance-focused hero**: H1 "The AI Worksuite for Finance.", subhead "World-class AI that helps bankers and investors win more.", CTA "Request a Demo".
-- **Signature motif**: decorative animated mountain-line SVG revealing behind the hero.
-- **Product section** starts with "Sherpa — Your AI Analyst" and copy "Analyze markets, perform diligence, build models, and design decks at the speed of thought."
-- **Interactive demo UI**: simulated PowerPoint/Office workspace with file name "SpaceX_IPO_Investor_Deck.pptx", slide thumbnails, toolbar labels, shadows, and draggable-window feel.
-- **Native-office proof**: content references Excel, PowerPoint, Word deliverables and finance/investment workflows.
-- **Dark Tailwind-like token system**: CSS variables are OKLCH-based; when emitting hex, label approximations inferred from scraped OKLCH.
-
-## Design system (Altitude 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 / CTA foreground (scraped dark token `--primary: oklch(98% 0 67.8)`; hex approx **inferred**): `#FAFAF7` on dark
-- primary foreground / dark base (scraped `--primary-foreground` / `--background: oklch(21% 0 0)`; hex approx **inferred**): `#222222`
-- background / surface (scraped dark tokens; hex approx **inferred**): background `#222222`, card `#282828`, muted `#303030`, border `#353535`
-- accent / ring (scraped `--ring: oklch(92% 0 84.56)`; hex approx **inferred**): `#E9E7E0`; chart blue token (scraped `--chart-1: oklch(69% .13 252.59)`; hex approx **inferred**): `#5FA3E8`
-- product/demo colors scraped from UI mockups: PowerPoint orange `#D33922`, Office blue `#1A365D`, `#2B5797`, Mac dots `#FF5F57`, `#FEBC2E`, `#28C840`
-- text (scraped dark tokens; hex approx **inferred**): foreground `#F2F0EA`, muted `#B7B4AA`
-
-**Typography**
-- font_family: scraped **Inter** for UI, **Libre Baskerville** for serif display headings, and **Fira Code** for code/terminal accents; 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: 400, 500, 600, 700.
-- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
-
-**Iconography**
-- style: thin Tabler-style line icons, mountain logo mark, Office file icons, chevrons/arrows.
-- sizes: 16, 20, 24, 32, 48.
-
-**Imagery**
-- style_rules: dark finance workbench UI, PowerPoint/Excel/Word mockups, mountain-line illustration, diligence/deck screenshots.
-- usage_guidelines: Keep the site calm, dark, and high-trust; pair serif display headlines with precise UI mockups and avoid playful SaaS gradients.
-
-### 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 rounded-lg/rounded-xl UI windows.
-- **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**: mountain-line reveal, fade-up hero copy, subtle active-scale button motion, scroll-reveal product panels.
-
-### 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**: fixed dark navbar, mobile-menu, sidebar, breadcrumbs.
-- - **buttons**: light-on-dark primary, muted ghost secondary, tertiary text-arrow, icon-button.
-- - **forms**: demo/contact form, input, textarea, select, checkbox, radio, switch.
-- - **feedback**: toast, alert, modal, tooltip, draggable/demo window.
-- - **content**: analyst cards, Office-preview cards, tables, lists, accordion, tabs.
-- - **marketing**: finance hero, Sherpa product demo, security proof, 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 worksuite for finance 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/26-altitude/
-├── 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 Altitude's scraped design tokens.
-
-## Output — write to `websites/26-altitude/`
-
-Create the folder if missing and produce all deliverables:
-
-```
-websites/26-altitude/
-├── index.html                 # full Altitude-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 Altitude's
-   look (dark OKLCH-derived tokens, Libre Baskerville display, Inter UI, mountain-line motif, Office-style workbench demo, restrained finance tone).
-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 Altitude's live section order: fixed nav → dark hero (+ mountain line + Request a Demo) → Sherpa product/demo section → workflow/security proof → FAQ → CTA → footer.
-- Output written to `websites/26-altitude/` 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/27-way/README.md

@@ -1,42 +0,0 @@
-# Way Designer
-
-A **Website Design System Architect** skill modeled on the live
-[Way](https://www.way.co/) website — SaaS — experiential ecosystem for leading consumer 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 Way's look and feel.
-
-## What it produces
-
-Writes a complete, token-driven site to `websites/27-way/`:
-
-- `index.html` — full Way-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 Way patterns it recreates
-
-- Video-led hero with "Unlock the power of experiences" and "The Premier Experiential Ecosystem".
-- Nav includes About, Core Platform, Products, Resources, Company, Sign In/Careers, and "Request Meeting".
-- Rouge #49090E, onyx #121212, light grey #F1F1EF, neon green #A0FF75 accents.
-- ABC Favorit Extended uppercase headings/nav plus Triptych Roman editorial body text.
-- Luxury full-bleed media, square buttons, growing underline hovers, blur-backed links, and fox/Way logo variants.
-
-## How to use
-
-Ask the agent to "build a site using the Way design system" or "make a
-Way-style experiential consumer-brand 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.