aiblueprint-cli 1.4.81 → 1.4.83

package/agents-config/skills/{appstore-connect-setup/SKILL.md → appstore-connect/references/setup.md}

@@ -1,12 +1,9 @@
----
-name: appstore-connect-setup
-description: Find and configure App Store Connect API credentials for asc auth. Use when asc auth is missing, credentials are unknown, the user says login to App Store Connect, or before TestFlight/App Store release work.
----
+# App Store Connect Setup (asc auth)
 
-# App Store Connect Setup
+Read this when `asc` is **not yet authenticated** — `asc auth status --validate` reports no working credential, the user asks to "log in to App Store Connect", or credentials are unknown before TestFlight/App Store release work.
 
 <objective>
-`asc auth login` needs three things: a **key ID**, an **issuer ID**, and a **.p8 private key file**. Users rarely remember where these are. This skill is a battle-tested workflow for finding all three without asking the user to dig through App Store Connect manually.
+`asc auth login` needs three things: a **key ID**, an **issuer ID**, and a **.p8 private key file**. Users rarely remember where these are. This is a battle-tested workflow for finding all three without asking the user to dig through App Store Connect manually.
 
 Key insight from a real session: the `.p8` files and key IDs live on disk, but the **issuer ID is almost never stored locally** — it only exists in the App Store Connect web UI. The trick is to read it from the user's already-signed-in browser session via CDP, since Apple login requires 2FA and cannot be automated.
 </objective>

package/agents-config/skills/environments-manager/SKILL.md

@@ -235,7 +235,7 @@ python3 -c "import json; json.load(open('.claude/settings.json'))"
 
 After the shared scripts are written, for each IDE selected in Step 2, load the matching reference file and apply only its linking config:
 
-- **Claude Code** → [references/claude.md](references/claude.md) - `.claude/settings.json` SessionStart hook + custom slash commands as actions.
+- **Claude Code** → [references/claude.md](references/claude.md) - `.claude/settings.json` worktree hooks + optional project action skills.
 - **Cursor** → [references/cursor.md](references/cursor.md) - `.cursor/worktrees.json` setup keys.
 - **Codex** → [references/codex.md](references/codex.md) - `.codex/environments/environment.toml` setup, cleanup, and actions.
 
@@ -256,11 +256,11 @@ examples/
 ├── claude/
 │   ├── .worktreeinclude           # native env-file copy list
 │   ├── settings.json              # WorktreeCreate + WorktreeRemove hooks
-│   └── commands/                  # optional slash-command actions
-│       ├── dev.md
-│       ├── typecheck.md
-│       ├── test.md
-│       └── lint.md
+├── skills/                        # optional project action skills
+│   ├── dev/SKILL.md
+│   ├── typecheck/SKILL.md
+│   ├── test/SKILL.md
+│   └── lint/SKILL.md
 ├── cursor/
 │   └── worktrees.json             # setup-worktree-unix -> scripts/worktree-up.sh
 └── codex/

package/agents-config/skills/environments-manager/examples/{claude/commands/dev.md → skills/dev/SKILL.md}

@@ -1,5 +1,6 @@
 ---
-description: Start the dev server on a free port
+name: dev
+description: Start the dev server on a free port for this project.
 ---
 
 Run `scripts/dev.sh` from the project root. Stream output until the dev server is listening, then return the URL.

package/agents-config/skills/environments-manager/examples/{claude/commands/lint.md → skills/lint/SKILL.md}

@@ -1,5 +1,6 @@
 ---
-description: Run the linter
+name: lint
+description: Run the linter for this project and report violations.
 ---
 
 Run the project's lint command (`pnpm lint:ci`, `bun run lint`, or equivalent). Report any violations.

package/agents-config/skills/environments-manager/examples/{claude/commands/test.md → skills/test/SKILL.md}

@@ -1,5 +1,6 @@
 ---
-description: Run unit tests
+name: test
+description: Run unit tests for this project and summarize failures.
 ---
 
 Run the project's unit test command (`pnpm test:ci`, `bun test`, or equivalent). Report failures with file:line references.

package/agents-config/skills/environments-manager/examples/{claude/commands/typecheck.md → skills/typecheck/SKILL.md}

@@ -1,5 +1,6 @@
 ---
-description: Typecheck the project
+name: typecheck
+description: Typecheck this project and report errors with file references.
 ---
 
 Run the project's typecheck command (`pnpm ts`, `bun run typecheck`, or equivalent based on the lockfile). Report any errors with file:line references.

package/agents-config/skills/environments-manager/references/claude.md

@@ -25,12 +25,13 @@ There is no separate `PostWorktreeCreate` hook (feature request #27744 is open).
 ```text
 .worktreeinclude                  # gitignore-syntax list of files to auto-copy
 .claude/
-├── settings.json                 # WorktreeCreate + WorktreeRemove hooks
-└── commands/                     # optional: per-action slash commands
-    ├── dev.md
-    ├── typecheck.md
-    ├── test.md
-    └── lint.md
+└── settings.json                 # WorktreeCreate + WorktreeRemove hooks
+.agents/
+└── skills/                       # optional: per-action project skills
+    ├── dev/SKILL.md
+    ├── typecheck/SKILL.md
+    ├── test/SKILL.md
+    └── lint/SKILL.md
 scripts/
 ├── claude-worktree-create.sh     # WorktreeCreate hook wrapper
 ├── claude-worktree-remove.sh     # WorktreeRemove hook wrapper
@@ -123,11 +124,14 @@ The `WorktreeCreate` hook **only fires for `claude --worktree` from the CLI**. T
 
 Also: **`.claude/settings.json` changes only take effect after restarting Claude.** A running session keeps the old hook config. Tell the user to restart before testing.
 
-## Custom Slash Commands as Actions (optional)
+## Project Action Skills (optional)
 
-Claude Code does not have a top-bar action menu. To expose the standard actions, write one file per action under `.claude/commands/`. Each is a tiny prompt that tells Claude to run the matching shared script or package-manager command.
+To expose standard project actions consistently, write one skill per action
+under `.agents/skills/<name>/SKILL.md`. Each skill tells the agent to run the
+matching shared script or package-manager command.
 
-See `examples/claude/commands/` for the four standard ones (`dev.md`, `typecheck.md`, `test.md`, `lint.md`).
+See `examples/skills/` for the four standard ones (`dev`, `typecheck`, `test`,
+`lint`).
 
 ## Guardrails
 

package/agents-config/skills/environments-manager/references/cursor.md

@@ -14,7 +14,7 @@ Three setup keys are supported (Cursor picks the first one that matches the host
 
 Cursor does **not** support a cleanup script. Cleanup is timer-based via global settings (`cursor.worktreeCleanupIntervalHours`, `cursor.worktreeMaxCount`). To get a real cleanup hook, expose `scripts/worktree-down.sh` as a project command the user runs manually before `/delete-worktree`.
 
-Built-in worktree slash commands the user already has: `/worktree`, `/best-of-n`, `/apply-worktree`, `/delete-worktree`.
+Cursor includes built-in worktree actions for creating, comparing, applying, and deleting worktrees.
 
 ## Environment Variables
 
@@ -72,7 +72,7 @@ Inline is fine for two-line setups. For anything more, use a script - the worktr
 
 - Do not put fragile multi-line setup inline. If it does not fit in two clean array entries, call the script.
 - Do not put `.cursor/worktrees.json` only in a worktree - it must be on the source checkout / main branch so future worktrees pick it up.
-- Do not rely on a cleanup hook - Cursor does not have one. Tell the user to run `scripts/worktree-down.sh` before `/delete-worktree`, or document it in the project README.
+- Do not rely on a cleanup hook - Cursor does not have one. Tell the user to run `scripts/worktree-down.sh` before deleting a worktree, or document it in the project README.
 - Do not use `$CURSOR_WORKTREE_PATH` - that variable is not documented and not guaranteed. Use `pwd` inside the worktree.
 
 ## Verification

package/agents-config/skills/ios-testflight/SKILL.md

@@ -34,7 +34,7 @@ The key insight: interactive `eas build` credential setup requires Apple ID 2FA
 The user must have (ask once, as a group — these cannot be created by the agent):
 
 1. **Apple Developer Program membership** (paid, enrolled).
-2. **App Store Connect API key**: the `AuthKey_<KEY_ID>.p8` file, its key ID, and the team issuer ID. If unknown, run the `appstore-connect-setup` skill, or point the user to App Store Connect > Users and Access > Integrations > App Store Connect API (key must have Admin or App Manager role).
+2. **App Store Connect API key**: the `AuthKey_<KEY_ID>.p8` file, its key ID, and the team issuer ID. If unknown, follow the `appstore-connect` skill's setup workflow (`references/setup.md`), or point the user to App Store Connect > Users and Access > Integrations > App Store Connect API (key must have Admin or App Manager role).
 3. **Expo account** logged in: `npx eas-cli@latest whoami` (else `npx eas-cli@latest login`).
 4. **App record in App Store Connect** for the bundle ID. The public API cannot create app records — if missing, the user creates it once at appstoreconnect.apple.com (My Apps > + > New App, selecting the bundle ID). Verify with Phase D step 1 and stop with clear instructions if absent.
 5. `asc` CLI installed (`brew install asc`) — used only for the final upload; everything else goes through `scripts/asc-api.mjs`.
@@ -47,7 +47,7 @@ The user must have (ask once, as a group — these cannot be created by the agen
 | `{bundle_id}` | `SiteConfig.bundleId` |
 | `{apple_team_id}` | `SiteConfig.appleTeamId` |
 | `{eas_project_id}` | output of `eas project:init`, then written to `site-config.ts` |
-| `{asc_key_id}` / `{asc_issuer_id}` / `{asc_p8_path}` | from the user / `appstore-connect-setup`. Never commit, never print. |
+| `{asc_key_id}` / `{asc_issuer_id}` / `{asc_p8_path}` | from the user / the `appstore-connect` skill's `references/setup.md`. Never commit, never print. |
 | `{convex_prod_url}` / `{convex_prod_site_url}` | from `npx convex deploy` output / Convex dashboard |
 | `{asc_app_id}` | numeric app ID resolved from the bundle ID (Phase D) |
 | `{build_mode}` | default `local`; `expo` only when the user passes `--expo` |

package/agents-config/{commands/prompts/prompt.md → skills/prompt/SKILL.md}

@@ -1,3 +1,8 @@
+---
+name: prompt
+description: Create minimalist SVG logo variations for an app after collecting logo direction from the user.
+---
+
 You are an expert logo designer. I want you to create minimalist SVG logo variations for my app.
 
 Use extended thinking to deeply analyze my app and create the best logos possible.

package/agents-config/{commands/prompts/tools.md → skills/tools/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: tools
 description: Reference document listing all recommended tools and libraries for AIBlueprint development
 ---
 

package/agents-config/skills/ultrathink/SKILL.md

@@ -25,7 +25,7 @@ Take a deep breath. We're not here to write code. We're here to make a dent in t
 
 ## Your Tools Are Instruments
 
-- Use bash tools, MCP servers, and custom commands like a virtuoso
+- Use bash tools, MCP servers, and reusable skills like a virtuoso
 - Git history tells the story—read it, learn from it, honor it
 - Multiple Claude instances aren't redundancy—they're collaboration between perspectives
 

package/agents-config/skills/use-style/SKILL.md

@@ -1,16 +1,16 @@
 ---
 name: use-style
-description: Apply named visual style guides to landing pages and UI. Use for $use-style, /usestyle, list styles, or styles like grid, vercel-simple, stripe, linear, raycast, gumroad, dusk, or split-auth.
+description: Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, /useskill, list styles, or styles like ios-app, grid, vercel-simple, stripe, linear, raycast, gumroad, dusk, luma, split-auth, or testspirite.
 ---
 
 Load and apply a named style before designing or implementing any UI.
 
 ## Invocation
 
-- Explicit: `$use-style grid`, `/usestyle split-auth`, `/usestyle list`, or "use the grid style"
-- Implicit: user references `/aiblueprint`, `/agents`, `/aibuilder`, "grid theme", Vercel, Geist, a minimalist dark tool UI, Stripe / fintech / checkout / dashboard UI, Linear / issue tracker / app-shell sidebar UI, NYT / newspaper / editorial / broadsheet / magazine layouts, Anthropic / Claude / warm cream AI-lab pages, Gumroad / neo-brutalist / loud commerce / bold yellow-pink pages, Raycast / glossy dark / glow gradients / floating glass nav / premium product marketing, or Dusk / Attio / dark CRM dashboard floating on a twilight backdrop / blue data viz / colorful category pills
+- Explicit: `$use-style ios-app`, `$use-style grid`, `/useskill split-auth`, `/useskill list`, or "use the grid style"
+- Implicit: user references NowStack Mobile, Ink & Spark, an iOS app shell, Expo / React Native / NativeWind app UI, `/aiblueprint`, `/agents`, `/aibuilder`, "grid theme", Vercel, Geist, a minimalist dark tool UI, Stripe / fintech / checkout / dashboard UI, Linear / issue tracker / app-shell sidebar UI, NYT / newspaper / editorial / broadsheet / magazine layouts, Anthropic / Claude / warm cream AI-lab pages, Gumroad / neo-brutalist / loud commerce / bold yellow-pink pages, Raycast / glossy dark / glow gradients / floating glass nav / premium product marketing, Dusk / Attio / dark CRM dashboard floating on a twilight backdrop / blue data viz / colorful category pills, Luma / lu.ma / event timeline / calendar / RSVP / discover / a dark consumer events-and-calendar app with photo-led cards, a top teal aurora, and a white pill button, or TestSprite / TestSpirite / calm light dev-tool dashboard / warm paper canvas with one forest-green accent / grouped sidebar + promo rail / isometric line-art empty states
 
-Parse the style name from `$ARGUMENTS` or the message. Treat `split-auth`, `signin 2pages`, `signin-2pages`, `sign-in 2 pages`, `auth split`, and `two-column auth` as `split-auth`. Treat `list`, `styles`, `available styles`, and missing style names with no implicit match as a request to list available styles and ask the user to choose before designing. Default to `grid` for Codelynx product landings. Default to `vercel-simple` when the user references Vercel, Geist, or minimalist dark developer tools. Default to `linear` when the user references Linear, an issue tracker, or a dense sidebar + list + detail app shell. Default to `new-york-times` when the user references a newspaper, broadsheet, magazine, or serif editorial layout. Default to `anthropic` when the user references Anthropic, Claude, or a warm cream + serif AI-lab aesthetic. Default to `gumroad` when the user references Gumroad, neo-brutalism, hard offset shadows, or a loud yellow/pink bordered look. Default to `raycast` when the user references Raycast, a glossy dark page with glow gradients, a floating glass nav, or premium dark product marketing. Default to `dusk` when the user references Attio, a dark CRM/data dashboard floating on a twilight/aurora backdrop, vivid-blue charts, or colorful category pills. Default to `split-auth` when the user asks for a polished login, sign-in, signup, OAuth, magic-code, or password-reset page with a two-panel visual layout.
+Parse the style name from `$ARGUMENTS` or the message. Treat `ios`, `ios app`, `ios-app`, `iphone app`, `nowstack-mobile`, `nowstack mobile`, and `ink & spark` as `ios-app`. Treat `split-auth`, `signin 2pages`, `signin-2pages`, `sign-in 2 pages`, `auth split`, and `two-column auth` as `split-auth`. Treat `testsprite`, `test-sprite`, and `test sprite` as `testspirite`. Treat `luma`, `lu.ma`, and `luma.com` as `luma`. Treat `list`, `styles`, `available styles`, and missing style names with no implicit match as a request to list available styles and ask the user to choose before designing. Default to `ios-app` when the user references NowStack Mobile, Ink & Spark, an iOS app shell, Expo, React Native, NativeWind, or OS-native tabs. Default to `grid` for Codelynx product landings. Default to `vercel-simple` when the user references Vercel, Geist, or minimalist dark developer tools. Default to `linear` when the user references Linear, an issue tracker, or a dense sidebar + list + detail app shell. Default to `new-york-times` when the user references a newspaper, broadsheet, magazine, or serif editorial layout. Default to `anthropic` when the user references Anthropic, Claude, or a warm cream + serif AI-lab aesthetic. Default to `gumroad` when the user references Gumroad, neo-brutalism, hard offset shadows, or a loud yellow/pink bordered look. Default to `raycast` when the user references Raycast, a glossy dark page with glow gradients, a floating glass nav, or premium dark product marketing. Default to `dusk` when the user references Attio, a dark CRM/data dashboard floating on a twilight/aurora backdrop, vivid-blue charts, or colorful category pills. Default to `split-auth` when the user asks for a polished login, sign-in, signup, OAuth, magic-code, or password-reset page with a two-panel visual layout. Default to `testspirite` when the user references TestSprite, a calm light dev-tool dashboard, a warm paper canvas with a single forest-green accent, a grouped sidebar with a free-trial/upgrade promo rail, or isometric line-art empty states. Default to `luma` when the user references Luma, lu.ma, an event timeline/feed, a calendar or RSVP/invite app, a discover page, or a dark consumer events UI with photo-led cards, a top teal aurora, and a white pill button.
 
 If the parsed style is `list`, or if no style can be inferred, do not load a style file. Reply with the available styles table below, add one short line asking which style to use, and stop until the user chooses.
 
@@ -28,6 +28,7 @@ If the parsed style is `list`, or if no style can be inferred, do not load a sty
 
 | Style | File | Vibe |
 |-------|------|------|
+| `ios-app` | `styles/ios-app.md` | NowStack Mobile Ink & Spark. iOS/Expo app UI with monochrome ink/paper, one yellow `#FFE040` spark, NativeWind tokens, OS-native tabs, flat hairline cards. |
 | `grid` | `styles/grid.md` | Blueprint landing. Square geometry, 1px borders, mono data, condensed display type. |
 | `vercel-simple` | `styles/vercel-simple.md` | Vercel dark mode. Black canvas, Geist + mono, 1px `#333` borders, minimal accent. |
 | `stripe` | `styles/stripe.md` | Stripe fintech UI. Pale `#f6f9fc` canvas, white cards on soft shadows, blurple `#635BFF` accent, green CTA, rounded geometry. |
@@ -37,7 +38,9 @@ If the parsed style is `list`, or if no style can be inferred, do not load a sty
 | `gumroad` | `styles/gumroad.md` | Loud neo-brutalist commerce. Yellow `#ffc900` + pink `#ff90e8`, thick black borders, hard offset shadows `4px 4px 0 #000`, flat fills, bold geometric sans, pill buttons. Light marketplace + dark dashboard surfaces. |
 | `raycast` | `styles/raycast.md` | Glossy dark product marketing. Near-black `#0a0a0a` + red `#ff6363` glow, floating glass nav (`backdrop-blur`), oversized bold pricing, large-radius `rounded-3xl` cards, soft glow over hard shadows. |
 | `dusk` | `styles/dusk.md` | Refined dark data app (Attio-style). Rounded near-black window floating on a twilight gradient backdrop, vivid sky-blue `#38bdf8` charts, `#3b6eff` primary, colorful category pills, Inter + mono numbers. |
+| `luma` | `styles/luma.md` | Dark consumer events + calendar app (Luma/lu.ma). Near-black `#0a0a0b` canvas with one soft teal aurora at the top, near-borderless `rounded-2xl` photo-led cards, white pill primary buttons, blue `#2f6bff` status pills, gold `#f5b13d` event times, centered timeline column. |
 | `split-auth` | `styles/split-auth.md` | Two-column auth and OAuth pages. Left visual brand panel with optimized bitmap background, right clean form panel, monochrome social buttons, compact code inputs. |
+| `testspirite` | `styles/testspirite.md` | Calm light dev-tool app shell (TestSprite). Warm paper-white `#f7f7f3` canvas, one forest-green `#3d7c4e` accent, grouped sidebar + promo rail, soft `rounded-xl` cards on quiet borders, pale-green `#eaf3ea` status pills, isometric line-art empty states. |
 
 Add new styles as `styles/<name>.md` and register them here.
 

package/agents-config/skills/use-style/examples/luma.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Events · Luma</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --bg:#0a0a0b; --surface:#161618; --raised:#202024; --high:#2a2a2e;
+    --fg:#f7f7f8; --body:#c6c6cb; --muted:#8c8c93; --subtle:#5e5e65;
+    --border:rgba(255,255,255,0.08); --border-soft:rgba(255,255,255,0.05);
+    --white:#fff; --white-fg:#0a0a0a;
+    --blue:#2f6bff; --gold:#f5b13d; --pos:#3ecf8e;
+    --sans:'Inter', -apple-system, system-ui, sans-serif;
+  }
+  * { box-sizing:border-box; margin:0; padding:0; }
+  html { -webkit-text-size-adjust:100%; }
+  body {
+    font-family:var(--sans); color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased;
+    min-height:100vh; padding-bottom:80px;
+    background:
+      radial-gradient(90% 32% at 50% 0%, rgba(40,82,96,.55) 0%, rgba(22,44,54,.18) 45%, transparent 72%),
+      var(--bg);
+    background-attachment:fixed;
+  }
+  .num { font-variant-numeric:tabular-nums; }
+  .wrap { max-width:860px; margin:0 auto; padding:0 20px; }
+
+  /* nav */
+  nav.top { display:flex; align-items:center; gap:26px; padding:18px 0; font-size:14px; }
+  nav.top a { display:flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; transition:color .15s; }
+  nav.top a:hover { color:var(--fg); }
+  nav.top a.active { color:var(--fg); font-weight:500; }
+  nav.top svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
+  nav.top .spacer { flex:1; }
+  .pill-btn { border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; border:none; }
+  .pill-btn.white { background:var(--white); color:var(--white-fg); }
+  .pill-btn.white:hover { opacity:.9; }
+
+  /* header */
+  .head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 36px; }
+  h1 { font-size:clamp(30px,5vw,40px); font-weight:700; letter-spacing:-0.025em; }
+  .toggle { display:inline-flex; border-radius:999px; background:var(--raised); padding:3px; font-size:14px; }
+  .toggle button { border:none; cursor:pointer; border-radius:999px; padding:7px 18px; color:var(--muted); background:transparent; font-family:inherit; font-size:14px; transition:color .15s; }
+  .toggle button.on { background:var(--high); color:var(--fg); font-weight:500; }
+
+  /* timeline */
+  .day { display:grid; grid-template-columns:104px 1fr; gap:18px; }
+  .day + .day { margin-top:36px; }
+  .rail { position:relative; padding-top:4px; }
+  .rail .date { font-size:17px; font-weight:600; letter-spacing:-0.01em; }
+  .rail .wd { font-size:14px; color:var(--muted); margin-top:1px; }
+  .rail .dot { position:absolute; right:-9px; top:8px; width:9px; height:9px; border-radius:999px; background:var(--blue); box-shadow:0 0 0 4px var(--bg); }
+  .rail .line { position:absolute; right:-5px; top:22px; bottom:-44px; border-left:1.5px dashed rgba(255,255,255,.14); }
+  .day:last-child .rail .line { display:none; }
+  .stack { display:flex; flex-direction:column; gap:12px; }
+
+  /* card */
+  .card { border:1px solid var(--border); background:var(--surface); border-radius:18px; padding:18px; transition:background .15s; }
+  .card:hover { background:#19191c; }
+  .card .row { display:flex; gap:16px; }
+  .card .info { min-width:0; flex:1; }
+  .time { font-size:14px; color:var(--muted); }
+  .time .g { color:var(--gold); font-weight:500; margin-left:4px; }
+  .card h3 { font-size:19px; font-weight:600; letter-spacing:-0.015em; margin-top:6px; line-height:1.25; }
+  .by { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--body); margin-top:10px; }
+  .loc { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); margin-top:5px; }
+  .loc svg, .by svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
+  .foot { display:flex; align-items:center; gap:10px; margin-top:14px; }
+
+  /* pills + avatars */
+  .pill { border-radius:999px; padding:4px 11px; font-size:12px; font-weight:500; }
+  .pill.invited { background:var(--blue); color:#fff; }
+  .pill.going { background:rgba(62,207,142,.15); color:var(--pos); }
+  .pill.pending { background:var(--raised); color:var(--muted); }
+  .avs { display:flex; align-items:center; }
+  .avs .a { width:24px; height:24px; border-radius:999px; box-shadow:0 0 0 2px var(--bg); margin-left:-7px; }
+  .avs .a:first-child { margin-left:0; }
+  .avs .more { margin-left:9px; border-radius:999px; background:var(--raised); color:var(--muted); font-size:12px; padding:2px 9px; }
+
+  /* cover thumb */
+  .cover { width:104px; height:104px; border-radius:14px; flex-shrink:0; position:relative; overflow:hidden; display:grid; place-items:center; }
+  .cover span { font-size:13px; font-weight:700; color:#fff; text-align:center; padding:8px; line-height:1.15; letter-spacing:-0.01em; text-shadow:0 1px 6px rgba(0,0,0,.35); }
+  @media (max-width:560px){ .cover{ width:84px; height:84px; } .day{ grid-template-columns:80px 1fr; } }
+
+  /* avatar gradients */
+  .g1{background:linear-gradient(135deg,#f0883e,#d65a5a);} .g2{background:linear-gradient(135deg,#3ecf8e,#2f9e6b);}
+  .g3{background:linear-gradient(135deg,#6b8cff,#2f6bff);} .g4{background:linear-gradient(135deg,#b07cf0,#7c4fd6);}
+  .g5{background:linear-gradient(135deg,#f5b13d,#e08a1e);} .g6{background:linear-gradient(135deg,#2dd4bf,#0d9488);}
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <!-- nav -->
+    <nav class="top">
+      <a class="active" href="#"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 11h18"/></svg> Events</a>
+      <a href="#"><svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></svg> Calendars</a>
+      <a href="#"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M15 9l-2 5-4 1 2-5z"/></svg> Discover</a>
+      <span class="spacer"></span>
+      <button class="pill-btn white">Create Event</button>
+    </nav>
+
+    <!-- header -->
+    <div class="head">
+      <h1>Events</h1>
+      <div class="toggle">
+        <button class="on">Upcoming</button>
+        <button>Past</button>
+      </div>
+    </div>
+
+    <!-- timeline -->
+    <!-- day -->
+    <div class="day">
+      <div class="rail">
+        <div class="date">Jun 22</div><div class="wd">Monday</div>
+        <span class="dot"></span><span class="line"></span>
+      </div>
+      <div class="stack">
+        <div class="card"><div class="row">
+          <div class="info">
+            <div class="time">3:30 AM<span class="g">· Jun 21, 6:30 PM PDT</span></div>
+            <h3>Founder DJ Party</h3>
+            <div class="by"><span class="a g1" style="width:20px;height:20px;border-radius:999px;display:inline-block"></span> By Founders on Tap &amp; Lyvia Chapman</div>
+            <div class="loc"><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> San Francisco, United States</div>
+            <div class="foot">
+              <span class="pill invited">Invited</span>
+              <div class="avs"><span class="a g2"></span><span class="a g3"></span><span class="a g4"></span><span class="more num">+132</span></div>
+            </div>
+          </div>
+          <div class="cover g1"><span>Founder<br>DJ Party</span></div>
+        </div></div>
+      </div>
+    </div>
+
+    <!-- day -->
+    <div class="day">
+      <div class="rail">
+        <div class="date">Jun 24</div><div class="wd">Wednesday</div>
+        <span class="dot"></span><span class="line"></span>
+      </div>
+      <div class="stack">
+        <div class="card"><div class="row">
+          <div class="info">
+            <div class="time">3:00 AM<span class="g">· Jun 23, 6:00 PM PDT</span></div>
+            <h3>Agents After Hours ft. Harvey, Reducto, and Browserbase</h3>
+            <div class="by"><span class="a g3" style="width:20px;height:20px;border-radius:999px;display:inline-block"></span> By Shrey Pandya, Browserbase, Yash Gupta &amp; Palak A…</div>
+            <div class="loc"><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> 1 Post St</div>
+            <div class="foot"><span class="pill invited">Invited</span></div>
+          </div>
+          <div class="cover g2"><span>Agents<br>After Hours</span></div>
+        </div></div>
+
+        <div class="card"><div class="row">
+          <div class="info">
+            <div class="time">9:00 PM<span class="g">· 12:00 PM PDT</span></div>
+            <h3>STAK Ventures: Speaker Series - VIP Lunch &amp; Learn</h3>
+            <div class="by"><span class="a g5" style="width:20px;height:20px;border-radius:999px;display:inline-block"></span> By Brian Sparkes</div>
+            <div class="loc"><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> STAK Space - 1920 Broadway</div>
+            <div class="foot">
+              <span class="pill going">Going</span>
+              <div class="avs"><span class="a g6"></span><span class="a g1"></span><span class="a g4"></span><span class="more num">+379</span></div>
+            </div>
+          </div>
+          <div class="cover g5"><span>STAK<br>Ventures</span></div>
+        </div></div>
+      </div>
+    </div>
+
+    <!-- day -->
+    <div class="day">
+      <div class="rail">
+        <div class="date">Jun 27</div><div class="wd">Saturday</div>
+        <span class="dot"></span><span class="line"></span>
+      </div>
+      <div class="stack">
+        <div class="card"><div class="row">
+          <div class="info">
+            <div class="time">5:30 PM<span class="g">· 8:30 AM PDT</span></div>
+            <h3>ExecuTorch with Meta &amp; Qualcomm @ The Web Data Loft</h3>
+            <div class="by"><span class="a g4" style="width:20px;height:20px;border-radius:999px;display:inline-block"></span> By Bright Data, lablab, Lauren Lunde &amp; Aaishika</div>
+            <div class="loc"><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> 625 2nd St</div>
+            <div class="foot">
+              <span class="pill invited">Invited</span>
+              <div class="avs"><span class="a g3"></span><span class="a g2"></span><span class="more num">+181</span></div>
+            </div>
+          </div>
+          <div class="cover g3"><span>ExecuTorch</span></div>
+        </div></div>
+      </div>
+    </div>
+
+    <!-- day -->
+    <div class="day">
+      <div class="rail">
+        <div class="date">Jun 30</div><div class="wd">Tuesday</div>
+        <span class="dot"></span><span class="line"></span>
+      </div>
+      <div class="stack">
+        <div class="card"><div class="row">
+          <div class="info">
+            <div class="time">3:00 AM<span class="g">· Jun 29, 6:00 PM PDT</span></div>
+            <h3>Model Independence Day</h3>
+            <div class="by"><span class="a g6" style="width:20px;height:20px;border-radius:999px;display:inline-block"></span> By Tereza Tížková</div>
+            <div class="loc"><svg viewBox="0 0 24 24"><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> San Francisco, United States</div>
+            <div class="foot">
+              <span class="pill pending">Going · Maybe</span>
+              <div class="avs"><span class="a g4"></span><span class="a g5"></span><span class="a g2"></span><span class="more num">+108</span></div>
+            </div>
+          </div>
+          <div class="cover g4"><span>Model<br>Independence</span></div>
+        </div></div>
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>