spirewise 1.7.1 → 1.9.0

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

@@ -0,0 +1,60 @@
+# Accessibility System — Apple Premium Minimal
+
+Light, minimal UIs fail accessibility most often on **low-contrast gray text** and
+**invisible focus**. This system bakes WCAG 2.1 AA into the look. Accessible *is* the
+premium standard here.
+
+## Color & contrast
+- **Body text ≥ 4.5:1**, large text (≥24px or ≥19px bold) and UI text **≥ 3:1**,
+  against its actual panel (white or `--bg-muted`). Use `--text-secondary`/
+  `--text-muted` for content — never `--text-faint` for real text (it's decorative).
+- **Non-text contrast ≥ 3:1** for interactive borders, icons, focus rings, controls.
+- **Don't encode meaning in color alone** — pair status color with an icon/label.
+  Links are the accent color **and** carry an affordance (underline on hover/in body).
+- **Gradient/low-contrast text is banned for body**; `--grad-text` only on large hero
+  display where it still clears 4.5:1 at its lightest stop.
+- Beware "premium light gray on white" — verify every gray meets AA before shipping.
+
+## Focus & keyboard
+- **Always-visible focus:** `:focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px }` on every interactive element. Never `outline:none` without a
+  replacement.
+- **Full keyboard operability:** all actions reachable/triggerable by keyboard; logical
+  tab order matches visual order; no keyboard traps (except intended modal focus-trap
+  with ESC to exit).
+- **Skip link** first in the DOM: "Skip to content" jumping to `#main`.
+- Menus, dropdowns, accordions, tabs, carousels support arrow keys where appropriate
+  with `aria-expanded`/`aria-selected`.
+
+## Semantics & structure
+- One `<h1>` per page; headings nest in order (size with CSS, don't skip levels).
+  Landmarks: `<header><nav><main id="main"><section><footer>`.
+- Buttons vs links: `<button>` for actions, `<a href>` for navigation.
+- Lists `<ul>/<ol>`; quotes `<blockquote><cite>`; code `<pre><code>`.
+- Accordions/tabs/toggles/menus use correct ARIA; prefer native elements over ARIA.
+
+## Media & motion
+- Every informative image has meaningful `alt`; decorative visuals (glows, mock chrome,
+  product parallax layers) are `aria-hidden="true"` / `alt=""`.
+- Honor `prefers-reduced-motion` (see motion-system): no essential info conveyed only
+  through animation; provide text equivalents for animated workflows/terminals.
+- No autoplaying audio/video with sound; provide controls; avoid flashing > 3x/sec.
+
+## Forms
+- Every input has a programmatic `<label>` (or `aria-label`); placeholders aren't
+  labels. Group related fields with `<fieldset><legend>`.
+- Errors described in text and linked via `aria-describedby`; focus moves to first
+  error. Required fields marked in text, not color alone.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px** with adequate spacing.
+- Content reflows to 320px with no horizontal scroll; respects 200% zoom.
+- Don't disable pinch-zoom (`user-scalable=no` is banned).
+
+## Checklist (run before finishing)
+1. All text/icons meet AA contrast on their real panel (check every gray).
+2. Visible focus on every interactive element; keyboard-complete; skip link present.
+3. Correct landmarks, one H1, ordered headings, native elements + minimal ARIA.
+4. Alt text on informative media; decorative media hidden; reduced-motion honored.
+5. Labelled, error-accessible forms.
+6. 44px targets, reflow to 320px, 200% zoom OK, zoom not disabled.

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

@@ -0,0 +1,100 @@
+# Color System — Apple Premium Minimal
+
+A light, premium, high-contrast palette with one restrained accent (default **Apple
+blue**). Sections separate via soft white↔gray panels + whitespace — **never borders**.
+All values are CSS custom properties; override only `--accent-*` to rebrand. Contrast
+targets: body text ≥ 4.5:1, large/secondary ≥ 3:1. An optional dark theme is included.
+
+## Tokens (`:root`)
+
+```css
+:root {
+  /* ---- Background panels (page + section alternation) ---- */
+  --bg-canvas:   #fbfbfd;  /* default page background (Apple off-white) */
+  --bg-white:    #ffffff;  /* white section panel */
+  --bg-muted:    #f5f5f7;  /* light-gray section panel (alternate with white) */
+  --bg-tint:     #f2f5ff;  /* very faint accent-tinted panel (rare) */
+
+  /* ---- Surfaces (cards on top of panels) ---- */
+  --surface:        #ffffff;  /* cards */
+  --surface-muted:  #f5f5f7;  /* subtle card / hover */
+  --surface-raised: #ffffff;  /* elevated card (with shadow) */
+  --surface-glass:  rgba(255,255,255,0.72); /* sticky nav glass (sparingly) */
+
+  /* ---- Text ramp (near-black → light gray) ---- */
+  --text-primary:   #1d1d1f;  /* headings + key text (Apple near-black) */
+  --text-secondary: #424245;  /* body */
+  --text-muted:     #6e6e73;  /* captions, meta (AA on white) */
+  --text-faint:     #86868b;  /* decorative/disabled — non-essential only */
+  --text-on-accent: #ffffff;  /* text on accent fills */
+
+  /* ---- Borders / hairlines (used on cards/inputs/dividers — NOT between sections) ---- */
+  --border-subtle:  rgba(0,0,0,0.06);
+  --border-default: rgba(0,0,0,0.10);
+  --border-strong:  rgba(0,0,0,0.16);
+  --ring:           #0071e3;  /* focus ring */
+
+  /* ---- Accent (the only brand color, used sparingly) ---- */
+  --accent:        #0071e3;  /* Apple blue — primary actions */
+  --accent-hover:  #0077ed;
+  --accent-press:  #006edb;
+  --accent-link:   #0066cc;  /* text links */
+  --accent-soft:   rgba(0,113,227,0.10); /* tinted backgrounds */
+
+  /* ---- Semantic (Apple system colors) ---- */
+  --success: #1d9d57;  --success-soft: rgba(29,157,87,0.12);
+  --warning: #b25e00;  --warning-soft: rgba(178,94,0,0.12);
+  --error:   #d70015;  --error-soft:   rgba(215,0,21,0.12);
+  --info:    #0071e3;  --info-soft:    rgba(0,113,227,0.12);
+
+  /* ---- Gradients (subtle, premium; rare) ---- */
+  --grad-soft:    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
+  --grad-accent:  linear-gradient(135deg, #0071e3 0%, #42a5ff 100%);
+  --grad-hero:    radial-gradient(60% 70% at 50% 0%, rgba(0,113,227,0.10) 0%, transparent 60%);
+  --grad-text:    linear-gradient(90deg, #1d1d1f 0%, #0071e3 100%);
+
+  /* ---- Elevation (soft, light-friendly) ---- */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
+  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
+}
+```
+
+## Palette roles
+
+- **Background palette** (`--bg-*`): full-bleed page/section fills. **Alternate
+  `--bg-white` and `--bg-muted`** between sections to separate them by color — but
+  **never put a border/line between sections.** `--bg-canvas` is the page root.
+- **Surface palette** (`--surface-*`): cards/panels raised on a section, with soft
+  shadow + large radius (Apple cards float on light gray). `--surface-glass` only for
+  the sticky nav.
+- **Text palette** (`--text-*`): keep the ramp — primary for headings, secondary for
+  body, muted for meta. Never use `--text-faint` for content that must be read.
+- **Border palette** (`--border-*`): hairlines for card/input edges and in-component
+  dividers only. Do **not** use borders to divide page sections.
+- **Accent palette** (`--accent*`): primary CTA, active states, links. One accent per
+  section as the "look here" signal; links use `--accent-link`.
+- **Gradient palette** (`--grad-*`): `--grad-hero` behind a hero; `--grad-soft` for a
+  gentle panel; `--grad-text` on one hero phrase — never whole paragraphs. Keep subtle.
+- **Success / Warning / Error / Info**: status, toasts, validation, badges only.
+
+## Usage rules
+
+1. **Light & calm.** White and `--bg-muted` dominate; the accent is a small spark.
+2. **Separate sections with color + space, not lines.** Alternate white/gray panels and
+   use big `--section-y` padding. No `border-top/bottom`, `<hr>`, or divider between
+   sections (mandatory).
+3. **Gradients are rare and soft.** At most one subtle gradient per section; never
+   rainbow or hard-stop (anti-pattern).
+4. **Hairlines, used sparingly.** Card/input borders use `--border-subtle/default`;
+   never heavy.
+5. **Always check contrast.** Body on white/`--bg-muted` ≥ 4.5:1 (`--text-secondary`+).
+   Accent fills pair with `--text-on-accent`.
+
+## Optional dark theme
+
+Apple ships dark too. Provide a `[data-theme="dark"]` block: `--bg-canvas:#000;
+--bg-white:#0b0b0d; --bg-muted:#1c1c1e; --text-primary:#f5f5f7;
+--text-secondary:#d2d2d7; --text-muted:#a1a1a6; --accent:#0a84ff;` and re-verify
+contrast. **Light is the default identity** for this system. (For a fully dark
+identity, use the `ai-dark-futuristic-design-system` skill instead.)

package/skills/apple-premium-minimal-design-system/component-library.md

@@ -0,0 +1,136 @@
+# Component Library — Apple Premium Minimal
+
+Specs for the 17 required components in the Apple premium-minimal idiom. Each: purpose,
+anatomy, tokens, states, responsive + a11y notes. Semantic HTML; shared tokens; **no
+borders between sections** (hairlines only inside cards/inputs).
+
+Shared button + card primitives used throughout:
+
+```css
+.btn { display:inline-flex; align-items:center; gap: var(--space-2);
+  font-weight:500; font-size:1rem; padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-pill); border:1px solid transparent; cursor:pointer;
+  transition: transform .2s ease, background .2s ease, opacity .2s ease; }
+.btn:active { transform: scale(0.98); }
+.btn-primary { background: var(--accent); color: var(--text-on-accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary { background: var(--surface-muted); color: var(--text-primary);
+  border-color: var(--border-default); }
+.btn-secondary:hover { background: #ececef; }
+.btn-text { background: transparent; color: var(--accent-link); padding-inline: 0;
+  border-radius: var(--radius-sm); }
+.btn-text::after { content: " ›"; }            /* Apple-style text link */
+.card { background: var(--surface); border:1px solid var(--border-subtle);
+  border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); }
+.card:hover { box-shadow: var(--shadow-md); }
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px; border-radius: var(--radius-sm); }
+```
+
+---
+
+## 1. Navbar (+ dropdown/mega-menu + breadcrumb)
+Sticky top bar, **glass** (`--surface-glass` + `backdrop-filter: blur(20px)`) — Apple's
+translucent nav. Anatomy: logo (left) · nav links (center) · primary CTA + "Sign in"
+text link (right) · mobile hamburger. Slim height; hairline at the very bottom edge
+only (optional). Links use **extensionless hrefs** (`/platform`, `/pricing`).
+**Dropdown/mega-menu:** top items open a clean multi-column panel of grouped links +
+short descriptions (white panel, soft shadow, large radius), built in **vanilla JS** —
+hover on desktop, click/tap to toggle, ESC + click-outside to close, `aria-haspopup`/
+`aria-expanded`, arrow-key nav. States: link hover muted→primary; active link
+`aria-current="page"`. Mobile: full-screen overlay, accordion sub-menus, focus-trap,
+ESC. **Breadcrumb** (docs/blog/case studies): `<nav aria-label="Breadcrumb"><ol>` of
+extensionless links, muted text, current page not linked.
+
+## 2. Hero
+Layout H-A (centered, default) or H-B split. Anatomy: eyebrow · big display H1
+(optional `--grad-text` on one word) · short `.lead` · CTA pair (primary + text link)
+· large centered product image/preview, optional soft `--grad-hero` glow + gentle
+scroll parallax. One H1, one primary CTA. a11y: real `<h1>`; decorative glow `aria-hidden`.
+
+## 3. Feature Grid
+`.grid.cols-3` (→2→1) of soft `.card`s: icon (simple line/duotone, no AI clichés) · H3
+· body. Optional `.btn-text` "Learn more". Hover: gentle shadow lift. Generous gaps.
+
+## 4. Bento Grid
+Asymmetric soft-card grid. `display:grid; grid-auto-rows: minmax(200px,auto)` with
+tiles spanning 1–2 cols/rows. Mix: one large product/preview tile + smaller stat/
+feature tiles. Large radii, soft shadows, plenty of internal padding. Collapse to one
+column on mobile. ≤ one subtle gradient across the whole grid.
+
+## 5. Testimonials
+Either a 3-up quote-card grid or a single large featured quote + author. Anatomy:
+quote (H3-ish, `--text-primary`) · avatar · name · role/company · optional logo.
+Optional carousel. a11y: `<blockquote>` + `<cite>`; carousel prev/next + `aria-roledescription`.
+
+## 6. Logos Section (social proof)
+"Trusted by" eyebrow + a clean row/grid of customer logos in neutral gray
+(`opacity:.55; filter: grayscale(1)`), darkening on hover. Optional slow pausable
+marquee. Lots of whitespace. a11y: each logo `<img alt="Company">`.
+
+## 7. Pricing
+Layout P-A/P-B. Tier `.card`: name · price (tabular-nums, large, semibold) · period ·
+feature list (check icons) · CTA. Highlighted tier: accent ring + soft shadow + "Most
+popular" pill. Monthly/annual toggle updates amounts. Enterprise = "Contact sales".
+a11y: toggle is a real `role="switch"`/radio; lists are `<ul>`.
+
+## 8. FAQ
+Layout Q-A accordion. Each item: `<button>` question (full-width, chevron) controlling
+a collapsible answer. Animate height/opacity. Hairline divider **within** the list is
+fine (this is a component, not a section break). a11y: `aria-expanded`, `aria-controls`.
+
+## 9. CTA
+Layout C-A: soft `--bg-muted` or white panel (no border), big centered H2, supporting
+line, primary + text-link CTA, generous air. Use `--section-y-lg`.
+
+## 10. Footer
+Layout FT-A: brand · 4–6 link columns (Product, Developers, Company, Resources, Legal)
+· locale + social · bottom legal row. Small gray text (`--text-muted`), generous space,
+white or `--bg-muted` panel; optional hairline at the very top edge only. a11y:
+`<footer>`, link lists in `<nav>`.
+
+## 11. Dashboard Preview
+A framed product screenshot/mock in a clean browser/app chrome (Layout D-A): light top
+bar, sidebar, content. Large radius, `--shadow-lg`, subtle float; often inside Hero or
+a feature section, sometimes with soft parallax. Real-looking data, not lorem.
+Decorative → `aria-hidden`; informative → alt text.
+
+## 12. Agent Workflow Section
+A clean step pipeline: nodes (steps) connected by thin connectors, each a soft `.card`
+with simple icon + label (e.g. Plan → Retrieve → Act → Verify). Animate sequential
+reveal on scroll. a11y: ordered `<ol>` text equivalent.
+
+## 13. Code Preview
+Mono code block in a `.card` with a light window header (filename tab, copy button).
+Subtle, low-saturation syntax tint (don't over-color). `--font-mono`, `--fs-small`,
+line-height 1.55, horizontal scroll on mobile. a11y: `<pre><code>`; copy button `aria-label`.
+
+## 14. Terminal Preview
+Clean terminal `.card` (light or near-white, Apple-Terminal-on-light feel): header with
+title, body with prompt lines; optional typewriter. Reduced-motion: show final state.
+a11y: real text, not an image.
+
+## 15. Trust Section
+Metrics band: 3–4 big numbers (tabular-nums, large semibold) + muted labels (uptime,
+customers, requests, latency). Lots of whitespace; accent on the numbers only. Animate
+count-up on reveal but render final value in DOM. a11y: numbers + labels as text.
+
+## 16. Security Section
+Enterprise security/compliance: badges (SOC 2, ISO 27001, GDPR, HIPAA) + short
+assurances (encryption, SSO/SAML, data residency, audit logs) in a clean icon list +
+`.btn-text` "Read our security docs". Calm, factual. a11y: badges have alt text.
+
+## 17. Enterprise Section
+"Built for enterprise" panel: value props (SSO, RBAC, SLAs, dedicated support,
+on-prem/VPC) in 2–3 columns + "Talk to sales" CTA and optional logo wall. Pairs with
+Security + Trust to close enterprise buyers. Soft panel, no border.
+
+---
+
+## Component rules
+- Compose from shared `.btn`/`.card`/tokens — no bespoke colors or radii per component.
+- Every interactive element has hover **and** `:focus-visible` states.
+- Every component is responsive to single-column by `md`/`sm`.
+- Decorative visuals are `aria-hidden`; informative ones have text equivalents.
+- Restraint: ≤ one subtle gradient per component; hairlines only inside cards/inputs/
+  in-component dividers — **never between page sections**.

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

@@ -0,0 +1,65 @@
+# Design Principles — Apple Premium Minimal
+
+The philosophy distilled from Apple plus premium-minimal peers (Linear, Stripe,
+Vercel, Notion) and modern AI sites (OpenAI, Anthropic, Perplexity).
+
+## The one-sentence philosophy
+
+**Clarity through restraint:** a light, calm canvas, enormous whitespace, big
+confident type, and one quiet accent — so the product and the message are the only
+things that matter on screen.
+
+## Core principles (Apple's lineage: clarity · deference · depth)
+
+1. **Clarity first.** Content is legible at every size; function drives the design.
+   Nothing decorative competes with the message.
+2. **Deference.** The UI gets out of the way — light backgrounds, minimal chrome,
+   subtle motion. The product imagery and copy are the heroes.
+3. **Depth without weight.** Convey hierarchy with **whitespace, scale, soft elevation,
+   and gentle background panels**, not boxes and borders.
+4. **Whitespace is the design.** Generous section padding and roomy line-height make
+   the page feel premium and effortless. Crowding reads as cheap.
+5. **Typography carries it.** Large, tight, semibold headlines + a clean body ramp do
+   most of the visual work. Most "interest" is type scale and air, not graphics.
+6. **One accent, used sparingly.** A single accent (default Apple blue) marks the
+   primary action and links. Everything else is neutral.
+7. **Hairlines, not boxes.** Use thin hairline borders only on cards/inputs/dividers
+   within a component — **never to separate sections**. Prefer space and a soft panel
+   color change.
+8. **Quiet, precise motion.** Smooth scroll reveals and subtle product parallax; short,
+   eased transitions. Nothing bounces or shouts. Always honor `prefers-reduced-motion`.
+9. **Centered, product-first layouts.** Big centered hero with the product front and
+   center; alternating focused sections below. Symmetry feels calm and premium.
+10. **Consistency over novelty.** Reuse tokens and components everywhere; restraint and
+    coherence beat clever one-offs.
+
+## Visual-hierarchy laws
+
+- **One H1 per page**, the largest thing on screen; everything steps down clearly.
+- **Contrast ladder:** primary text near-black, secondary mid-gray, tertiary lighter —
+  never three near-equal grays competing. Keep grays readable (AA).
+- **One primary CTA per viewport.** Secondary actions are quiet text/ghost links.
+- **Group by space + a soft panel**, not by drawing boxes around everything.
+- **Accent = importance.** Reserve the accent color for the single most important
+  action/link in a section.
+- **Center the key moment.** Heroes and big statements are centered; supporting detail
+  can use split or grid layouts.
+
+## Reference cues (what each does well)
+
+- **Apple:** giant bold headlines, huge whitespace, alternating white/gray panels,
+  product-centered heroes, smooth scroll/parallax, near-zero borders.
+- **Linear:** crisp minimal type, subtle gradients on dark/light, precise spacing.
+- **Stripe:** elegant light gradients, clean docs/dev aesthetic, refined motion.
+- **Vercel / Notion:** clean black-on-white minimalism, generous space, calm tone.
+- **OpenAI / Anthropic / Perplexity:** restraint, clarity, trust through simplicity.
+
+## Do / Don't
+
+**Do:** light airy canvas · soft white↔gray section panels · huge bold tight headlines ·
+one accent · hairline borders on cards only · generous spacing · smooth quiet motion ·
+big rounded buttons · real product imagery · visible focus states.
+
+**Don't:** borders/lines between sections · heavy gradients everywhere · glass
+overload · tiny low-contrast gray text · five competing CTAs · drop-shadow Bootstrap
+cards · clutter · stock "AI brain" clichés · motion that bounces or autoplays loudly.

package/skills/apple-premium-minimal-design-system/example-page-structures.md

@@ -0,0 +1,90 @@
+# Example Page Structures — Apple Premium Minimal
+
+Ready-to-assemble, section-by-section blueprints. Each section names a layout (see
+`layout-system.md`) and components (see `component-library.md`). Use them as skeletons;
+swap copy/data for the brand. Premium minimal: centered moments, alternating white ↔
+`--bg-muted` panels, generous space, **no borders between sections**.
+
+Legend: layout codes `H-*, F-*, P-*, C-*, Q-*, FT-*` · components by name.
+
+## MANDATORY: 15+ page site map (≈20), 10+ sections/page, clean URLs
+
+Always ship a **full multipage website with 15+ pages (≈20)** — never a single landing
+page. Every page carries **at least 10 sections (≈12)**, with **no borders/dividers
+between sections** (separate by whitespace + alternating white/muted panels). Pure
+HTML/CSS/vanilla JS, **extensionless URLs**. The required 20-page map:
+
+```
+/                Home              /customers      Customers
+/platform        Platform          /case-studies   Case Studies
+/solutions       Solutions         /developers     Developers
+/products        Products          /docs           Documentation  ← + DOC-A subpages
+/features        Features          /about          About
+/ai-agents       AI Agents         /careers        Careers
+/enterprise      Enterprise        /blog           Blog           ← + article pages
+/security        Security          /contact        Contact
+/pricing         Pricing           /partners       Partners
+                                   /resources      Resources   /faq  FAQ
+```
+
+Add product/solution/blog/doc subpages freely. Each blueprint below is a **10-section**
+skeleton — extend toward 12 per page, never fewer than 10. Every page must include:
+**Hero · Feature Sections · Product Highlights · Trust Signals · Testimonials · Use
+Cases · Statistics · Integrations · CTA · Footer.**
+
+---
+
+## 1. Home (default)
+1. **Navbar** (glass, sticky) — logo · Product/Solutions/Pricing/Docs · "Sign in" text link + "Get started" primary
+2. **Hero** `H-A` (centered) — eyebrow · big display H1 · short lead · primary + text-link CTA · large centered **Dashboard Preview**
+3. **Logos Section** — "Trusted by" neutral-gray logo row
+4. **Feature Sections** `F-B` alternating — 2–3 product stories (copy ↔ media), white/muted panels
+5. **Product Highlights** `F-C` bento — capabilities in soft tiles
+6. **Use Cases** `F-A` — 3-up audience/use-case cards
+7. **Statistics** — Trust Section metrics (count-up)
+8. **Testimonials** — featured quote + 3-up grid
+9. **Integrations** — logo/app grid + "See all integrations" text link
+10. **CTA** `C-A` + **Footer** `FT-A`
+
+## 2. Platform / Product pages
+1. Navbar · 2. **Hero** `H-A/H-B` (product centered) · 3. Feature story `F-B` · 4.
+**Product Highlights** bento · 5. **Dashboard/Code Preview** · 6. Use Cases · 7.
+Integrations · 8. **Statistics** · 9. Testimonials · 10. CTA + Footer
+
+## 3. Enterprise / Security
+1. Navbar · 2. **Hero** (outcome-led, "Book a demo") · 3. Logos · 4. Feature Sections
+`F-B` · 5. **Enterprise Section** (SSO/RBAC/SLAs/VPC) · 6. **Security Section** (SOC 2/
+ISO/GDPR/HIPAA) · 7. **Statistics**/ROI · 8. Testimonials (exec quotes) · 9. CTA `C-B`
+(contact form) · 10. Footer
+
+## 4. Developers / Documentation
+- **Developers:** Navbar · Hero `H-B` (copy + **Code/Terminal Preview**) · Logos ·
+  **Code Preview** (tabbed) · Product Highlights bento · Use Cases · Integrations ·
+  Statistics · CTA ("Read the docs" + "Get API key") · Footer (≥10).
+- **Docs:** Layout `DOC-A` three-pane (left nav · prose `--container-md` · right TOC),
+  sticky glass top bar with search, mono Code Previews, callouts, breadcrumb, prev/next.
+
+## 5. Pricing
+1. Navbar · 2. **Hero** (short, value-led) + monthly/annual toggle · 3. **Pricing**
+`P-A/P-B` · 4. Feature comparison grid · 5. **Enterprise** band · 6. Trust Signals
+(logos) · 7. **Statistics** · 8. Testimonials · 9. **FAQ** `Q-A` · 10. CTA + Footer
+
+## 6. Content pages (About, Careers, Customers, Case Studies, Blog, Partners, Resources, Contact, FAQ)
+Each still reaches **≥10 sections** by composing: Hero → relevant body sections
+(values/timeline, open roles, customer grid, story bento, article list, partner tiers,
+resource cards, contact form) → Trust Signals → Testimonials → Statistics →
+Integrations/partners → CTA → Footer. Pad with genuinely useful sections, never filler.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**. Never a single page or a thin page.
+- Keep the **rhythm**: hero → proof → feature stories → product/dev proof → trust →
+  social proof → pricing → FAQ → CTA → footer. Open with a strong centered hero, close
+  with one clear CTA.
+- **No borders/dividers between sections** — separate with whitespace + alternating
+  white ↔ `--bg-muted` panels. One layout + one idea per section.
+- Choose hero variant by content: product-centric → `H-A` centered; copy+preview →
+  `H-B` split; big visual → `H-C`.
+- Prefer real content; reach ≥10 sections with useful additions (FAQ, trust, security,
+  integrations, resources), never filler.

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

@@ -0,0 +1,89 @@
+# Layout & Grid System — Apple Premium Minimal
+
+A 12-column fluid grid + a set of canonical, reusable section layouts in the Apple
+premium-minimal idiom: centered heroes, focused alternating sections, soft panels,
+**no borders between sections**.
+
+## Grid
+
+```css
+:root { --grid-cols: 12; --grid-gap: clamp(20px, 2.4vw, 32px); }
+
+.grid { display: grid; gap: var(--grid-gap);
+        grid-template-columns: repeat(var(--grid-cols), 1fr); }
+
+/* Responsive helpers (mobile-first) */
+.cols-1 { grid-template-columns: 1fr; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
+@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }
+```
+
+Breakpoints: `sm 480` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1440`. Design
+mobile-first; collapse multi-column layouts to a single column by `md`.
+
+## Canonical section layouts
+
+### Hero layouts
+- **H-A Center stage (default, Apple signature):** centered eyebrow → big display H1 →
+  short lead → CTA pair (often text links "Learn more ›" + "Buy"/"Get started") →
+  large product image/preview centered below, optionally with soft parallax.
+- **H-B Split:** left = copy + CTAs (6 cols), right = product UI/preview (6 cols).
+  Collapses to stacked on `md`.
+- **H-C Full-bleed media:** short centered copy over/above a large full-width product
+  visual on a `--bg-muted` panel.
+
+### Feature layouts
+- **F-A 3-up cards:** `.grid.cols-3` of icon/title/text on soft cards.
+- **F-B Alternating rows:** copy ↔ media, flipping sides each row (Apple "feature
+  story" rhythm) — lots of whitespace between.
+- **F-C Bento grid:** asymmetric soft-card tiles of varying span (modern minimal).
+- **F-D Big statement:** one centered oversized headline + short line, minimal else
+  (Apple's full-viewport statement moments).
+
+### Pricing layouts
+- **P-A 3-tier:** `.grid.cols-3`, middle tier highlighted (accent + soft shadow,
+  "Most popular"). Monthly/annual toggle above.
+- **P-B 2-tier + enterprise:** two cards + a wide "Contact sales" enterprise panel.
+
+### CTA layouts
+- **C-A Centered band:** soft `--bg-muted` (or white) panel, big H2, one primary + one
+  text-link CTA, lots of air. Use `--section-y-lg`. No border.
+- **C-B Split CTA:** copy left, single action/form right.
+
+### FAQ layouts
+- **Q-A Accordion list** (single column, `--container-md`) — most common.
+- **Q-B Two-column** Q/A grid for many short items.
+
+### Footer layouts
+- **FT-A Mega footer:** brand + 4–6 link columns + legal row + locale/social. Apple-
+  style: small gray text, hairline only at the very top edge (optional), generous space.
+- **FT-B Minimal:** brand + condensed links + legal.
+
+### Dashboard / app layouts (for product/preview pages)
+- **D-A Shell:** left sidebar + top bar + content grid (inside Dashboard Preview and
+  product screenshots).
+
+### Documentation layouts
+- **DOC-A Three-pane:** left nav tree + center prose (`--container-md`) + right TOC;
+  mono code blocks; sticky nav; hairline dividers allowed *within* docs (not between
+  marketing sections).
+
+## Composition rules
+
+1. **Separate sections by panel color + space, NEVER borders.** Alternate `--bg-white`
+   and `--bg-muted` (add `.section--muted`) and rely on `--section-y` padding. No
+   `border-top/bottom`, `<hr>`, or divider element between sections.
+2. **Full-bleed panel, contained content:** sections span edge-to-edge with their panel
+   color; inner `.container` constrains content (often `--container-lg`/`xl`).
+3. **One layout + one idea per section.** Don't nest two complex layouts.
+4. **At least 10 sections per page**, and the **site has 15+ pages** — compose richly;
+   never a thin page or single-page site.
+5. **Rhythm:** Hero → social proof (logos) → feature stories (F-B/F-A) → product/dev
+   proof → testimonials/metrics → pricing → FAQ → final CTA → footer (extend to ≥10).
+6. **Vertical rhythm** comes from `--section-y`; horizontal from the 12-col grid +
+   `--gutter`. Never hand-tune one-off margins.
+7. **Center the key moments.** Heroes and big statements centered; detail can be split
+   or grid. Symmetry reads premium and calm.

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

@@ -0,0 +1,75 @@
+# Motion System — Apple Premium Minimal
+
+Smooth, quiet, precise. Motion in the Apple idiom is subtle scroll reveals, gentle
+product parallax, and short eased transitions — it elevates without distracting.
+Everything degrades gracefully under `prefers-reduced-motion`.
+
+Distilled from Apple (scroll-driven product reveals/parallax), Linear/Stripe (precise
+micro-interactions), and OpenAI/Anthropic/Perplexity (restraint).
+
+## Tokens
+
+```css
+:root {
+  --dur-fast: 150ms;   --dur-base: 250ms;  --dur-slow: 400ms;  --dur-slower: 700ms;
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* primary — soft decelerate */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1); /* Apple-like ease */
+}
+```
+
+## Principles
+1. **Smooth + eased.** Most transitions 150–400ms with `--ease-out`/`--ease-apple`.
+   Reserve 700ms for large scroll reveals/parallax.
+2. **Move a little.** Translate 8–24px, scale 1.0→1.02. Apple's product moves are
+   gentle and graceful, never snappy or bouncy.
+3. **Animate cheap properties:** `transform` + `opacity` only (GPU-friendly).
+4. **Purposeful + premium.** Motion reveals content, adds depth, or confirms an action.
+   No looping decoration.
+5. **One focal animation per viewport.** Calm, not busy.
+
+## Patterns
+
+- **Scroll reveal (signature):** elements start `opacity:0; translateY(20px)`, animate
+  to visible via `IntersectionObserver` adding `.in`, `--dur-slow`/`--dur-slower`
+  `--ease-out`, gentle **stagger** ~80–100ms. Reveal once.
+- **Product parallax:** hero/feature product image translates a few px slower than
+  scroll (subtle), or scales slightly as it enters. Disable for reduced motion/touch.
+- **Hover (cards/links):** soft shadow lift (`--shadow-sm`→`--shadow-md`) + optional
+  `translateY(-2px)` over `--dur-base`. Buttons: bg shift, `scale(0.98)` on press.
+- **Nav on scroll:** glass blur + faint bottom hairline appear after ~24px scroll.
+- **Section/page transitions:** soft cross-fade + small rise; no harsh wipes.
+- **Micro-interactions:** copy-button check swap, toggle slide, accordion height +
+  chevron rotate (`--dur-base`), tab underline slide.
+- **Count-up / typewriter:** Trust metrics count up on reveal; terminal types a
+  command. Always render the final value/text in the DOM.
+- **Marquee (logos):** slow, linear, infinite, **pausable on hover**; duplicate track.
+
+## Reduced motion (required)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.001ms !important;
+    animation-iteration-count:1 !important; transition-duration:.001ms !important;
+    scroll-behavior:auto !important; }
+}
+```
+Under reduced motion: reveal elements in their final state immediately, stop
+parallax/marquees/typewriters/count-ups at final values.
+
+## Minimal reveal JS (vanilla)
+
+```js
+const io = new IntersectionObserver((entries) => {
+  entries.forEach((e,i) => { if(e.isIntersecting){
+    e.target.style.transitionDelay = `${Math.min(i*90, 360)}ms`;
+    e.target.classList.add('in'); io.unobserve(e.target);
+  }});
+}, { threshold: 0.15 });
+document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(20px);
+  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+```