spirewise 1.7.0 → 1.8.0

package/skills/website-design-skills/21-weavy/SKILL.md

@@ -1,273 +0,0 @@
----
-name: 21-weavy-designer
-description: >-
-  Weavy Designer — a Website Design System Architect skill that designs,
-  documents, enforces, and generates production-grade websites using ONLY
-  HTML, CSS, and JavaScript, modeled on the design system of Weavy
-  (https://www.weavy.ai/): AI creative workflow platform, now Figma Weave. Use when the user asks to "build a site like
-  Weavy", "use the Weavy design system", or wants a full design
-  system (tokens, components, pages) in vanilla HTML/CSS/JS that matches
-  Weavy's look and feel. Always builds the design system first, then
-  components, then pages — never random designs. Writes output to
-  `websites/21-weavy/`.
----
-
-# Weavy 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 **Weavy** website (https://www.weavy.ai/).
-
-**Primary goal:** Ensure every generated website follows a scalable design
-system, accessibility standards, responsive principles, clean architecture, and
-modern UI/UX best practices — recreating Weavy's creative AI, node-based workflow 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 Weavy actually implements (study before building)
-
-This skill is grounded in the live Weavy site. Recreate these signature patterns:
-
-- **Redirected live site**: `www.weavy.ai` redirects to `weave.figma.com`; the page banner says "Weavy is now Figma Weave. Welcome to our new home at weave.figma.com".
-- **Hero identity** uses H1s "Figma Weave" and "Artistic Intelligence" with the section headline "Use all AI models, together at last".
-- **Subhead** promises AI models and professional editing tools in one node-based platform, turning creative vision into scalable workflows without compromising quality.
-- **Product story** highlights Google, OpenAI, Runway, Luma, Kling, Black Forest Labs, Lightricks, Wan, Grok, Recraft, Bria and editing tools like Blur, Invert, Crop, Mask, Inpaint, Relight, Upscale, Z Depth, Channels and Outpaint.
-- **Section flow** includes "With all the professional tools you rely on", "Control the Outcome", "From Workflow to Tool", and "Explore Our Workflows".
-- **Motion system** includes GSAP, ScrollTrigger, Draggable, leader-line connectors, Splide sliders, node/workflow interactions, and smooth scroll.
-- **Signature motifs**: black/near-black creative canvas, lemon highlight chips, eggshell/spring-wood surfaces, Figma-like sans, node connectors, model thumbnails, and creative workflow cards.
-
-## Design system (Weavy brand foundation)
-
-> Hex values below are scraped from the live HTML/CSS where available. Values
-> labeled **inferred** are chosen from repeated visible brand motifs when exact
-> CSS tokens were not exposed in the initial scrape.
-
-### Brand foundation
-
-**Colors**
-- primary dark / rich black (scraped `--brand--rich-black`): `#252525`; richer black `#212126`; warm dark `#270F03`
-- accent lemon (scraped `--brand--lemon`): `#F7FF9E`; lemon-100 `#F7FFA8`
-- background eggshell (scraped `--brand--eggshell`): `#EAEADA`; spring wood `#F7F7F0`; moon mist `#DCDCC2`
-- surface grey (scraped): `#F5F5F6`, `#ECECEC`; border soft grey `#D0D0D2`
-- ash grey (scraped): `#AEB3A9`; white `#FFFFFF`; black `#000000`
-- accent azure (scraped variable): `azure` (`#F0FFFF`)
-- success `#22C55E` · warning `#F7FF9E` · error `#EF4444`
-
-**Typography**
-- font_family: primary **Figma Sans Regular** (scraped CSS font-family); supporting
-  **DM Sans for body/supporting 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: 400, 500, 600, 700.
-- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
-
-**Iconography**
-- style: node handles, connector lines, workflow arrows, model/tool chips, slider controls, and app-mode cards.
-- sizes: 16, 20, 24, 32, 48.
-
-**Imagery**
-- style_rules: AI-generated creative outputs, workflow nodes, professional editing tool panels, model/provider logos, and Figma Weave branding.
-- usage_guidelines: treat dark canvases as the creative workspace; use lemon chips for active models/tools and eggshell for editorial sections.
-
-### Tokens (emit as CSS variables in `:root`)
-
-- **colors**: map every brand color above to `--color-*` tokens.
-- **spacing** (px → tokens): `4,8,12,16,20,24,32,40,48,64,80,96`.
-- **radius**: sm 6, md 10, lg 16, pill 999.
-- **shadows**: sm `0 1px 2px rgba(14,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, node-connector motion, GSAP scroll sequences, Splide sliders, draggable interactions, and tool-chip state changes.
-
-### 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, sidebar, breadcrumbs. Include Figma Weave banner treatment and app CTAs routed to app.weavy.ai / weave.figma.com.
-- **buttons**: primary, secondary, tertiary, icon-button; match lemon-highlight chips, dark canvas CTAs, and rounded workflow/app buttons.
-- **forms**: input, textarea, select, checkbox, radio, switch.
-- **feedback**: toast, alert, modal, tooltip plus node validation, generated-output previews, and workflow-to-tool cards.
-- **content**: cards, tables, lists, accordion, tabs.
-- **marketing**: hero, features, pricing, faq, cta, footer. Add model/provider grid, tool slider, workflow examples, app-mode conversion, and creative 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: AI creative workflow platform, now Figma Weave.)
-
-## 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/21-weavy/
-├── 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 Weavy's scraped design tokens.
-
-## Output — write to `websites/21-weavy/`
-
-Create the folder if missing and produce all deliverables:
-
-```
-websites/21-weavy/
-├── index.html                 # full Weavy-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 Weavy's
-   look (near-black canvas, lemon highlights, eggshell surfaces, node connectors, AI creative imagery).
-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 Weavy's section order: redirect/banner → nav → Figma Weave / Artistic Intelligence hero → AI models together → professional tools → control outcome → workflow to tool → workflows gallery → CTA/footer.
-- Output written to `websites/21-weavy/` 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/22-safetykit/README.md

@@ -1,42 +0,0 @@
-# SafetyKit Designer
-
-A **Website Design System Architect** skill modeled on the live
-[SafetyKit](https://www.safetykit.com/) website — AI trust & safety / fraud, moderation, onboarding and investigations 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 SafetyKit's look and feel.
-
-## What it produces
-
-Writes a complete, token-driven site to `websites/22-safetykit/`:
-
-- `index.html` — full SafetyKit-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 SafetyKit patterns it recreates
-
-- Hero H1 "Protect your platform from scams and abuse." with **Get a demo** CTA.
-- Navigation: Solutions, News, Docs, Case Studies, Advisory Board, Careers, Log in.
-- Logo carousel "Deployed at Scale by" with Upwork, Etsy, Lime, Block, Square, Faire, Eventbrite, Discord, and more.
-- Platform headline "The detection and decisioning engine to stop scams and abuse at-scale."
-- Scraped tokens: Instrument Sans + DM Mono, cream `#F9F4E6`, black `#141414`, accent red `#FB4F2F`, border `#E3DED1`.
-
-## How to use
-
-Ask the agent to "build a site using the SafetyKit design system" or "make a
-SafetyKit-style trust-and-safety 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/22-safetykit/SKILL.md

@@ -1,273 +0,0 @@
----
-name: 22-safetykit-designer
-description: >-
-  SafetyKit Designer — a Website Design System Architect skill that designs,
-  documents, enforces, and generates production-grade websites using ONLY
-  HTML, CSS, and JavaScript, modeled on the design system of SafetyKit
-  (https://www.safetykit.com/): AI trust & safety / fraud, moderation, onboarding and investigations platform. Use when the user asks to "build a site like
-  SafetyKit", "use the SafetyKit design system", or wants a full design
-  system (tokens, components, pages) in vanilla HTML/CSS/JS that matches
-  SafetyKit's look and feel. Always builds the design system first, then
-  components, then pages — never random designs. Writes output to
-  `websites/22-safetykit/`.
----
-
-# SafetyKit 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 **SafetyKit** website (https://www.safetykit.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 SafetyKit's trust-and-safety, risk-review 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 SafetyKit actually implements (study before building)
-
-This skill is grounded in the live SafetyKit site. Recreate these signature patterns:
-
-- **Cream hero** with exact H1 "Protect your platform from scams and abuse." and subhead "Secure your platform to increase quality, minimize costs, and eliminate risk".
-- **Primary CTA** is **Get a demo**; header CTA is **Log in** on a red/orange rectangular button.
-- **Navigation** includes Solutions dropdown, News, Docs, Case Studies, Advisory Board, Careers, plus mobile Menu; Solutions list Content Moderation, Fraud Prevention, Network-Scale Takedowns, Merchant Intelligence.
-- **Logo carousel** says "Deployed at Scale by" and includes Upwork, Etsy, Lime, Block, Square, Faire, Eventbrite, Discord, $700B Card Network, Character.ai, Kickstarter, Patreon.
-- **Platform section** headline: "The detection and decisioning engine to stop scams and abuse at-scale." with system columns like Global Ingestion and bordered mono labels.
-- **Case-study proof** includes "Upwork scales to global platform coverage with SafetyKit" and "Eventbrite cut false positives in half with SafetyKit".
-- **Signature motifs**: cream paper background, black mono labels, red/orange mark, square-edged CTAs, thin borders, dotted/radial canvas, clipped labels, and detection pipeline diagrams.
-
-## Design system (SafetyKit brand foundation)
-
-> Hex values below are scraped from the live HTML/CSS where available. Values
-> labeled **inferred** are chosen from repeated visible brand motifs when exact
-> CSS tokens were not exposed in the initial scrape.
-
-### Brand foundation
-
-**Colors**
-- primary text / black (scraped `--_colors---neutral-900`): `#141414`
-- primary CTA / accent red-orange (scraped logo/CTA): `#FB4F2F`; secondary orange `#FF6638` / `#FF5033`
-- background cream (scraped): `#F9F4E6`; border neutral (scraped): `#E3DED1`
-- muted / system grey (scraped): `#B2AFA4`, `#888680`, `#545454`
-- accent green (scraped): `#0D8A56`; accent blue `#64A7CC` / `#3B82F6`; yellow `#F1A21F`
-- surface white `#FFFFFF`; subtle black overlays `#0000001A`, `#00000008`
-- success `#0D8A56` · warning `#F1A21F` · error `#FB4F2F`
-
-**Typography**
-- font_family: primary **Instrument Sans** (scraped local @font-face, regular/italic); supporting
-  **DM Mono for uppercase navigation, labels, stats, and system cards**; 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, 700 (use 500 for mono CTA labels).
-- line_heights: tight 1.1 (display), 1.3 (headings), 1.6 (body).
-
-**Iconography**
-- style: square-corner arrows, colored solution dots, logo mark petals, pipeline arrows, and mono system indicators.
-- sizes: 16, 20, 24, 32, 48.
-
-**Imagery**
-- style_rules: hero graphic, client logo carousel, system/pipeline diagrams, moderation/fraud case-study cards, and bordered data panels.
-- usage_guidelines: use cream as the page canvas, black for text/borders, red-orange for CTAs/logo, and mono labels for all system/process copy.
-
-### Tokens (emit as CSS variables in `:root`)
-
-- **colors**: map every brand color above to `--color-*` tokens.
-- **spacing** (px → tokens): `4,8,12,16,20,24,32,40,48,64,80,96`.
-- **radius**: sm 6, md 10, lg 16, pill 999.
-- **shadows**: sm `0 1px 2px rgba(14,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, canvas/radial hero motion, logo-carousel marquee, pipeline flow, and subtle clipped-label reveals.
-
-### 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, sidebar, breadcrumbs. Include Solutions dropdown with four risk categories, News, Docs, Case Studies, Advisory Board, Careers, Log in.
-- **buttons**: primary, secondary, tertiary, icon-button; match square red-orange CTAs with mono uppercase labels and arrow icons.
-- **forms**: input, textarea, select, checkbox, radio, switch.
-- **feedback**: toast, alert, modal, tooltip plus policy-review, fraud-signal, queue, and decision-status cards.
-- **content**: cards, tables, lists, accordion, tabs.
-- **marketing**: hero, features, pricing, faq, cta, footer. Add Deployed at Scale logo carousel, platform decisioning diagram, case studies, comprehensive protection sections, 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: AI trust & safety / fraud, moderation, onboarding and investigations 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/22-safetykit/
-├── 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 SafetyKit's scraped design tokens.
-
-## Output — write to `websites/22-safetykit/`
-
-Create the folder if missing and produce all deliverables:
-
-```
-websites/22-safetykit/
-├── index.html                 # full SafetyKit-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 SafetyKit's
-   look (cream background, black borders/text, red-orange CTAs, DM Mono labels, risk pipeline diagrams).
-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 SafetyKit's section order: nav → cream hero → Deployed at Scale carousel → platform decisioning engine → comprehensive protection → case studies → demo CTA → footer.
-- Output written to `websites/22-safetykit/` 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/23-modulify/README.md

@@ -1,42 +0,0 @@
-# Modulify Designer
-
-A **Website Design System Architect** skill modeled on the live
-[Modulify](https://www.modulify.ai/) website — AI startup — AI Webflow site builder.
-
-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 Modulify's look and feel.
-
-## What it produces
-
-Writes a complete, token-driven site to `websites/23-modulify/`:
-
-- `index.html` — full Modulify-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 Modulify patterns it recreates
-
-- Prompt-first hero with "Build stunning Webflow Sites 10x faster", "27,000+ web designers and agencies" badge, and a prompt composer.
-- Navigation with Features, Pricing, Resources, Enterprise, Contact, Sign In, and "Start free trial" / "Get Started" CTAs.
-- Sitemap / Wireframe / Design feature cards under "The one AI website building platform you need".
-- White and near-white surfaces, #362BFF CTA blue, #EE818F pink accent, NeutralSans + IBM Plex Sans typography.
-- Large product playground, video lightbox, animated logo, template/showcase carousel, and floating 3D circle ornaments.
-
-## How to use
-
-Ask the agent to "build a site using the Modulify design system" or "make a
-Modulify-style AI Webflow builder 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.