aiblueprint-cli 1.4.81 → 1.4.82

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/{commands/prompts/nextjs-add-prisma-db.md → skills/nextjs-add-prisma-db/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: nextjs-add-prisma-db
 description: Setup Prisma ORM with PostgreSQL in a Next.js project with schema, migrations, and seed data
 ---
 

package/agents-config/{commands/prompts/nextjs-setup-better-auth.md → skills/nextjs-setup-better-auth/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: nextjs-setup-better-auth
 description: Setup Better Auth with Email OTP authentication and shadcn/ui components in a Next.js project
 ---
 

package/agents-config/{commands/prompts/nextjs-setup-project.md → skills/nextjs-setup-project/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: nextjs-setup-project
 description: Setup a complete Next.js project with TypeScript, Tailwind, shadcn/ui, TanStack Query, and theme support
 ---
 

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/saas-challenge-idea.md → skills/saas-challenge-idea/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-challenge-idea
 description: Challenge and validate a business idea through competitive research and brutally honest market analysis
 ---
 

package/agents-config/{commands/prompts/saas-create-architecture.md → skills/saas-create-architecture/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-architecture
 description: Design technical architecture for a Next.js SaaS application based on PRD requirements
 ---
 

package/agents-config/{commands/prompts/saas-create-headline.md → skills/saas-create-headline/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-headline
 description: Generate clickbait headlines that sound too good to be true for your landing page
 arguments:
   - name: product-description

package/agents-config/{commands/prompts/saas-create-landing-copywritting.md → skills/saas-create-landing-copywritting/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-landing-copywritting
 description: Generate conversion-focused landing page copywriting based on PRD and marketing context
 ---
 

package/agents-config/{commands/prompts/saas-create-legals-docs.md → skills/saas-create-legals-docs/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-legals-docs
 description: Generate GDPR-compliant Privacy Policy and Terms of Service based on product and data practices
 ---
 

package/agents-config/{commands/prompts/saas-create-logos.md → skills/saas-create-logos/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-logos
 description: Generate 20 abstract SVG logo variations with brainstorming and HTML showcase
 arguments:
   - name: app-name

package/agents-config/{commands/prompts/saas-create-prd.md → skills/saas-create-prd/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-prd
 description: Create a lean Product Requirements Document through interactive discovery conversation
 ---
 
@@ -155,9 +156,9 @@ Explicitly NOT building in MVP:
 
 5. **Suggest next steps**:
    > "PRD created! Next steps in order:
-   > 1. `/prompts/saas-create-architecture` - Design technical architecture
-   > 2. `/prompts/saas-define-pricing` - Define pricing strategy
-   > 3. `/prompts/saas-create-landing-copy` - Create landing page copy"
+   > 1. `saas-create-architecture` skill - Design technical architecture
+   > 2. `saas-define-pricing` skill - Define pricing strategy
+   > 3. `saas-create-landing-copywritting` skill - Create landing page copy"
 </process>
 
 <constraints>

package/agents-config/{commands/prompts/saas-create-tasks.md → skills/saas-create-tasks/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-create-tasks
 description: Generate implementation task files from PRD and Architecture documents
 ---
 

package/agents-config/{commands/prompts/saas-define-pricing.md → skills/saas-define-pricing/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-define-pricing
 description: Create a data-driven SaaS pricing strategy with competitor research and value-based pricing
 ---
 

package/agents-config/{commands/prompts/saas-find-domain-name.md → skills/saas-find-domain-name/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-find-domain-name
 description: Generate and validate domain name options with availability checking for brand and utility domains
 ---
 

package/agents-config/{commands/prompts/saas-implement-landing-page.md → skills/saas-implement-landing-page/SKILL.md}

@@ -1,4 +1,5 @@
 ---
+name: saas-implement-landing-page
 description: Implement a production-ready landing page from specification using shadcn/ui components
 ---
 

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

@@ -1,3 +1,8 @@
+---
+name: setup-tmux
+description: Install and configure tmux with Ghostty on macOS using a minimalist keyboard-first setup.
+---
+
 Install and configure tmux with Ghostty on macOS. This sets up a minimalist tmux with direct keyboard shortcuts (no prefix needed for common actions), auto-naming tabs, session persistence, and a clean status bar.
 
 ## Step 1: Install tmux

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>