spirewise 1.7.1 → 1.8.0

package/skills/ai-dark-futuristic-design-system/spacing-system.md

@@ -0,0 +1,73 @@
+# Spacing System — Dark Futuristic
+
+A strict **4-point base / 8-point rhythm** scale. Generous space is the premium
+signal — sections breathe, content groups by proximity, nothing crowds.
+
+## 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 */
+  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px;
+  --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;
+
+  /* Containers */
+  --container-sm: 640px;   --container-md: 768px;  --container-lg: 1024px;
+  --container-xl: 1200px;  --container-2xl: 1320px;
+  --gutter: clamp(20px, 5vw, 48px);   /* page side padding */
+
+  /* Section rhythm (fluid) */
+  --section-y: clamp(64px, 8vw, 128px);   /* vertical padding per section */
+  --section-y-lg: clamp(96px, 12vw, 192px);/* hero / major sections */
+  --stack: clamp(16px, 2vw, 24px);         /* gap between stacked elements */
+}
+```
+
+## Usage map
+
+- **4-pt system** (`--space-1..6`): inside components — icon↔label, input padding,
+  badge padding, button padding (`--space-3 --space-6`), list-item gaps.
+- **8-pt system** (`--space-8..16`): between components — card internal gaps, form
+  rows, header↔body, gaps within a card grid.
+- **Container widths:** marketing content tops out at `--container-xl` (1200) to
+  `--container-2xl` (1320); long-form/docs prose at `--container-md` (768). Center
+  with `margin-inline:auto` + `padding-inline: var(--gutter)`.
+- **Section spacing:** every section gets `padding-block: var(--section-y)`; hero and
+  final CTA use `--section-y-lg`. This single rule creates the calm vertical rhythm.
+- **Card spacing:** padding `--space-6` (24) small, `--space-8` (32) default,
+  `--space-10` (40) feature cards; internal `--stack` between elements.
+- **Grid gaps:** `--space-6` (24) default; `--space-4` (16) dense bento; `--space-8`
+  (32) spacious feature rows.
+- **Component spacing:** label→control `--space-2`; field→field `--space-5`;
+  group→group `--space-8`.
+- **Page spacing:** sections stack with no extra margins and **no borders/dividers** —
+  `--section-y` padding alone separates them, all on one shared `--bg-900` background
+  (never alternate or change section background colors).
+
+## Rules
+
+1. **Only use scale values.** No arbitrary `13px`/`27px`. If you need a new size, pick
+   the nearest token.
+2. **Bigger viewport → more space.** The fluid `clamp()` tokens scale section padding
+   up on desktop and down on mobile automatically.
+3. **Proximity groups meaning.** Related items get small gaps; unrelated groups get a
+   full `--space-12`+ gap. Don't separate with borders when space will do.
+4. **Consistent radii by elevation:** inputs/badges `--radius-sm/md`; cards
+   `--radius-lg/xl`; modals/hero panels `--radius-2xl`; pills `--radius-pill`.
+5. **Whitespace > dividers.** Prefer space and surface changes over lines to separate.
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--gutter); }
+.section   { padding-block: var(--section-y); }
+.section--hero, .section--cta { padding-block: var(--section-y-lg); }
+.stack > * + * { margin-top: var(--stack); }   /* vertical rhythm utility */
+```

package/skills/ai-dark-futuristic-design-system/typography-system.md

@@ -0,0 +1,89 @@
+# Typography System — Dark Futuristic
+
+Large, tight, calm type carries the design. Modern grotesk sans for UI, optional
+mono for code/dev proof. Fluid scale so headings breathe on desktop and stay legible
+on mobile.
+
+## Fonts
+
+```css
+:root {
+  --font-sans: "Inter", "Geist", "General Sans", -apple-system, BlinkMacSystemFont,
+               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans);            /* or "Geist", "Satoshi" for more character */
+  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
+}
+```
+
+Recommendations by brand temperament:
+- **Calm / enterprise (OpenAI, Anthropic, Harvey, Sierra):** Inter / Geist.
+- **Sharp / product (Cursor, Linear-like):** Geist / Satoshi, tighter tracking.
+- **Expressive (Runway, Midjourney, Lovable):** a distinctive display face for H1
+  only; keep body neutral.
+- **Dev platforms (Replit, ElevenLabs, Scale):** pair sans with `--font-mono` in
+  code/terminal previews.
+
+## Fluid type scale (clamp)
+
+```css
+:root {
+  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);   /* 44 → 88px hero/display */
+  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* 36 → 60px */
+  --fs-h2:      clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);  /* 28 → 44px */
+  --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);/* 22 → 30px */
+  --fs-h4:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* 18 → 22px */
+  --fs-lead:    clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* 18 → 22px intro text */
+  --fs-body:    1rem;          /* 16px base */
+  --fs-body-lg: 1.125rem;      /* 18px */
+  --fs-small:   0.875rem;      /* 14px caption */
+  --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.02–1.05 | -0.02em to -0.03em | `--text-primary` (or `--grad-text` on 1 word) |
+| **H1** | `--fs-h1` | 600–700 | 1.06 | -0.02em | `--text-primary` |
+| **H2** (section) | `--fs-h2` | 600 | 1.1 | -0.015em | `--text-primary` |
+| **H3** | `--fs-h3` | 600 | 1.2 | -0.01em | `--text-primary` |
+| **H4 / overline** | `--fs-h4` | 600 | 1.25 | 0 | `--text-primary` |
+| **Eyebrow / label** | `--fs-micro` | 600 | 1.2 | 0.08em, UPPERCASE | `--accent` or `--text-muted` |
+| **Lead / subhead** | `--fs-lead` | 400–500 | 1.5 | 0 | `--text-secondary` |
+| **Body** | `--fs-body`/`-lg` | 400 | 1.6–1.7 | 0 | `--text-secondary` |
+| **Caption / meta** | `--fs-small` | 400–500 | 1.5 | 0 | `--text-muted` |
+| **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` on hover |
+| **Pricing amount** | `clamp(2.5rem,2rem+2vw,3.5rem)` | 700 | 1 | -0.02em | `--text-primary` |
+| **Code / terminal** | `--fs-small` | 400–500 | 1.6 | 0 | mono, syntax-tinted |
+
+## Rules
+
+1. **Tighten as it grows.** Bigger headings get tighter line-height and slightly
+   negative letter-spacing; body stays at 1.6–1.7 and 0 tracking.
+2. **Measure (line length) 60–75ch** for body; cap with `max-width: 65ch`.
+3. **Weights:** body 400, emphasis/UI 500–600, headings 600–700. Avoid 800/900 (reads
+   heavy on dark) and avoid <400 for body on dark (too thin).
+4. **One display moment per page** (the hero). Don't make every heading huge.
+5. **Gradient text** (`--grad-text`) on at most one hero phrase; never on body or
+   small text (hurts legibility/contrast).
+6. **Eyebrows** label sections (uppercase, tracked, small, accent/muted) above H2s.
+7. **Numbers/metrics** use tabular figures where available (`font-variant-numeric:
+   tabular-nums`) for stat rows and pricing.
+
+## Base CSS
+
+```css
+body { font-family: var(--font-sans); font-size: var(--fs-body);
+       line-height: 1.65; color: var(--text-secondary);
+       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+h1,h2,h3,h4 { color: var(--text-primary); font-family: var(--font-display);
+              text-wrap: balance; }
+h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.06; letter-spacing:-0.02em; }
+.eyebrow { font-size: var(--fs-micro); font-weight:600; letter-spacing:.08em;
+           text-transform:uppercase; color: var(--accent); }
+.lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: 60ch; }
+p { max-width: 65ch; }
+code, pre { font-family: var(--font-mono); }
+```

package/skills/ai-dark-futuristic-design-system/website-generation-rules.md

@@ -0,0 +1,220 @@
+# Website Generation Rules — Dark Futuristic
+
+How an agent turns this design system into a **production-ready, multi-page website**.
+Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design tokens.
+(The token/spec system can still be exported for other agents/stacks — see below — but
+the **generated website itself is always pure vanilla**.)
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything with **HTML5 + CSS3 + vanilla JavaScript only**. The generated site
+must contain **zero** of the following:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind ·
+> ❌ jQuery · ❌ any UI library · ❌ any CSS framework · ❌ any JS animation/utility library
+
+No build step, no npm dependencies, no CDN component kits. Everything — layout, motion,
+nav, accordions, tabs, carousels, mega-menus — is hand-written with native HTML/CSS/JS
+(Grid/Flexbox, custom properties, `IntersectionObserver`, etc.). Exporting **design
+tokens** (`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)** from the layouts/components.
+- **All sections share ONE background color** (`--bg-900`). Never alternate or vary
+  section backgrounds.
+- **No borders or dividers between sections** — separate with `--section-y` spacing
+  only. In CSS: one page background + `.section { background: transparent; border: 0; }`.
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`) — see
+  "Clean URLs & Vercel" below.
+
+## Required pages (build all of these — 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 must contain these — ≥10, recommend 12)
+Hero · Feature Sections · Product Highlights · Trust Signals (logos) · Testimonials ·
+Use Cases · Statistics · Integrations · CTA Sections · Footer. Add more from
+`component-library.md` (Security, Enterprise, Bento, Agent Workflow, Code/Terminal,
+Pricing, FAQ) to reach 12 and to fit the page's purpose.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups · NVIDIA-Inception-grade
+companies. Pick the page set + tone per type (see `example-page-structures.md`).
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page.
+- **CSS** — `tokens.css` (`:root` variables from color/typography/spacing) + `styles.css`
+  (base + components + utilities). No inline styles except dynamic values.
+- **JavaScript** — vanilla, progressive enhancement only (nav/mega-menu, accordion,
+  tabs, reveal, toggle, copy, carousel). The page must be readable/usable without JS.
+- **`vercel.json`** — clean-URL + routing config (see below).
+- **`sitemap.xml`** + **`robots.txt`** — for SEO.
+- **Design tokens** — also emit `tokens.json` (machine-readable) so other agents can
+  reuse the system in any stack. (Token export only — the site stays vanilla.)
+- **Component specifications** — when asked for the *system* (not a site), emit each
+  component's markup + token usage from `component-library.md`.
+- **Accessibility guidance** + **responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html           # served at /platform   (cleanUrls strips .html)
+├── solutions.html          # /solutions
+├── 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          # :root design tokens (single source of truth)
+│   └── styles.css          # base, components, utilities
+├── js/
+│   └── main.js             # nav/mega-menu, reveal, accordion, tabs, copy, carousel
+├── assets/                 # logos, images, icons (SVG preferred), og images
+├── tokens.json             # machine-readable tokens for other agents
+├── sitemap.xml             # all clean URLs
+├── robots.txt
+└── vercel.json             # cleanUrls + routing
+```
+Alternative (also fine): folder-per-page `platform/index.html` served at `/platform`.
+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. Internal
+  links and the nav use clean paths (`/`, `/platform`, `/pricing`, `/developers`…).
+- Emit **`vercel.json`** so `.html` is stripped, direct 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 the
+  `.html` form. (If using folder-per-page, the same config serves `/platform`.)
+- Provide a `404.html` for unknown routes. Ensure every nav/footer/internal link is
+  extensionless so production routing, refresh, and deep links all work.
+
+## Navigation system (build fully, in vanilla JS)
+- **Desktop nav** with **mega-menus**: hovering/clicking a top item (Platform,
+  Solutions, Products, Developers) opens a multi-column panel of links + descriptions
+  (glass surface, same tokens). Keyboard + `aria-expanded`/`aria-haspopup` support.
+- **Mobile nav**: full-screen overlay, accordion sub-menus, focus-trap, ESC to close.
+- **Multi-level navigation** (top item → mega-menu groups → links) and a **breadcrumb**
+  component on deep pages (docs, blog posts, case studies) using `aria-label="Breadcrumb"`.
+- Active route highlighted via `aria-current="page"`. See Navbar in `component-library.md`.
+
+## Hard rules
+1. **Vanilla only.** No frameworks/libraries of any kind in the shipped site (see
+   Technology stack). Hand-write all interactivity.
+2. **Tokens first, once.** Define all colors/type/spacing as `:root` variables in
+   `tokens.css`; every rule references them. **No scattered raw hex / px**. Rebrand =
+   change `--accent-*` only.
+3. **Mobile-first + responsive.** Author base styles for small screens; enhance up
+   with `min-width` media queries. Multi-column → single column by `md`. No horizontal
+   scroll at 320px.
+4. **Semantic + accessible.** Follow `accessibility-system.md` to the letter (landmarks,
+   one H1, focus-visible, alt text, labels, reduced motion). Non-negotiable.
+5. **One background, no section borders.** Every section uses the **same** background
+   (`--bg-900`) — never alternate fills — and there are **no borders/dividers between
+   sections**. Give `.section { background: transparent; border: 0; }` and let
+   `--section-y` padding create separation. Each section = inner `.container` + a
+   single recognized layout on the one continuous canvas.
+6. **Components from the library.** Reuse `.btn`/`.card` primitives and the 17 specs;
+   don't invent ad-hoc styles. Every component: responsive, accessible, reusable,
+   production-ready, animation-ready, dark-mode-optimized.
+7. **Restraint.** ≤ one prominent gradient and ≤ one glow per section; glass on ≤ 2
+   elements total; honor the 90/8/2 color split.
+8. **Performance:** system fonts or `font-display: swap`; SVG icons inline or sprite;
+   lazy-load below-the-fold images (`loading="lazy"`); animate only transform/opacity;
+   minimal JS, no libraries; target excellent Lighthouse (90+ perf/SEO/best-practices/a11y).
+9. **SEO on every page** (see SEO section): unique title + description, Open Graph +
+   Twitter cards, canonical, structured data, and a site `sitemap.xml` + `robots.txt`.
+10. **Real content, not lorem.** Use plausible, specific copy and data (metrics, code,
+    testimonials). Mark guesses `[PLACEHOLDER]`.
+11. **Self-verify** against the anti-patterns and every companion checklist before done.
+
+## SEO requirements (every page)
+- Unique **`<title>`** and **meta description** (150–160 chars).
+- **Open Graph** (`og:title/description/type/url/image`) and **Twitter card**
+  (`summary_large_image`) tags + an OG image in `assets/`.
+- **Canonical** URL (`<link rel="canonical" href="https://domain/path">`) using the
+  clean URL.
+- **Structured data** (JSON-LD): `Organization` + `WebSite` site-wide; `Product`,
+  `FAQPage`, `BreadcrumbList`, `Article` where relevant.
+- **`sitemap.xml`** listing all clean URLs + **`robots.txt`** referencing it.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, optimized/centralized CSS, lazy media, cached
+assets (via `vercel.json` headers), no blocking libraries — aim for enterprise-grade,
+high-Lighthouse results.
+
+## 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="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 + mega-menu (links extensionless: /platform, /pricing) --></header>
+  <main id="main"><!-- 10–12 sections, same bg, no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (one background, no section borders)
+```css
+html, body { background: var(--bg-900); }      /* single canvas for the whole page */
+.section { padding-block: var(--section-y);
+           background: transparent;             /* never alternate section fills */
+           border: 0; }                         /* no borders/dividers between sections */
+.section + .section { border-top: 0; }          /* explicitly: no rule between sections */
+/* Do NOT add <hr>, divider elements, or background-color changes between sections.
+   Separation = whitespace (--section-y), type, and card surfaces only. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bg": {"base":"#06070A","900":"#0A0C12","800":"#0F121A"},
+             "text": {"primary":"#F4F6FB","secondary":"#B6BDCC","muted":"#8A92A6"},
+             "accent": {"base":"#7C6BFF","2":"#22D3EE"} },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "md":"12px","lg":"16px","xl":"24px","pill":"999px" },
+  "type": { "display":"clamp(2.75rem,1.6rem + 5.6vw,5.5rem)", "body":"1rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), all on one shared `--bg-900`
+background with no borders/dividers between sections.** Pure HTML/CSS/vanilla JS (no
+frameworks/libraries); clean extensionless URLs with `vercel.json` (refresh + deep
+links work); full desktop mega-menu + mobile + breadcrumb nav; per-page SEO + sitemap;
+tokens centralized; fully responsive; AA accessible; quiet motion with reduced-motion
+fallback; high Lighthouse; zero anti-patterns; could sit next to OpenAI/Anthropic/
+Cursor/Perplexity/Linear/Vercel without looking out of place.

package/skills/apple-premium-minimal-design-system/README.md

@@ -0,0 +1,95 @@
+# apple-premium-minimal-design-system
+
+A world-class, **Apple-style premium minimal design system** for building elegant,
+light, spacious product and AI-startup websites — distilled from **Apple** plus
+premium-minimal peers (**Linear, Stripe, Vercel, Notion**) and modern AI sites
+(**OpenAI, Anthropic, Perplexity, Cursor**). It gives coding/design/UI/branding/
+website-generation agents a complete, reusable system so they can ship sites that
+visually compete with those references while staying accessible, responsive, and
+conversion-optimized.
+
+It also ships a **production website-generation framework**: 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.
+
+> 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.
+> For a fully **dark, futuristic** identity instead, use `ai-dark-futuristic-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s apple-premium-minimal-design-system          # pick agents + scope
+npx spirewise install -s apple-premium-minimal-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s apple-premium-minimal-design-system           # pick agents + scope
+npx spirewise remove -s apple-premium-minimal-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s apple-premium-minimal-design-system` and `./install.sh remove -s apple-premium-minimal-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Design an Apple-style premium minimal website for our product"
+> "Make it look like Apple/Linear/Stripe — clean and minimal"
+
+It reads the companion files, locks the tokens, composes layouts from the component
+library, applies motion + accessibility, and emits **pure HTML + CSS + vanilla JS +
+design tokens + `vercel.json` + `sitemap.xml`** into a `website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | Philosophy (clarity/deference/depth), hierarchy laws, do/don'ts |
+| `color-system.md` | Light premium palette + accent + (optional dark) as CSS variables |
+| `typography-system.md` | SF-style fonts, fluid type scale, weights, tracking, roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, generous section/card rhythm |
+| `layout-system.md` | 12-col grid + canonical section layouts |
+| `component-library.md` | Specs for all 17 components |
+| `motion-system.md` | Easing, durations, scroll reveals, parallax, micro-interactions |
+| `accessibility-system.md` | Contrast, focus, semantics, keyboard, reduced motion |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Section-by-section page blueprints per site type |
+
+## The look
+
+Light, airy canvas (white / `#fbfbfd`) with soft light-gray panels, near-black text, a
+restrained **Apple-blue** accent, big bold tight-tracked headlines, very generous
+whitespace, large radii, hairline-only borders (cards/inputs, never between sections),
+and smooth quiet scroll motion — premium, calm, product-first.
+
+## Components (17)
+
+Navbar · Hero · Feature Grid · Bento Grid · Testimonials · Logos · Pricing · FAQ · CTA
+· Footer · Dashboard Preview · Agent Workflow · Code Preview · Terminal Preview · Trust
+· Security · Enterprise.
+
+## Rules it enforces
+
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections per page (≈12)**,
+  and **no borders/dividers between sections** (separation by whitespace + alternating
+  white/muted panels).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; **no React/Vue/Angular/
+  Svelte/Bootstrap/Tailwind/jQuery/any UI or CSS library** and no build step.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), with `vercel.json`
+  (`cleanUrls`), `sitemap.xml`, and `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — desktop dropdowns, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD.
+- **Centralized tokens** (`:root`/`tokens.css` + optional `tokens.json`) — rebrand by
+  changing the accent only; no scattered hex/px.
+- **Accessible by default** — AA contrast (watch the grays), visible focus, semantics,
+  reduced motion.
+- **Restraint + whitespace** — premium minimal; ≤1 subtle gradient per section, hairlines
+  only inside cards. **Zero anti-patterns** — no template look, frameworks in the shipped
+  site, clutter, or low-contrast gray text.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/apple-premium-minimal-design-system/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: apple-premium-minimal-design-system
+description: >-
+  A world-class, Apple-style PREMIUM MINIMAL design system for building elegant,
+  light, spacious product and AI-startup websites — distilled from Apple plus
+  premium-minimal references (Linear, Stripe, Vercel, Notion, Family, Arc) and modern
+  AI sites (OpenAI, Anthropic, Perplexity, Cursor). It gives coding/design/UI/
+  branding/website-generation agents a complete, reusable system: design philosophy,
+  color/typography/spacing/grid/layout tokens, a 17-component library, a motion
+  system, accessibility + responsive rules, 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 "Apple-style website", "premium
+  minimal design", "clean elegant landing page", "make it look like Apple/Linear/
+  Stripe", or "a minimal design system / design tokens". The full system is baked into
+  the companion files in this folder (live research optional). Outputs a generated
+  site/system into a `website/` (or user-named) folder.
+---
+
+# Apple Premium Minimal Design System
+
+A complete, agent-ready design system for building **premium, minimal, light** product
+and AI-startup websites with the craft of **Apple** — clarity, deference, generous
+whitespace, big confident type, and quiet motion — alongside premium-minimal peers
+(Linear, Stripe, Vercel, Notion) and modern AI sites (OpenAI, Anthropic, Perplexity).
+
+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.
+
+## 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.** Separate sections with **whitespace, soft background
+   panels (white ↔ `--bg-muted`), elevation, and type hierarchy** — never a border.
+   (Unlike the dark system, Apple-minimal *may* alternate white and light-gray section
+   backgrounds — that's color, not a border — but never draw a line between 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.
+   (You may still export `tokens.json` for other agents — 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 (with dropdown/mega-menu where useful) +
+   mobile menu + breadcrumbs; per-page SEO (unique title/description, Open Graph,
+   Twitter card, canonical, JSON-LD). Every component: responsive, accessible,
+   reusable, production-ready, animation-ready.
+
+See `website-generation-rules.md` for the required page list, required sections, the
+`vercel.json`, navigation, and SEO specifics. Enforce in code: `.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 **premium and minimal** (Apple/Linear/Stripe energy) — for a product company, AI
+startup, developer platform, or enterprise SaaS — or producing **design tokens / a
+design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The philosophy, visual-hierarchy laws, and do/don'ts |
+| `color-system.md` | Light premium palettes + accent + (optional dark) as CSS variables |
+| `typography-system.md` | Fonts, fluid type scale, weights, tracking, roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, section/card rhythm |
+| `layout-system.md` | Grid + the canonical section layouts |
+| `component-library.md` | Specs for all 17 components |
+| `motion-system.md` | Easing, durations, hover/scroll/micro-interactions |
+| `accessibility-system.md` | Contrast, focus, motion, semantics, keyboard |
+| `website-generation-rules.md` | Pure-vanilla build: pages, sections, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Ready section-by-section 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 scales, spacing, 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 — then fold it in.
+
+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.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (product / SaaS / dev platform / enterprise / AI),
+   brand accent (or use the default Apple blue), 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`).
+   Override only the accent to match the brand.
+3. **Compose layouts:** pick section layouts from `layout-system.md` /
+   `example-page-structures.md`; assemble components from `component-library.md`.
+4. **Apply motion + a11y:** add interactions per `motion-system.md`, gated by
+   `prefers-reduced-motion`; meet every rule in `accessibility-system.md`.
+5. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic,
+   responsive **pure HTML + CSS + vanilla JS** (no frameworks/libraries) plus design
+   tokens, `vercel.json` (clean URLs), `sitemap.xml`, and `robots.txt`.
+6. **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, no
+  inter-section borders), linked with **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` (the `:root` design tokens) + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav, motion, interactions — progressively enhanced)
+- `website/vercel.json` (clean-URL routing), `website/sitemap.xml`, `website/robots.txt`
+- `website/tokens.json` (machine-readable tokens for other agents)
+
+When the user only wants the **system** (not a site), emit the tokens + component
+specs as files/snippets they can drop into any stack.
+
+## Default look (baked-in identity)
+
+Light, airy canvas (white / `#fbfbfd`) with soft light-gray panels, near-black
+high-contrast text, one restrained **Apple-blue** accent, big bold tight-tracked
+headlines, very generous whitespace, large radii, hairline-only borders (on cards/
+inputs, never between sections), and smooth, quiet scroll motion. Premium, calm,
+product-first — never busy, neon, or template-looking.
+
+## Anti-patterns (never ship these)
+
+Outdated startup designs · Bootstrap/ThemeForest/WordPress-template look · generic SaaS
+or old-startup templates · poor typography · weak visual hierarchy · overloaded
+gradients · excessive glassmorphism · poor accessibility · inconsistent spacing ·
+**borders or dividers between sections · single-page sites or thin pages with fewer
+than 10 sections · any framework/library in the shipped site (React/Vue/Tailwind/
+Bootstrap/jQuery/…) · `.html` in URLs · clutter or low-contrast gray text**. The result
+must feel like Apple/Linear/Stripe/Vercel — never like a 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**.
+0b. **Pure vanilla + clean URLs:** zero frameworks/libraries; all routes extensionless
+   with a working `vercel.json` (`cleanUrls`), `sitemap.xml`, and `robots.txt`; refresh
+   + deep links resolve.
+0c. **Nav + SEO:** desktop nav/dropdowns + mobile menu + breadcrumbs; every page has a
+   unique title/description, Open Graph + Twitter card, canonical, and JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no hard-coded one-off hex
+   values scattered through the markup.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; layout uses the grid +
+   container widths — all from the companion files.
+3. Every section is a recognized layout; every component matches `component-library.md`.
+4. Body text ≥ 4.5:1 contrast, large text ≥ 3:1; visible focus states; motion respects
+   `prefers-reduced-motion`; semantic landmarks + alt text present.
+5. Fully responsive (360 → 1440+), no horizontal scroll, tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; effects restrained; whitespace generous; hierarchy clear.
+7. Output looks like it belongs next to Apple/Linear/Stripe — premium, minimal, calm,
+   and conversion-focused.