spirewise 1.7.1 → 1.8.0

package/skills/bento-grid-design-system/spacing-system.md

@@ -0,0 +1,77 @@
+# Spacing System — Bento Grid
+
+A strict **4-point base / 8-point rhythm**, tuned for tiles: consistent **grid gaps**,
+comfortable **tile padding**, and generous section spacing. The gaps + tile surfaces do
+the separating — never borders.
+
+## Scale tokens
+
+```css
+:root {
+  /* 4-pt base, 8-pt rhythm */
+  --space-0: 0;        --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
+  --space-4: 16px;     --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
+  --space-10: 40px;    --space-12: 48px; --space-16: 64px; --space-20: 80px;
+  --space-24: 96px;    --space-28: 112px;--space-32: 128px;--space-40: 160px;
+
+  /* Radii — tiles use large, soft corners (Apple bento) */
+  --radius-sm: 10px;  --radius-md: 14px; --radius-lg: 18px;
+  --radius-xl: 22px;  --radius-2xl: 28px; --radius-tile: 22px; --radius-pill: 999px;
+
+  /* Containers */
+  --container-sm: 680px;   --container-md: 840px;  --container-lg: 1080px;
+  --container-xl: 1200px;  --container-2xl: 1320px;  /* wide bento showcases */
+  --gutter: clamp(20px, 5vw, 48px);
+
+  /* Bento grid */
+  --bento-gap: clamp(12px, 1.4vw, 20px);   /* gap between tiles */
+  --bento-row: clamp(150px, 18vw, 210px);  /* base auto-row height for spans */
+  --tile-pad:  clamp(20px, 2.4vw, 32px);   /* padding inside a tile */
+
+  /* Section rhythm (fluid) */
+  --section-y: clamp(64px, 8vw, 128px);
+  --section-y-lg: clamp(96px, 12vw, 184px); /* hero / major sections */
+  --stack: clamp(14px, 1.6vw, 20px);        /* gap between elements inside a tile */
+}
+```
+
+## Usage map
+
+- **4-pt system** (`--space-1..6`): inside tiles — icon↔label, meta gaps, badge/button
+  padding, list-item gaps. Tile internal rhythm uses `--stack`.
+- **8-pt system** (`--space-8..16`): tile padding (`--tile-pad`), gaps between grids and
+  copy, form rows.
+- **Bento gap** (`--bento-gap`): the single gap value between all tiles in a grid — keep
+  it consistent so the mosaic reads as one set (12–20px).
+- **Tile padding** (`--tile-pad`): comfortable interior padding; large tiles can use a
+  touch more. Don't crowd tile content to the edges.
+- **Container widths:** standard sections `--container-lg/xl`; wide bento showcases
+  `--container-2xl`; prose/docs `--container-md`.
+- **Section spacing:** `padding-block: var(--section-y)`; hero + major bentos use
+  `--section-y-lg`.
+- **Page spacing:** sections stack with no extra margins and **no borders/dividers** —
+  `--section-y` padding + alternating panels + tile surfaces separate them.
+
+## Rules
+
+1. **Only use scale values.** No arbitrary `13px`/`27px`.
+2. **One gap per grid.** Use `--bento-gap` consistently; don't vary gaps within a grid.
+3. **Consistent tile radius/padding.** All tiles share `--radius-tile` + `--tile-pad`
+   so the bento reads as a cohesive set.
+4. **Span heights from `--bento-row`.** Row-spanning tiles are multiples of the base row
+   + gaps (see layout-system) — keeps tile proportions tidy.
+5. **Whitespace + gaps > dividers.** Separate sections with space/panels, ideas with gaps.
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--gutter); }
+.container--wide   { max-width: var(--container-2xl); }
+.container--narrow { max-width: var(--container-md); }
+.section   { padding-block: var(--section-y); border: 0; }   /* never a section border */
+.section--hero { padding-block: var(--section-y-lg); }
+.section--muted { background: var(--bg-muted); }             /* alternate panel, not a line */
+.tile { padding: var(--tile-pad); border-radius: var(--radius-tile); }
+.tile .stack > * + * { margin-top: var(--stack); }
+```

package/skills/bento-grid-design-system/typography-system.md

@@ -0,0 +1,85 @@
+# Typography System — Bento Grid
+
+Modern grotesk type that reads cleanly **inside tiles** — confident headlines for anchor
+tiles, compact legible text for small tiles, optional mono for code tiles. Fluid scale
+across breakpoints; tile titles scale a little with tile span.
+
+## Fonts
+
+```css
+:root {
+  --font-sans: "Inter", "Geist", "Satoshi", -apple-system, BlinkMacSystemFont,
+               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans);          /* or "Geist"/"Satoshi" for tighter display */
+  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
+}
+```
+Use mono inside code/terminal tiles and for small numeric/metric labels for character.
+
+## Fluid type scale (clamp)
+
+```css
+:root {
+  --fs-display: clamp(2.5rem, 1.5rem + 4.8vw, 4.5rem);    /* 40 → 72px hero */
+  --fs-h1:      clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem); /* 34 → 52px */
+  --fs-h2:      clamp(1.625rem, 1.25rem + 1.8vw, 2.375rem);/* 26 → 38px section title */
+  --fs-tile-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);      /* 24 → 32px anchor-tile title */
+  --fs-tile:    clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* 18 → 22px tile title */
+  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);  /* 17 → 20px */
+  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);/* 17 → 21px subhead */
+  --fs-body:    1rem;          /* 16px base */
+  --fs-body-sm: 0.9375rem;     /* 15px tile body */
+  --fs-small:   0.875rem;      /* 14px caption/meta */
+  --fs-micro:   0.75rem;       /* 12px labels/eyebrow */
+}
+```
+
+## Roles (each: size · weight · line-height · tracking)
+
+| Role | Size | Weight | Line-height | Tracking | Color |
+|---|---|---|---|---|---|
+| **Display** (hero) | `--fs-display` | 600–700 | 1.05 | -0.02em | `--text-primary` (or `--grad-text` on 1 word) |
+| **H1** | `--fs-h1` | 600–700 | 1.08 | -0.02em | `--text-primary` |
+| **H2** (section title) | `--fs-h2` | 600 | 1.12 | -0.015em | `--text-primary` |
+| **Anchor tile title** | `--fs-tile-xl` | 600 | 1.15 | -0.01em | `--text-primary`/`--text-on-dark` |
+| **Tile title** | `--fs-tile` | 600 | 1.25 | -0.005em | `--text-primary` |
+| **Eyebrow / label** | `--fs-micro` | 600 | 1.2 | 0.07em, UPPERCASE | `--accent`/`--text-muted` |
+| **Lead / subhead** | `--fs-lead` | 400 | 1.5 | 0 | `--text-secondary` |
+| **Tile body** | `--fs-body-sm`/`--fs-body` | 400 | 1.55 | 0 | `--text-secondary` |
+| **Caption / meta** | `--fs-small` | 400–500 | 1.45 | 0 | `--text-muted` |
+| **Metric (stat tile)** | `clamp(2rem,1.6rem+2vw,3rem)` | 700 | 1 | -0.02em | `--text-primary` |
+| **Button** | `--fs-body` (`0.9375rem` compact) | 600 | 1 | -0.005em | `--text-on-accent`/`--text-primary` |
+| **Navigation** | `--fs-small`/`--fs-body` | 500 | 1 | 0 | `--text-secondary` → `--text-primary` |
+| **Pricing amount** | `clamp(2.25rem,1.8rem+2vw,3.25rem)` | 700 | 1 | -0.02em | `--text-primary` |
+| **Code (code tile)** | `--fs-small` | 400–500 | 1.6 | 0 | mono, `--text-on-dark` |
+
+## Rules
+
+1. **Scale tile titles to span.** Anchor/large tiles use `--fs-tile-xl`; standard tiles
+   `--fs-tile`. Keeps the grid hierarchy legible.
+2. **Compact body in small tiles.** Use `--fs-body-sm` and short copy so 1×1 tiles don't
+   overflow; one idea per tile.
+3. **Tighten as it grows;** body ~1.55–1.6, 0 tracking. Tile body measure ≤ 48ch.
+4. **Weights:** body 400, UI/tile titles 600, hero 600–700.
+5. **One display moment per page** (the hero). Don't oversize every tile title.
+6. **Eyebrows** label sections above H2s; small overlines can label tiles.
+7. **Metrics** use `font-variant-numeric: tabular-nums`; mono adds character in stat/code tiles.
+
+## Base CSS
+
+```css
+body { font-family: var(--font-sans); font-size: var(--fs-body);
+       line-height: 1.6; color: var(--text-secondary);
+       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+h1,h2 { color: var(--text-primary); font-family: var(--font-display);
+        font-weight: 600; text-wrap: balance; letter-spacing: -0.02em; }
+h1 { font-size: var(--fs-h1); line-height: 1.08; }
+.eyebrow { font-size: var(--fs-micro); font-weight:600; letter-spacing:.07em;
+           text-transform:uppercase; color: var(--accent); }
+.tile__title { font-size: var(--fs-tile); font-weight:600; color: var(--text-primary);
+               letter-spacing:-0.005em; }
+.tile--xl .tile__title { font-size: var(--fs-tile-xl); }
+.lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: 60ch; }
+a { color: var(--accent); text-underline-offset: 2px; }
+code, pre { font-family: var(--font-mono); }
+```

package/skills/bento-grid-design-system/website-generation-rules.md

@@ -0,0 +1,193 @@
+# Website Generation Rules — Bento Grid
+
+How an agent turns this design system into a **production-ready, multi-page, bento-grid
+website**. Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design
+tokens. The signature: **most sections are bento grids** (CSS Grid — no masonry library).
+(The token/spec system can be exported for other agents — see below — but the generated
+website itself is always pure vanilla.)
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything — including the bento grid and tile interactions — with **HTML5 + CSS3 +
+vanilla JavaScript only**. The generated site must contain **zero** of:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind ·
+> ❌ jQuery · ❌ any UI library · ❌ any CSS framework · ❌ any JS masonry/animation library
+
+No build step, no npm dependencies, no CDN component kits. The bento is **CSS Grid**
+(`grid-template-columns` + spans + `grid-auto-flow: dense`); reveals/spotlight/hover are
+native CSS + `IntersectionObserver`/`pointermove`. Exporting `tokens.json` for other
+agents is allowed; shipping the site in a framework is not.
+
+## Mandatory scale & structure (read first)
+- **Multipage: build 15+ pages (recommended ~20)** — a full site map, not one page.
+- **Every page has at least 10 sections (recommend 12)**; **most are bento grids**, each
+  with **one anchor tile + varied-span supporting tiles** (no monotonous uniform grids,
+  no empty/filler tiles).
+- **No borders or dividers between sections** — separate with `--section-y` spacing,
+  alternating panels (`--bg-canvas`/`--bg-muted`/white), and tile surfaces. In CSS:
+  `.section { border: 0 }`; never `<hr>`/divider or `border-top/bottom` between sections.
+  (Tiles have their own surface/hairline — that's a tile, not a section divider.)
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`).
+
+## Required pages (build all — 15+; ~20 recommended)
+Home `/` · Platform `/platform` · Solutions `/solutions` · Products `/products` ·
+Features `/features` · AI Agents `/ai-agents` · Enterprise `/enterprise` · Security
+`/security` · Pricing `/pricing` · Customers `/customers` · Case Studies `/case-studies`
+· Developers `/developers` · Documentation `/docs` · About `/about` · Careers `/careers`
+· Blog `/blog` · Contact `/contact` · Partners `/partners` · Resources `/resources` ·
+FAQ `/faq`. Add product/solution/blog/doc subpages freely.
+
+## Required sections (every page — ≥10, recommend 12)
+Hero (Hero bento) · Feature Sections (capabilities bento) · Product Highlights · Trust
+Signals (logos) · Testimonials · Use Cases · Statistics (stat bento) · Integrations · CTA
+(CTA tile) · Footer. Add more (Security, Enterprise, Code/Terminal tiles, FAQ) to reach 12.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups. (See `example-page-structures.md`.)
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page; sections as bento grids of tiles.
+- **CSS** — `tokens.css` (`:root` vars) + `styles.css` (base + bento engine + components).
+- **JavaScript** — vanilla: nav/dropdown, staggered bento reveal, optional tile spotlight,
+  accordion, tabs, toggle, copy, count-up. Usable without JS.
+- **`vercel.json`** + **`sitemap.xml`** + **`robots.txt`**.
+- **Design tokens** — `tokens.json` (machine-readable; token export only).
+- **Component specifications** — when asked for the *system*, emit component + tile markup
+  and the bento engine from `component-library.md`/`layout-system.md`.
+- **Accessibility + responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html  solutions.html  products.html  features.html  ai-agents.html
+├── enterprise.html  security.html  pricing.html  customers.html  case-studies.html
+├── developers.html  docs.html  about.html  careers.html  blog.html  contact.html
+├── partners.html  resources.html  faq.html
+├── css/  { tokens.css, styles.css }
+├── js/   { main.js }        # nav, bento reveal, spotlight, accordion, tabs, copy
+├── assets/                  # tile media, icons, og images
+├── tokens.json
+├── sitemap.xml  robots.txt
+└── vercel.json
+```
+Alternative: folder-per-page `platform/index.html`. Either way **all internal links are
+extensionless** (`href="/pricing"`).
+
+## Clean URLs & Vercel (MANDATORY)
+- **No `.html` in any URL**, no `page.html` links, no ugly query params.
+- Emit **`vercel.json`** so `.html` is stripped, refresh works, and deep links resolve:
+```json
+{
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "headers": [
+    { "source": "/assets/(.*)", "headers": [
+      { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }
+  ]
+}
+```
+  `cleanUrls: true` serves `platform.html` at `/platform` and 301-redirects `.html`.
+  Provide a `404.html`. Every nav/footer/internal link is extensionless.
+
+## Navigation system (vanilla JS)
+- **Desktop nav** with **dropdown/mega-menus** (panels can be mini bentos of link tiles);
+  keyboard + `aria-expanded`/`aria-haspopup`.
+- **Mobile nav**: full-screen overlay, accordion, focus-trap, ESC.
+- **Multi-level nav** + **breadcrumbs** on deep pages; `aria-current="page"`.
+
+## Hard rules
+1. **Vanilla only** (bento is CSS Grid). No frameworks/libraries in the shipped site.
+2. **Bento-led.** Most sections are bentos with **an anchor tile + varied spans**, one
+   idea per tile, mixed content types, **real content** (no empty/filler/monotonous grids).
+3. **Tokens first, once.** All colors/type/spacing as `:root` vars; no scattered hex/px;
+   rebrand = change `--accent-*`.
+4. **No section borders.** Separate with spacing + panels + tile surfaces. `.section{border:0}`.
+5. **Mobile-first + responsive**; the bento reflows 6→4→2→1 columns (spanning tiles
+   collapse predictably); no 320px scroll; tiles stay usable on mobile.
+6. **Semantic + accessible** per `accessibility-system.md` (real headings in tiles,
+   link-wrapped tiles, sensible DOM/reading order despite `dense`, focus, reduced motion).
+7. **Components from the library** (+ tile variants). Every component/tile: responsive,
+   accessible, reusable, production-ready, animation-ready.
+8. **Performance:** system/Inter fonts; lazy-load below-the-fold tile images
+   (`loading="lazy"`); animate transform/opacity only; minimal JS, no libraries; high
+   Lighthouse (90+).
+9. **SEO on every page** (below): unique title/description, OG + Twitter, canonical,
+   JSON-LD, sitemap + robots.
+10. **Real content, not lorem.** Specific copy/data in every tile. Mark guesses `[PLACEHOLDER]`.
+11. **Self-verify** against anti-patterns + every companion checklist before done.
+
+## SEO requirements (every page)
+Unique `<title>` + meta description (150–160); **Open Graph** + **Twitter card**
+(`summary_large_image`) + OG image; **canonical** (clean URL); **JSON-LD** (`Organization`
++ `WebSite` site-wide; `Product`, `FAQPage`, `BreadcrumbList`, `Article` where relevant);
+**`sitemap.xml`** + **`robots.txt`**.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, optimized/centralized CSS, lazy tile media, cached
+assets (via `vercel.json`), no blocking libraries — high Lighthouse.
+
+## Boilerplate `<head>`
+```html
+<!doctype html><html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title><!-- Page · Brand --></title>
+<meta name="description" content="<!-- 150–160 chars -->">
+<link rel="canonical" href="https://brand.com/path">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<!-- Page · Brand -->">
+<meta property="og:description" content="<!-- … -->">
+<meta property="og:url" content="https://brand.com/path">
+<meta property="og:image" content="https://brand.com/assets/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/styles.css">
+<script type="application/ld+json"><!-- Organization / WebSite JSON-LD --></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header><!-- Navbar (links extensionless: /platform, /pricing) --></header>
+  <main id="main"><!-- Hero bento + 10–12 sections (mostly bentos), no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; bento engine)
+```css
+html, body { background: var(--bg-canvas); color: var(--text-secondary); }
+.section { padding-block: var(--section-y); border: 0; }   /* no borders/dividers between sections */
+.section--muted { background: var(--bg-muted); }           /* alternate panels by COLOR, not lines */
+.section + .section { border-top: 0; }                     /* explicitly: no rule between sections */
+.bento { display:grid; grid-template-columns:repeat(6,1fr);
+         grid-auto-rows:var(--bento-row); gap:var(--bento-gap); grid-auto-flow:dense; }
+/* Separation = whitespace (--section-y) + panel color + tile surfaces; never <hr>/dividers. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bg": {"canvas":"#f6f7f9","white":"#ffffff","muted":"#eef0f4"},
+             "tile": {"base":"#ffffff","alt":"#f3f5f8","dark":"#0e1116"},
+             "text": {"primary":"#0c0e14","secondary":"#3b4250","muted":"#6a7283"},
+             "accent": {"base":"#6d5efc","2":"#18b4c9"} },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "md":"14px","lg":"18px","tile":"22px","pill":"999px" },
+  "bento": { "gap":"clamp(12px,1.4vw,20px)", "row":"clamp(150px,18vw,210px)" },
+  "type": { "display":"clamp(2.5rem,1.5rem + 4.8vw,4.5rem)", "body":"1rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), most as bento grids (anchor tile +
+varied spans, one idea per tile, real content), no borders/dividers between sections.**
+Pure HTML/CSS/vanilla JS (no frameworks/libraries; bento is CSS Grid); clean extensionless
+URLs with `vercel.json` (refresh + deep links work); desktop dropdown + mobile + breadcrumb
+nav; per-page SEO + sitemap; tokens centralized; fully responsive (graceful bento reflow);
+AA accessible (sensible reading order, link-tiles, focus); quiet tile motion with
+reduced-motion fallback; high Lighthouse; zero anti-patterns; could sit next to Apple/
+Linear/Raycast without looking out of place.

package/skills/brutalist-tech-design-system/README.md

@@ -0,0 +1,100 @@
+# brutalist-tech-design-system
+
+A world-class, **brutalist tech design system** for building raw, bold, high-contrast websites
+— stark full-bleed **color blocks**, oversized **monospace/grotesk** type, exposed grids, thick
+component borders, hard **offset shadows (no blur)**, and snappy mechanical motion. The honest,
+structural "raw HTML turned up to 11" aesthetic — confident and memorable, built **accessibly**
+(brutalism's high contrast is an a11y strength). Distilled from Gumroad, Vercel, brutalist
+Awwwards winners, Read.cv, Bloomberg, Hatch, and modern AI sites (OpenAI, Anthropic, Perplexity,
+Cursor, Replit) for structure.
+
+It also ships a **production website-generation framework**: a multipage site (15+ pages, 10+
+sections/page, **no borders/dividers between sections** — sections invert via color blocks) in
+**pure HTML/CSS/vanilla JS** (no React/Vue/Tailwind/Bootstrap/jQuery/any library), with **clean
+Vercel-ready URLs** (no `.html`), navigation, and full SEO.
+
+> The full design intelligence is **baked into the companion files** (live research optional, to
+> save tokens). Outputs a generated site/system into a `website/` folder. Sibling skills:
+> `ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+> `product-demo-first-design-system`, `bento-grid-design-system`, `glassmorphism-design-system`,
+> `editorial-luxury-design-system`, `motion-storytelling-design-system`, `enterprise-data-viz-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s brutalist-tech-design-system          # pick agents + scope
+npx spirewise install -s brutalist-tech-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s brutalist-tech-design-system           # pick agents + scope
+npx spirewise remove -s brutalist-tech-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s brutalist-tech-design-system` and `./install.sh remove -s brutalist-tech-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a brutalist / neo-brutalist website for our product"
+> "Raw blocks, bold monospace, thick borders, hard shadows — like Gumroad"
+
+It reads the companion files, locks the tokens, blocks out the page (inverted color blocks +
+exposed grid), composes the brutalist components (thick-border boxes, press buttons, marquees,
+oversized type), applies snappy motion + accessibility, and emits **pure HTML + CSS + vanilla JS
++ tokens + `vercel.json` + `sitemap.xml`** into a `website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: brutalist philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | Raw/structural philosophy, brutalist devices, do/don'ts |
+| `color-system.md` | Stark black/white + raw accent **blocks** + status (+ inverted dark) |
+| `typography-system.md` | Mono + bold grotesk, oversized fluid scale, UPPERCASE roles |
+| `spacing-system.md` | 4/8-pt scale, **thick-border + hard-shadow** tokens, blocky rhythm |
+| `layout-system.md` | The **exposed grid** + canonical block layouts |
+| `component-library.md` | 17 components as brutalist blocks (`.box`/`.btn` press) |
+| `motion-system.md` | Snappy mechanical press/hover, marquees, stepped typewriter, reveals |
+| `accessibility-system.md` | Contrast (incl. accent fills), thick focus, all-caps, reduced motion |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Brutalist block page blueprints per site type |
+
+## The look
+
+Raw paper-white (or inverted black) full-bleed blocks, **pure black** text + thick black
+borders, **one loud accent** (default electric blue; yellow/red/lime/pink options), oversized
+mono + bold grotesk type (often UPPERCASE), hard **offset shadows (no blur)**, exposed grid
+lines, blocky buttons that **press**, and the occasional marquee. Confident, structural, flat —
+never soft, gradient-y, or glassy.
+
+## Components (17, brutalist)
+
+Bordered Navbar · Block Hero · Bordered Feature Grid / Exposed Grid · Blocky Bento · Quote boxes
+· Logo Marquee · Bordered Pricing · Bordered FAQ · Accent CTA block · Ink Footer · Bordered
+Dashboard box · Numbered Agent Workflow · Code box · Terminal box · Stat boxes · Security tags ·
+Enterprise block.
+
+## Rules it enforces
+
+- **Brutalist craft** — stark inverted color blocks; oversized mono/grotesk type; thick component
+  borders + **hard offset shadows (no blur)**; exposed grid; one loud accent; **flat** (no
+  gradients/glass/soft shadows/pillowy radii).
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections/page (≈12)**, and **no
+  borders/dividers between sections** — sections separate by **inverted full-bleed color blocks**,
+  not divider lines.
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; **no React/Vue/Angular/Svelte/Bootstrap/
+  Tailwind/jQuery/any library**; no build step (raw HTML/CSS/JS is the brand).
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), `vercel.json` (`cleanUrls`),
+  `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — blocky desktop nav/menu, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD.
+- **Accessible high contrast** — verify accent fills (yellow/lime → black text), **thick focus
+  that survives the press**, all-caps only for labels/headings, reduced motion (marquees/
+  typewriters stop), centralized tokens, mobile-first responsive. **Zero anti-patterns** — no
+  gradients/glass/soft shadows, no borders between sections, no template look, no libraries.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/brutalist-tech-design-system/SKILL.md

@@ -0,0 +1,185 @@
+---
+name: brutalist-tech-design-system
+description: >-
+  A world-class, BRUTALIST TECH design system for building raw, bold, high-contrast
+  websites — stark black/white blocks, oversized monospace/grotesk type, exposed grids,
+  thick component borders, hard offset shadows (no blur), and snappy mechanical motion.
+  Distilled from neo-brutalist/raw references (Gumroad, Vercel, Figma community brutalist,
+  Bloomberg, Read.cv, Hatch, Awwwards brutalist winners) and modern AI sites (OpenAI,
+  Anthropic, Perplexity, Cursor, Replit) for structure. It gives coding/design/UI/
+  branding/website-generation agents a complete, reusable system: design philosophy,
+  a stark high-contrast color system, mono + grotesk typography, spacing, exposed grid,
+  a 17-component library re-cast as brutalist blocks, a motion system, accessibility, and
+  a production website-generation framework. The framework builds a multipage site (15+
+  pages, 10+ sections/page, NO borders/dividers between sections) in PURE HTML/CSS/vanilla
+  JS (no React/Vue/Tailwind/Bootstrap/jQuery/any library), with clean Vercel-ready URLs
+  (no `.html`), navigation, and full SEO. Use when the user asks for a "brutalist / neo-
+  brutalist / raw website", "bold monospace design", "high-contrast blocks", "make it like
+  Gumroad/brutalist web", or "a brutalist design system / tokens". The full system is baked
+  into the companion files (live research optional). Outputs a generated site/system into a
+  `website/` folder.
+---
+
+# Brutalist Tech Design System
+
+A complete, agent-ready design system for **raw, bold, high-contrast "brutalist tech"
+websites** — stark color blocks, oversized monospace/grotesk type, exposed grids, thick
+component borders, hard **offset shadows (no blur)**, and snappy mechanical motion. The
+honest, structural, "raw HTML turned up to 11" aesthetic — confident and memorable, but
+built **accessibly** (brutalism's high contrast is an a11y strength when done right).
+Distilled from Gumroad, Vercel, brutalist Awwwards winners, Read.cv, Bloomberg, Hatch, and
+modern AI sites (OpenAI, Anthropic, Perplexity, Cursor, Replit) for structure.
+
+This skill is the **single source of truth**. The detailed system lives in the companion
+files in this folder — read the ones relevant to the task, then generate.
+
+## The core idea — raw, structural, unapologetic
+
+- **Stark blocks, not gradients.** The page is built from flat, full-bleed **color blocks**
+  (black, white, one loud accent) that invert against each other.
+- **Type is loud.** Oversized **monospace** and **bold grotesk** headlines, often UPPERCASE,
+  tight, set big and confident. Type *is* the graphic.
+- **Exposed structure.** A visible grid, hard edges, thick component borders, and hard
+  **offset shadows** (e.g., `6px 6px 0 #000`, never blurred) that show the construction.
+- **Honest + functional.** No decorative gradients, no glassmorphism, no soft shadows. Form
+  follows function; the rawness is the style.
+- **Memorable interaction.** Buttons "press" (translate + shadow collapse); hovers snap;
+  motion is mechanical, not silky.
+
+## Hard structural requirements (MANDATORY — never skip)
+
+These are non-negotiable and override any conflicting guidance elsewhere:
+
+1. **Multipage — 15+ pages (≈20).** Always generate a **full multipage website with
+   more than 15 distinct pages** (not a single landing page) — a real site map.
+2. **10+ sections per page (≈12).** Every page contains **at least 10 full sections**,
+   composed from the layout + component library.
+3. **No borders/dividers between sections.** **Zero border widths, lines, rules, or
+   `<hr>` between sections.** Brutalism is heavy on borders — but those belong **inside
+   components** (cards, buttons, tables, blocks). Between **page sections**, separate with
+   **full-bleed inverted color blocks** (black → accent → white) + whitespace + type — never
+   a single border/divider line between two sections.
+4. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated site uses
+   **only HTML5, CSS3, and vanilla JavaScript**. No React/Vue/Angular/Svelte/Next, no
+   Bootstrap/Tailwind/any CSS framework, no jQuery/any UI or JS library, no build step.
+   (Exporting `tokens.json` for other agents is fine — that's data, not a framework.)
+5. **Clean, Vercel-ready URLs.** All routes are **extensionless** (`/pricing`, not
+   `/pricing.html`); ship a `vercel.json` (`cleanUrls: true`) plus `sitemap.xml` /
+   `robots.txt` so production refresh and deep links work.
+6. **Full navigation + SEO.** Desktop nav (a blocky dropdown/menu) + mobile menu +
+   breadcrumbs; per-page SEO (unique title/description, Open Graph, Twitter card, canonical,
+   JSON-LD). Every component: responsive, accessible, reusable, production-ready.
+
+See `website-generation-rules.md` for the required page list, required sections, the
+`vercel.json`, navigation, and SEO specifics. Enforce in code: between sections use color
+blocks (`.section{border:0}`), and never place `<hr>`/divider elements between sections.
+
+## When to use
+
+Building or designing any landing page, marketing site, or product site that should feel
+**raw, bold, brutalist / neo-brutalist** (Gumroad/Vercel-blocky/Awwwards-brutalist energy) —
+for a confident product, AI startup, dev tool, or studio — or producing **design tokens / a
+brutalist design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The brutalist philosophy, hierarchy laws, restraint, do/don'ts |
+| `color-system.md` | Stark black/white + raw accent blocks + status, as CSS variables |
+| `typography-system.md` | Mono + bold grotesk, oversized fluid scale, uppercase roles |
+| `spacing-system.md` | 4/8-pt scale, blocky rhythm, container widths, thick-border tokens |
+| `layout-system.md` | The exposed grid + canonical block layouts |
+| `component-library.md` | 17 components re-cast as brutalist blocks (hard borders/shadows) |
+| `motion-system.md` | Snappy/mechanical hovers, press effects, marquees, reveals |
+| `accessibility-system.md` | Contrast (a strength), focus, motion, semantics, keyboard |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Ready brutalist page blueprints |
+
+All tokens use the same names across files, so they compose into one stylesheet.
+
+## Phase 1 — Research is baked in (live analysis OPTIONAL)
+
+The design intelligence extracted from the reference sites is **already encoded in the
+companion files** — patterns, palettes, type, spacing, the exposed grid, components, motion.
+**Do NOT re-scrape the references for the basics; use the baked-in system** (saves tokens).
+Only browse live when the user wants a *current* look from a specific site, a brand-new
+pattern not covered here, or to verify a font/feature.
+
+What the baked-in system already captures (the Phase-1 extraction): design patterns, visual
+hierarchy, typography/spacing/grid/layout systems, color + gradient systems, animation/
+motion, navigation, CTA + hero patterns, trust/enterprise/social-proof components, footer/
+pricing/feature structures, interactive + micro-interactions, glassmorphism usage,
+accessibility, mobile responsiveness, developer-experience patterns, and AI-startup
+conversion patterns — expressed in a raw, brutalist idiom.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type, the loud **accent color** (electric blue / safety yellow /
+   hot red / lime), default theme (raw paper-light or inverted black), and page set.
+2. **Lock the tokens:** start from `color-system.md` + `typography-system.md` +
+   `spacing-system.md`. Emit them once as `:root` CSS variables (and `tokens.json`).
+3. **Block out the page:** plan the sequence of **color blocks** (invert black/white/accent)
+   and the exposed grid; brutalism is composed in big flat blocks.
+4. **Compose layouts + components:** thick-border cards, hard-offset-shadow buttons, blocky
+   tables/marquees, oversized type — from the component library.
+5. **Apply motion + a11y:** snappy press/hover per `motion-system.md`, gated by
+   `prefers-reduced-motion`; meet every rule in `accessibility-system.md` (contrast + focus).
+6. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic, responsive
+   **pure HTML + CSS + vanilla JS** plus tokens, `vercel.json`, `sitemap.xml`, `robots.txt`.
+7. **Self-check** against the anti-patterns and the verification checklist below.
+
+## Output
+
+Unless the user specifies otherwise, write the generated **multipage site (15+ pages, ~20)**
+into a `website/` folder in the project root:
+- `website/index.html` **plus 15+ additional pages** (≥10 sections each, color-block
+  sections, no inter-section borders), linked with **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav, marquees, snappy interactions — progressively enhanced)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` (icons, og images)
+- `website/tokens.json` (machine-readable tokens for other agents)
+
+When the user only wants the **system** (not a site), emit the tokens + component specs.
+
+## Default look (baked-in identity)
+
+Raw paper-white (or inverted black) full-bleed blocks, **pure black** text and thick black
+borders, **one loud accent** (default electric blue), oversized mono + bold grotesk type
+(often UPPERCASE), hard **offset shadows (no blur)**, exposed grid lines, blocky buttons that
+press, and the occasional scrolling marquee. Confident, memorable, structural — never soft,
+gradient-y, or glassy. (Default raw light; an inverted dark mode is included. Siblings: the
+other `*-design-system` skills.)
+
+## Anti-patterns (never ship these)
+
+Outdated startup designs · Bootstrap/template look · generic soft SaaS layouts · poor
+typography · weak visual hierarchy · **gradients/overloaded gradients · glassmorphism · soft
+blurred drop shadows · rounded "friendly" everything (brutalism is flat/hard-edged)** · poor
+accessibility · inconsistent spacing · **borders or dividers BETWEEN sections (use inverted
+color blocks instead) · low-contrast accent text · single-page sites or thin pages with fewer
+than 10 sections · any framework/library in the shipped site · `.html` in URLs**. The result
+must feel like confident neo-brutalist tech — raw, bold, legible — never a soft generic template.
+
+## Verification checklist (run before finishing)
+
+0. **Multipage scale met:** the site has **> 15 pages** (≈20), each page has **≥ 10
+   sections** (≈12), and there are **no borders/dividers between sections** (sections are
+   separated by inverted full-bleed color blocks, not divider lines).
+0b. **Brutalist craft met:** stark color blocks; oversized mono/grotesk type; thick component
+   borders + hard **offset (un-blurred) shadows**; exposed grid; one loud accent; flat (no
+   gradients/glass).
+0c. **Pure vanilla + clean URLs:** zero frameworks/libraries; routes extensionless with a
+   working `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0d. **Nav + SEO:** blocky desktop nav/menu + mobile menu + breadcrumbs; per-page SEO + JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no scattered one-off hex.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; layout uses the exposed grid +
+   container widths — all from the companion files.
+3. Every section is a recognized layout; every component matches `component-library.md`.
+4. **Contrast is high** (a brutalist strength): body ≥ 4.5:1, large ≥ 3:1; accent text/fills
+   verified AA; visible (thick) focus; motion respects `prefers-reduced-motion`; semantics + alt.
+5. Fully responsive (360 → 1440+): blocks stack; oversized type clamps down; no horizontal
+   page scroll (except intentional marquees); tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; no gradients/glass/soft-shadows; sections are color blocks, not borders.
+7. Output feels like confident neo-brutalist tech — raw, bold, structural, and legible.