aiblueprint-cli 1.4.93 → 1.4.95

package/README.md

@@ -166,6 +166,7 @@ npx skills add Melvynx/aiblueprint --skill skill-manager
 | `nextjs-setup-project` | Set up a production-ready Next.js project |
 | `create-vitejs-app` | Create a Vite app with Tailwind and shadcn/ui |
 | `use-style` | Apply named UI style guides before implementation |
+| `use-artifacts` | Create polished local HTML plans, prototypes, and visualizations |
 | `rules-manager` | Create and maintain AGENTS.md and agent rule files |
 | `agents-managers` | Manage Claude Code agents and Task-tool orchestration |
 | `environments-manager` | Set up per-worktree agent environments |

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

@@ -67,12 +67,27 @@ Do not expose private chain-of-thought. Show public reasoning: conclusions, evid
 
 Always use `$use-style` before designing the artifact UI.
 
-Choose the style from the request. When the request has no visual direction,
-default to `black-grid`:
+When the artifact is for an existing application, the default style is that
+application's actual visual language. Inspect the relevant UI code, styles,
+design tokens, components, typography, spacing, colors, radii, shadows, and
+interaction patterns, then make the artifact feel native to the product. Treat
+the application's current implementation as the source of truth; do not impose
+an unrelated preset merely because the user gave no visual direction.
+
+Use the closest `$use-style` guide as supporting design guidance when useful,
+but adapt it to the application rather than replacing the application's style.
+Record the project-derived style in `HIGHLOGIC.md` and in `manifest.json` with a
+clear value such as `project:<app-name>`.
+
+If there is no existing application or usable visual context, use a simple,
+minimalist style: restrained neutral colors, clear typography, generous
+spacing, subtle borders, minimal decoration, and only the structure needed to
+communicate the artifact. In that case, use the closest preset below when it
+fits; otherwise use `black-grid` as the minimal technical fallback:
 
 - `anthropic`: Claude-like artifacts, writing/research surfaces, calm AI tools
 - `linear`: dense dashboards, admin tools, issue trackers, list/detail workflows
-- `black-grid`: default; developer utilities, technical plans, calculators, indexes, CLI-like tools
+- `black-grid`: minimal technical fallback for developer utilities, plans, calculators, indexes, and CLI-like tools
 - `grid`: blueprint/product landing pages, structured spec pages, Codelynx-flavored pages
 - `ios-app`: mobile app concepts, iPhone flows, Expo/React Native previews
 - `stripe`: billing, checkout, finance, pricing, account flows
@@ -83,18 +98,21 @@ default to `black-grid`:
 - `new-york-times`: editorial, newspaper, magazine, long-form reading
 - `testspirite`: calm light dev-tool dashboards with onboarding or empty states
 
-If no style is inferable and the user did not ask you to choose, use
-`black-grid` and state that choice briefly.
+If the user explicitly requests a visual direction, follow it even when it
+differs from the application. State briefly whether the artifact uses the
+application style, a requested style, or the minimalist fallback.
 
 ## Creation Workflow
 
 1. Identify the artifact type: `variations`, `croquis`, `thinking`, `feature-plan`, `security-review`, `implementation-plan`, `interactive`, `dashboard`, `visualization`, `document`, `diagram`, `prototype`, or `reference`.
-2. Pick the `use-style` style and load its file.
+2. Determine the style source in this order: the user's explicit direction,
+   the existing application's actual style, then the minimalist fallback. Load
+   the closest `use-style` file for supporting guidance.
 3. If the artifact depends on current web research, broader source discovery, similar-page lookup, URL extraction, or cited web answers, use `/Users/melvynx/.agents/skills/exa-search/SKILL.md`.
 4. Scaffold the workspace:
 
 ```bash
-python3 /Users/melvynx/.agents/skills/use-artifacts/scripts/create_artifact.py "<short title>" --style black-grid --kind thinking
+python3 /Users/melvynx/.agents/skills/use-artifacts/scripts/create_artifact.py "<short title>" --style "<requested, project:app-name, or fallback style>" --kind thinking
 ```
 
 5. Implement the artifact in `index.html`.

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

@@ -1,16 +1,16 @@
 ---
 name: use-style
-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.
+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, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.
 ---
 
 Load and apply a named style before designing or implementing any UI.
 
 ## Invocation
 
-- Explicit: `$use-style ios-app`, `$use-style grid`, `/useskill split-auth`, `/useskill list`, or "use the grid style"
+- Explicit: `$use-style ios-app`, `$use-style vercel`, `$use-style black-grid`, `/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 `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.
+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 `use-vercel`, `vercel style`, and `current vercel` as `vercel`. Treat `vercel-simple`, `old vercel`, `black grid`, and `black-grid` as `black-grid`. 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` when the user references Vercel, the Vercel dashboard, Geist, Vercel's changelog, or black infrastructure marketing with large editorial whitespace. Default to `black-grid` for austere monochrome developer tools, calculators, indexes, or line-driven data products. 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 `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.
 
@@ -30,7 +30,8 @@ If the parsed style is `list`, or if no style can be inferred, do not load a sty
 |-------|------|------|
 | `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. |
+| `vercel` | `styles/vercel.md` | Current Vercel product language. Black canvas, Geist Sans, hairline dashboard structure, dense deployment lists, vast editorial marketing space, restrained semantic color. |
+| `black-grid` | `styles/black-grid.md` | Austere monochrome developer tools. Black canvas, Geist + mono, sharp line-defined indexes and calculators, no decoration. |
 | `stripe` | `styles/stripe.md` | Stripe fintech UI. Pale `#f6f9fc` canvas, white cards on soft shadows, blurple `#635BFF` accent, green CTA, rounded geometry. |
 | `linear` | `styles/linear.md` | Linear app shell. Near-black `#08090a` canvas, dense aligned sidebar + list + detail panes, indigo `#5e6ad2` accent, Inter Display headings, quiet line-defined chrome. |
 | `new-york-times` | `styles/new-york-times.md` | Print-newspaper editorial. Paper-white, serif headlines (Cheltenham/Georgia), Franklin sans kickers, blackletter masthead, hairline rules, multi-column grid, red/blue accents only. |
@@ -39,7 +40,6 @@ If the parsed style is `list`, or if no style can be inferred, do not load a sty
 | `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.
@@ -54,4 +54,5 @@ Add new styles as `styles/<name>.md` and register them here.
 ## Related skills
 
 - `frontend-design` / `frontend-skill`: general UI craft. Defer to `use-style` when a named style is requested.
+- `use-feature`: reusable feature and UX implementation patterns that are not visual styles.
 - `impeccable`: polish pass after the style is applied.

package/agents-config/skills/use-style/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Use Style"
+  short_description: "Apply named visual style guides to landing pages, app..."
+  icon_small: "./assets/codex-icon.svg"
+  icon_large: "./assets/codex-icon.svg"
+  brand_color: "#02195C"
+  default_prompt: "Use $use-style to help with this task."

package/agents-config/skills/use-style/assets/codex-icon.svg

@@ -0,0 +1,19 @@
+<!-- @license lucide-static v1.24.0 - ISC -->
+<svg role="img" aria-label="use-style skill icon"
+  class="lucide lucide-palette"
+  xmlns="http://www.w3.org/2000/svg"
+  width="128"
+  height="128"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#F5F5F5"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" />
+  <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
+  <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
+  <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
+  <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
+</svg>

package/agents-config/skills/use-style/styles/{vercel-simple.md → black-grid.md}

@@ -1,8 +1,8 @@
-# Vercel Simple Style
+# Black Grid Style
 
 Minimal dark-mode developer UI. High contrast, line-driven structure, no decoration.
 
-**Reference vibe:** Vercel dashboard, blog, and data tools (take-home pay, country index).
+**Reference vibe:** austere black developer tools, country indexes, calculators, and line-driven data products.
 
 ---
 
@@ -319,4 +319,4 @@ When unsure, default to mono + sharp for new tool UIs, and sans + `rounded-lg` f
 
 ## Project overrides
 
-If the repo defines `.agents/styles/vercel-simple.md` or `.agents/styles/vercel-simple-theme.md`, prefer those tokens and components over this portable spec.
+If the repo defines `.agents/styles/black-grid.md` or `.agents/styles/black-grid-theme.md`, prefer those tokens and components over this portable spec.

package/agents-config/skills/use-style/styles/linear.md

@@ -327,8 +327,8 @@ Chart.defaults.color = "#8a8f98";
 |---------|-----|
 | Issue tracker, inbox, dashboard, settings, admin panel | Strong fit |
 | Tool with sidebar + list + detail panes | Strong fit |
-| Marketing landing / hero page | Poor fit - use `grid` or `vercel-simple` |
-| Data calculator / index of tools | Use `vercel-simple` (mono + sharp) |
+| Marketing landing / hero page | Poor fit - use `grid` or `vercel` |
+| Data calculator / index of tools | Use `black-grid` (mono + sharp) |
 
 Linear style is for **product app shells**. If the request is a marketing page, redirect to another style.
 

package/agents-config/skills/use-style/styles/luma.md

@@ -394,7 +394,7 @@ No drop shadows on cards - elevation is the fill step from `#0a0a0b` → `#16161
 | Consumer social/community product (dark) | Strong fit |
 | Dense analytics dashboard (KPIs, charts) | Poor fit - use `dusk` |
 | 3-pane issue tracker | Use `linear` |
-| Marketing hero / landing page | Use `raycast`, `grid`, or `vercel-simple` |
+| Marketing hero / landing page | Use `raycast`, `grid`, or `vercel` |
 
 Luma is for **dark consumer event/calendar/account app shells** built around a centered column and photo-led cards.
 

package/agents-config/skills/use-style/styles/raycast.md

@@ -261,7 +261,7 @@ Chart.defaults.color = "#6b6b6b";
 - Hover: subtle bg lift (`#1c1c1e → #242424`), border lighten, or a gentle glow bloom. No hard movement.
 - `backdrop-blur` on the floating nav and any glass surface.
 - `transition-colors duration-150`; the featured card may breathe a slow glow.
-- Avoid hard offset shadows (that's Gumroad), avoid flat-no-glow (that's vercel-simple). Raycast is glossy-soft.
+- Avoid hard offset shadows (that's Gumroad), avoid flat-no-glow (that's black-grid). Raycast is glossy-soft.
 
 ---
 

package/agents-config/skills/use-style/styles/stripe.md

@@ -10,7 +10,7 @@ Clean fintech product UI. Light, airy, trust-driven. Soft elevation over hard li
 
 - **Trust-first fintech.** Polished, premium, calm. Feels like money software, not a marketing funnel.
 - **Light canvas.** Off-white / pale blue background, white cards, dark navy ink.
-- **Soft elevation.** Subtle layered shadows define cards, NOT 1px borders. This is the key contrast with `grid` / `vercel-simple`.
+- **Soft elevation.** Subtle layered shadows define cards, NOT 1px borders. This is the key contrast with `grid` / `black-grid`.
 - **Rounded geometry.** `8px` cards, `6px` inputs/buttons, `radius-full` pills and avatars.
 - **Blurple accent.** `#635BFF` for primary actions, active states, links. Green (`#24B47E`) for success/confirm CTAs.
 - **Sans everywhere.** Clean grotesk (Inter / system / sohne). Mono only for card numbers, IDs, code.
@@ -331,7 +331,7 @@ Chart.defaults.color = "#697386";
 
 ## Motion & effects
 
-- Soft shadow IS the depth language - keep it; do not strip it like in `grid`/`vercel-simple`.
+- Soft shadow IS the depth language - keep it; do not strip it like in `grid`/`black-grid`.
 - Hover: slight bg shift (`#f7fafc`), darker fill on primary buttons, never scale-jump.
 - Focus: 3px blurple ring (`rgba(99,91,255,0.25)`) on inputs and focusable controls. Always visible.
 - `transition-colors duration-150` on interactive elements; `transition-shadow` on inputs.

package/agents-config/skills/use-style/styles/testspirite.md

@@ -369,7 +369,7 @@ Chart.defaults.color = "#8a8d84";
 | Dev-tool dashboard, test runner, monitoring, settings, plan/billing | Strong fit |
 | App shell with grouped sidebar + content + promo rail | Strong fit |
 | Onboarding / empty states with illustrated CTAs | Strong fit |
-| Marketing hero / landing page | Poor fit - use `grid`, `vercel-simple`, or `raycast` |
+| Marketing hero / landing page | Poor fit - use `grid`, `vercel`, or `raycast` |
 | Dense issue-tracker triage (3-pane) | Use `linear` |
 
 TestSpirite is for **calm light-mode product app shells**. If the request is a marketing page, redirect to another style.

package/agents-config/skills/use-style/styles/vercel.md

@@ -0,0 +1,162 @@
+# Vercel Style
+
+Current Vercel product language across the dashboard, marketing homepage, and changelog: exact black canvas, quiet gray hierarchy, Geist typography, hairline structure, and large editorial whitespace.
+
+## Core vibe
+
+- **Premium infrastructure, not a terminal theme.** Precise and technical, but polished enough for product marketing.
+- **Black is the canvas.** Use `#000`; lift app rows and cards only to `#0a0a0a` or `#111`.
+- **Hairlines create the interface.** Dividers and outlines are subtle `#262626`, never a visible grid motif.
+- **Typography carries the page.** Large, light-weight Geist headlines; compact medium labels; mono only for hashes, branches, metrics, and agent copy.
+- **Two density modes.** Dashboard surfaces are dense and aligned; marketing surfaces are extremely spacious and editorial.
+- **Mostly monochrome.** Color appears only in semantic status, deployment environment, avatars, and rare product imagery.
+
+## Palette
+
+| Role | Value | Usage |
+|---|---:|---|
+| Canvas | `#000000` | Global page and sidebar |
+| Surface | `#0a0a0a` | Rows, cards, inset dashboard regions |
+| Hover | `#171717` | Active nav, selected filter, row hover |
+| Primary text | `#ededed` | Headlines, names, primary values |
+| Secondary text | `#a1a1a1` | Metadata and descriptions |
+| Quiet text | `#666666` | Placeholders and low-priority labels |
+| Hairline | `#262626` | Borders and separators |
+| Strong hairline | `#333333` | Focus and hover outline |
+| White action | `#ededed` | Primary button fill |
+| Vercel blue | `#0070f3` | Production/environment state only |
+| Ready | `#45dec4` | Healthy deployment dot |
+| Error | `#f33a4a` | Error or blocked state |
+
+Keep at least 90% of the page black, gray, and white. Never introduce a decorative brand gradient.
+
+## Typography
+
+- Use `Geist, Arial, sans-serif`; use `Geist Mono, SFMono-Regular, monospace` only for technical metadata.
+- Marketing display: `clamp(3rem, 6vw, 5.5rem)`, `font-weight: 400`, `line-height: .92`, `letter-spacing: -.055em`.
+- Page heading: `text-4xl md:text-6xl`, regular weight, tight tracking.
+- Dashboard title and row labels: `14-16px`, medium weight.
+- Metadata: `13-14px`, muted; technical metadata may be mono.
+- Avoid uppercase everywhere. Reserve spaced uppercase mono for short agent/infrastructure statements.
+
+## Geometry
+
+| Element | Radius | Treatment |
+|---|---:|---|
+| Dashboard rows and large tables | `0-8px` outer only | Hairline separators; no individual floating cards |
+| Search and select controls | `8px` | Black fill, `1px` hairline |
+| Secondary buttons | `8px` | Black fill, subtle outline |
+| Primary buttons | `8px` | White fill, black text |
+| Status/environment chips | `999px` | Compact semantic pills |
+| Marketing article cards | `0` | Large near-black slabs, usually no visible radius |
+
+Do not make every element a pill. Pills are for status, compact filters, and identity chips only.
+
+## Dashboard composition
+
+- Use a fixed left sidebar around `240px`, a thin right border, and compact icon + label rows.
+- Put workspace switcher at the top and profile/utility controls at the bottom.
+- Use a slim top bar with context on the left, centered page title, and agent/product action on the right.
+- Place filters in one aligned horizontal row above a dense list or table.
+- Rows should be `56-72px` high with stable columns: title, status, environment, project, commit, branch, time, avatar.
+- Prefer one continuous bordered list over a collection of floating cards.
+- Selected navigation uses `#1f1f1f`; inactive items are gray with no container.
+
+```tsx
+<div className="min-h-screen bg-black text-[#ededed]">
+  <aside className="fixed inset-y-0 w-60 border-r border-[#262626]">...</aside>
+  <main className="ml-60 min-w-0">
+    <header className="h-16 border-b border-[#262626]">...</header>
+    <section className="p-6">...</section>
+  </main>
+</div>
+```
+
+## Marketing composition
+
+- Use a centered max-width around `1720px` with generous `48-96px` side padding.
+- Keep the header sparse: triangle mark, four quiet links, two outlined actions, avatar.
+- Hero sections should occupy most of the viewport and use three-part composition: oversized statement, restrained central visual, compact technical support copy.
+- Allow dramatic emptiness. Do not fill blank space with generic feature cards.
+- Customer marks may form a quiet monochrome baseline near the fold.
+- For changelogs/editorial indexes, use a large heading and category navigation, then a strict three-column grid of oversized story cards.
+- Featured story cards are tall, flat `#0a0a0a` slabs with title near the top and description/byline anchored near the bottom.
+
+## Signature imagery
+
+- The Vercel triangle may be used as a single focal object.
+- Render it monochrome, geometric, and centered; a soft white backlight is allowed behind the mark.
+- Glow belongs to the hero object only. Never add ambient purple/blue auroras, glass cards, or glossy gradients.
+- Product screenshots should retain true dashboard density instead of being simplified into decorative mockups.
+
+## Components
+
+### Buttons
+
+```tsx
+const primary = "rounded-lg bg-[#ededed] px-5 py-2.5 text-sm font-medium text-black hover:bg-white";
+const secondary = "rounded-lg border border-[#333] bg-black px-5 py-2.5 text-sm font-medium text-[#ededed] hover:bg-[#111]";
+```
+
+### Dashboard filter
+
+```tsx
+<button className="flex h-11 items-center gap-3 rounded-lg border border-[#262626] bg-black px-4 text-sm text-[#a1a1a1] hover:border-[#333]">
+  <Icon className="size-4" />
+  <span>All Environments</span>
+</button>
+```
+
+### Deployment row
+
+```tsx
+<div className="grid min-h-14 grid-cols-[minmax(280px,1fr)_160px_140px_160px_100px_120px_90px_28px] items-center gap-4 border-b border-[#262626] px-4 text-sm last:border-b-0 hover:bg-[#0a0a0a]">
+  <span className="truncate text-[#ededed]">fix: harden workflow compatibility</span>
+  <span className="flex items-center gap-2"><i className="size-2 rounded-full bg-[#45dec4]" />Ready</span>
+  <span className="w-fit rounded-full border border-[#262626] px-2.5 py-1">Production</span>
+  <span className="truncate">project-name</span>
+  <code className="text-[#a1a1a1]">f269f37</code>
+  <code className="truncate text-[#a1a1a1]">main</code>
+  <time className="text-right text-[#a1a1a1]">11h ago</time>
+  <Avatar />
+</div>
+```
+
+### Editorial card
+
+```tsx
+<article className="flex min-h-[510px] flex-col bg-[#0a0a0a] p-8">
+  <p className="text-sm text-[#a1a1a1]">30 June&nbsp;&nbsp; General</p>
+  <h2 className="mt-7 max-w-[18ch] text-4xl font-normal leading-tight tracking-[-0.04em]">Run any Dockerfile on Vercel</h2>
+  <div className="mt-auto space-y-7 text-[#a1a1a1]">...</div>
+</article>
+```
+
+## Motion
+
+- Use `120-180ms` color and border transitions.
+- No card lift, spring bounce, parallax, or ornamental motion.
+- Loading uses quiet skeleton slabs on `#111`.
+- A hero glow may breathe almost imperceptibly; respect reduced motion.
+
+## Responsive behavior
+
+- Collapse the sidebar to a drawer or icon rail below desktop.
+- Turn dashboard filter rows into horizontal overflow rather than wrapping unevenly.
+- Hide lower-priority table columns progressively; keep title, status, project, and time.
+- Marketing heroes stack text, visual, and support copy; preserve generous vertical space.
+- Changelog grids move from three columns to one without shrinking headline type excessively.
+
+## Anti-patterns
+
+- Do not add visible graph-paper grids, plus marks, coordinate labels, or blueprint decoration. That is `black-grid`.
+- Do not turn the style into a generic rounded-card SaaS dashboard.
+- Do not use neon gradients, glassmorphism, heavy shadows, or multiple glows.
+- Do not overuse mono or uppercase; current Vercel relies primarily on Geist Sans.
+- Do not outline every marketing section. Empty black space is part of the system.
+- Do not use blue as a general brand wash. Keep it semantic and sparse.
+- Do not replace dense dashboard lists with oversized cards.
+
+## Project overrides
+
+If the repo defines `.agents/styles/vercel.md` or `.agents/styles/vercel-theme.md`, prefer those tokens and components over this portable spec.

package/dist/cli.js

@@ -33019,6 +33019,13 @@ async function updateSettings(options, claudeDir) {
       };
     }
   }
+  if (!settings.env || typeof settings.env !== "object" || Array.isArray(settings.env)) {
+    settings.env = {};
+  }
+  if (settings.env.ANTHROPIC_DEFAULT_SONNET_MODEL === "claude-sonnet-4-6[1m]") {
+    delete settings.env.ANTHROPIC_DEFAULT_SONNET_MODEL;
+  }
+  settings.env.CLAUDE_CODE_DISABLE_1M_CONTEXT = "1";
   if (!settings.permissions) {
     settings.permissions = {};
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aiblueprint-cli",
-  "version": "1.4.93",
+  "version": "1.4.95",
   "description": "AIBlueprint CLI for setting up AI coding configurations",
   "author": "AIBlueprint",
   "license": "MIT",

package/agents-config/skills/use-style/examples/split-auth.html

@@ -1,366 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Split Auth Style Demo</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;800&display=swap" rel="stylesheet" />
-<style>
-  :root {
-    --bg:#ffffff;
-    --fg:#111216;
-    --muted:#747884;
-    --border:#dedfe5;
-    --soft:#f7f7f8;
-    --primary:#126fe0;
-    --primary-hover:#0f61c6;
-    --black:#050506;
-    --white:#ffffff;
-  }
-
-  * { box-sizing:border-box; margin:0; padding:0; }
-  html { -webkit-text-size-adjust:100%; }
-  body {
-    min-height:100vh;
-    font-family:Inter, ui-sans-serif, system-ui, sans-serif;
-    color:var(--fg);
-    background:var(--bg);
-    line-height:1.5;
-    -webkit-font-smoothing:antialiased;
-  }
-  button, input { font:inherit; }
-  a { color:inherit; }
-
-  .shell {
-    min-height:100vh;
-    display:grid;
-    grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);
-  }
-
-  .visual {
-    position:relative;
-    min-height:100vh;
-    overflow:hidden;
-    background:#030306;
-    color:var(--white);
-  }
-  .visual::before {
-    content:"";
-    position:absolute;
-    inset:-12%;
-    background:
-      radial-gradient(circle at 65% 38%, rgba(255,255,255,.30), transparent 9%),
-      radial-gradient(circle at 28% 70%, rgba(126,158,255,.32), transparent 10%),
-      linear-gradient(125deg, transparent 0 34%, rgba(255,255,255,.18) 46%, transparent 58%),
-      linear-gradient(150deg, transparent 0 42%, rgba(155,177,255,.20) 52%, transparent 66%),
-      #030306;
-    filter:blur(.2px) contrast(115%);
-  }
-  .visual::after {
-    content:"";
-    position:absolute;
-    inset:0;
-    background:
-      radial-gradient(circle at 20% 18%, rgba(255,255,255,.14), transparent 28%),
-      linear-gradient(180deg, rgba(4,6,12,.1), rgba(4,6,12,.86));
-  }
-  .visual-inner {
-    position:relative;
-    z-index:1;
-    min-height:100vh;
-    display:flex;
-    flex-direction:column;
-    justify-content:space-between;
-    padding:64px;
-  }
-
-  .brand {
-    display:flex;
-    align-items:center;
-    gap:12px;
-    width:max-content;
-    text-decoration:none;
-    font-size:20px;
-    font-weight:700;
-  }
-  .mark {
-    width:44px;
-    height:44px;
-    border:1px solid rgba(255,255,255,.22);
-    border-radius:14px;
-    display:grid;
-    place-items:center;
-    background:rgba(255,255,255,.10);
-    backdrop-filter:blur(18px);
-    box-shadow:0 16px 48px rgba(0,0,0,.26);
-  }
-  .mark svg { width:22px; height:22px; }
-
-  .story {
-    max-width:610px;
-  }
-  .story h1 {
-    max-width:10ch;
-    font-size:clamp(52px,5.5vw,82px);
-    line-height:1.01;
-    letter-spacing:-.05em;
-    font-weight:800;
-  }
-  .story p {
-    margin-top:26px;
-    max-width:510px;
-    color:rgba(255,255,255,.72);
-    font-size:19px;
-    line-height:1.7;
-  }
-  .visual-foot {
-    color:rgba(255,255,255,.45);
-    font-size:14px;
-  }
-
-  .auth {
-    min-height:100vh;
-    display:flex;
-    flex-direction:column;
-    background:var(--bg);
-  }
-  .topbar {
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    padding:32px 40px;
-  }
-  .mobile-brand {
-    display:none;
-    align-items:center;
-    gap:10px;
-    font-size:20px;
-    font-weight:700;
-  }
-  .mobile-brand .mark {
-    width:32px;
-    height:32px;
-    color:var(--fg);
-    border-color:var(--border);
-    background:var(--soft);
-    box-shadow:none;
-  }
-  .icon-button {
-    width:32px;
-    height:32px;
-    border:0;
-    border-radius:999px;
-    background:transparent;
-    color:var(--fg);
-    cursor:pointer;
-  }
-  .center {
-    flex:1;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    padding:20px 40px 72px;
-  }
-  .card {
-    width:100%;
-    max-width:420px;
-  }
-  .eyebrow {
-    color:var(--primary);
-    font-size:14px;
-    font-weight:700;
-    margin-bottom:12px;
-  }
-  .card h2 {
-    font-size:32px;
-    line-height:1.15;
-    letter-spacing:-.03em;
-    font-weight:750;
-  }
-  .sub {
-    margin-top:12px;
-    color:var(--muted);
-    font-size:15px;
-    line-height:1.65;
-  }
-  .form {
-    display:grid;
-    gap:16px;
-    margin-top:32px;
-  }
-  label {
-    display:grid;
-    gap:8px;
-    font-size:14px;
-    font-weight:650;
-  }
-  input {
-    height:44px;
-    width:100%;
-    border:1px solid var(--border);
-    border-radius:10px;
-    background:var(--bg);
-    color:var(--fg);
-    padding:0 14px;
-    outline:none;
-    transition:border-color .18s ease, box-shadow .18s ease;
-  }
-  input:focus {
-    border-color:rgba(18,111,224,.7);
-    box-shadow:0 0 0 3px rgba(18,111,224,.14);
-  }
-  .primary {
-    height:44px;
-    border:0;
-    border-radius:10px;
-    background:var(--primary);
-    color:var(--white);
-    font-weight:750;
-    cursor:pointer;
-  }
-  .primary:hover { background:var(--primary-hover); }
-
-  .divider {
-    display:flex;
-    align-items:center;
-    gap:24px;
-    margin:24px 0;
-    color:var(--fg);
-    font-size:15px;
-  }
-  .divider::before,
-  .divider::after {
-    content:"";
-    height:1px;
-    flex:1;
-    background:var(--border);
-  }
-
-  .socials {
-    display:grid;
-    gap:12px;
-  }
-  .social {
-    height:44px;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    gap:10px;
-    border:1px solid var(--black);
-    border-radius:10px;
-    background:var(--black);
-    color:var(--white);
-    font-weight:750;
-    cursor:pointer;
-  }
-  .social svg {
-    width:17px;
-    height:17px;
-    color:var(--white);
-  }
-  .switch {
-    margin-top:34px;
-    color:var(--muted);
-    font-size:14px;
-    text-align:center;
-  }
-  .switch a {
-    color:var(--fg);
-    font-weight:750;
-  }
-
-  @media (max-width:980px) {
-    .shell { grid-template-columns:1fr; }
-    .visual { display:none; }
-    .topbar { padding:20px; }
-    .mobile-brand { display:flex; }
-    .center {
-      align-items:flex-start;
-      padding:82px 20px 44px;
-    }
-    .card { max-width:100%; }
-  }
-  @media (max-width:430px) {
-    .center { padding-top:68px; }
-    .card h2 { font-size:30px; }
-  }
-</style>
-</head>
-<body>
-<main class="shell">
-  <section class="visual" aria-label="Brand panel">
-    <div class="visual-inner">
-      <a class="brand" href="#">
-        <span class="mark" aria-hidden="true">
-          <svg viewBox="0 0 24 24" fill="none">
-            <path d="M5 6h14M5 12h14M5 18h8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" />
-          </svg>
-        </span>
-        Product
-      </a>
-
-      <div class="story">
-        <h1>The calmer way to get back to work.</h1>
-        <p>Secure access for teams that want speed, clarity, and fewer distractions.</p>
-      </div>
-
-      <p class="visual-foot">Product</p>
-    </div>
-  </section>
-
-  <section class="auth">
-    <header class="topbar">
-      <div class="mobile-brand">
-        <span class="mark" aria-hidden="true">
-          <svg viewBox="0 0 24 24" fill="none">
-            <path d="M5 6h14M5 12h14M5 18h8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" />
-          </svg>
-        </span>
-        Product
-      </div>
-      <button class="icon-button" type="button" aria-label="Toggle theme">☼</button>
-    </header>
-
-    <div class="center">
-      <div class="card">
-        <p class="eyebrow">Welcome back</p>
-        <h2>Sign in to Product</h2>
-        <p class="sub">Use your email code or continue with a connected provider.</p>
-
-        <form class="form">
-          <label>
-            Email
-            <input type="email" value="you@example.com" autocomplete="email" />
-          </label>
-          <button class="primary" type="button">Send code</button>
-        </form>
-
-        <div class="divider">or</div>
-
-        <div class="socials">
-          <button class="social" type="button">
-            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path d="M12 .5A12 12 0 0 0 8.2 23.9c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.4-4-1.4-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1 .1.7 2.9 2.7 3.6-.3.1-.8.4-1 .8-.9-2.6-3.7-1.3-3.7-6 0-1.3.5-2.4 1.3-3.3-.1-.3-.6-1.7.1-3.4 0 0 1-.3 3.4 1.2a11.8 11.8 0 0 1 6.2 0C18 5.2 19 5.5 19 5.5c.7 1.7.2 3.1.1 3.4.8.9 1.3 2 1.3 3.3 0 4.8-2.9 5.8-5.6 6.1.5.4.9 1.2.9 2.4v3.6c0 .3.2.7.9.6A12 12 0 0 0 12 .5Z"/>
-            </svg>
-            Sign in with GitHub
-          </button>
-          <button class="social" type="button">
-            <svg viewBox="0 0 256 262" fill="currentColor" aria-hidden="true">
-              <path d="M255.9 133.5c0-10.7-.9-18.6-2.8-26.7H130.6v48.4h71.9c-1.5 12-9.3 30.2-26.7 42.4l-.2 1.6 38.8 30 2.7.3c24.6-22.8 38.8-56.3 38.8-96Z"/>
-              <path d="M130.6 261.1c35.2 0 64.8-11.6 86.4-31.6l-41.2-31.9c-11 7.7-25.8 13.1-45.2 13.1-34.5 0-63.8-22.8-74.3-54.3l-1.5.1-40.3 31.2-.5 1.5c21.5 42.6 65.6 71.9 116.6 71.9Z"/>
-              <path d="M56.3 156.4a80.4 80.4 0 0 1-.1-51.7l-.1-1.7-40.8-31.7-1.3.6A130 130 0 0 0 0 130.6c0 21 5.1 40.9 14 58.6l42.3-32.8Z"/>
-              <path d="M130.6 50.5c24.5 0 41 10.6 50.4 19.4l36.9-36C195.2 12.9 165.8 0 130.6 0 79.5 0 35.4 29.3 14 71.9l42.1 32.8c10.6-31.5 39.9-54.2 74.5-54.2Z"/>
-            </svg>
-            Sign in with Google
-          </button>
-        </div>
-
-        <p class="switch">No account yet? <a href="#">Create one</a></p>
-      </div>
-    </div>
-  </section>
-</main>
-</body>
-</html>

package/agents-config/skills/use-style/styles/split-auth.md

@@ -1,281 +0,0 @@
-# Split Auth Style
-
-Two-column authentication style for sign-in, signup, OAuth, magic-code, password reset, and account recovery screens. It is not a marketing homepage. It is a focused auth surface with a strong brand panel and a clean form panel.
-
-**Reference vibe:** premium SaaS auth page with a dark visual brand panel on the left and a quiet, high-clarity form on the right.
-
----
-
-## Core vibe
-
-- **Split auth layout.** Desktop is two panels: visual brand story on one side, form task on the other. Mobile hides the visual panel and keeps the form first.
-- **One strong bitmap.** Use a real optimized image or generated bitmap as the visual panel background. Avoid SVG-only decoration.
-- **Quiet form column.** The form panel is white or token-card colored, with no nested card shell unless the app design system requires it.
-- **Brand line, not feature list.** The visual panel gets one concise positioning line and one support sentence.
-- **Monochrome OAuth.** Social buttons are black with white text and white icons. Do not use colored Google marks here.
-- **Compact verification.** OTP/code inputs are centered, stable size, and never stretch across the form width.
-
----
-
-## Invocation aliases
-
-Use this style when the user says:
-
-- `/useskill split-auth`
-- `$use-style split-auth`
-- `use split-auth`
-- `/useskill signin 2pages`
-- `two-column auth`
-- `auth split`
-- `make the sign in page like the example`
-
-Normalize those to `split-auth`.
-
----
-
-## Layout
-
-### Desktop shell
-
-Use a full viewport grid. Left panel is visual, right panel is task.
-
-```tsx
-<main className="grid min-h-screen bg-background text-foreground lg:grid-cols-[minmax(0,1.08fr)_minmax(420px,0.92fr)]">
-  <section className="relative hidden overflow-hidden bg-black lg:block">
-    <div className="absolute inset-0 bg-cover bg-center" />
-    <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(7,9,15,0.18),rgba(7,9,15,0.78))]" />
-    <div className="relative flex h-full min-h-screen flex-col justify-between p-12 text-white xl:p-16">
-      {brand}
-      {positioning}
-      {footer}
-    </div>
-  </section>
-  <section className="flex min-h-screen flex-col bg-card">
-    <header className="flex items-center justify-between px-5 py-4 sm:px-8 lg:px-10 lg:py-8" />
-    <div className="flex flex-1 items-center justify-center px-5 pb-10 pt-4 sm:px-8 lg:px-10 lg:py-12">
-      <div className="w-full max-w-[420px]">{form}</div>
-    </div>
-  </section>
-</main>
-```
-
-### Mobile shell
-
-- Hide the visual panel with `hidden lg:block`.
-- Keep brand logo in the top form header.
-- Use `px-5`, a max width of the full viewport, and enough top spacing to avoid feeling cramped.
-- Do not show the bitmap as a mobile background unless it improves readability.
-
----
-
-## Visual panel
-
-### Background image
-
-Use one optimized bitmap:
-
-- Preferred formats: WebP or AVIF.
-- Target size: 1200-2200px wide for desktop visual panels.
-- Target weight: under 150 KB when possible.
-- If source is HEIC, PNG, or large JPG, convert before serving.
-- Use `background-size: cover` and `background-position: center`.
-
-### Overlay
-
-Add a dark overlay so white text stays readable:
-
-```tsx
-<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.18),transparent_28%),linear-gradient(180deg,rgba(7,9,15,0.18),rgba(7,9,15,0.78))]" />
-```
-
-### Brand lockup
-
-Small brand mark at the top, not a giant logo.
-
-```tsx
-<a className="flex w-fit items-center gap-3">
-  <span className="flex size-11 items-center justify-center rounded-xl border border-white/20 bg-white/10 shadow-lg shadow-black/20 backdrop-blur-md">
-    <Logo className="text-white" />
-  </span>
-  <span className="text-xl font-semibold">{Product}</span>
-</a>
-```
-
-### Positioning copy
-
-Use one direct brand line. Keep it literal and adapted to the product.
-
-Pattern examples:
-
-- `{Product} - the workspace your team finally enjoys.`
-- `{Product} - the calmer way to manage your work.`
-- `{Product} - everything important, without the noise.`
-
-Support copy examples:
-
-- `Access your workspace, pick up where you left off, and keep moving.`
-- `Secure sign-in for teams that need speed without clutter.`
-- `One account, one focused place for the work that matters.`
-
----
-
-## Form panel
-
-### Heading block
-
-```tsx
-<div className="space-y-3">
-  <p className="text-sm font-medium text-primary">Welcome back</p>
-  <div className="space-y-2">
-    <h1 className="text-3xl font-semibold leading-tight text-foreground">
-      Sign in to {Product}
-    </h1>
-    <p className="text-sm leading-6 text-muted-foreground">
-      Use your email code or continue with a connected provider.
-    </p>
-  </div>
-</div>
-```
-
-### Inputs
-
-- Height: 44px.
-- Radius: 8px or existing design-system `rounded-lg`.
-- Background: panel background or app token `bg-background`.
-- Label: small, medium, high contrast.
-- Placeholder: practical, not playful.
-
-```tsx
-<Input
-  placeholder="you@example.com"
-  autoComplete="email"
-  size="lg"
-  className="h-11 rounded-lg bg-background"
-/>
-```
-
-### Primary action
-
-Use the app primary color. Keep it full width and stable height.
-
-```tsx
-<LoadingButton className="h-11 w-full rounded-lg">Send code</LoadingButton>
-```
-
-### Social buttons
-
-All OAuth buttons use the same monochrome treatment:
-
-```tsx
-<button className="h-11 w-full rounded-lg border-black bg-black text-white hover:bg-black/90 hover:text-white">
-  <GithubIcon className="text-white" />
-  <span className="text-white">Sign in with GitHub</span>
-</button>
-```
-
-Rules:
-
-- Icon must be white.
-- Text must be white.
-- Do not use colored Google icon segments.
-- Button fill stays black in light mode and dark mode.
-- Use `currentColor` SVGs when possible.
-
-### Divider
-
-Use thin lines and a centered lowercase `or`.
-
-```tsx
-<div className="flex items-center gap-6 text-sm">
-  <div className="h-px flex-1 bg-border" />
-  <span>or</span>
-  <div className="h-px flex-1 bg-border" />
-</div>
-```
-
-### OTP/code state
-
-Persist code-entry state in the URL when the user can leave and return from an email app.
-
-```tsx
-await navigate({
-  to: '/auth/signin',
-  search: { email, step: 'otp' },
-  replace: true,
-});
-```
-
-Compact code inputs:
-
-```tsx
-<InputOTP maxLength={6} containerClassName="justify-center">
-  <InputOTPGroup>
-    <InputOTPSlot index={0} className="size-10 bg-background" />
-    <InputOTPSlot index={1} className="size-10 bg-background" />
-    <InputOTPSlot index={2} className="size-10 bg-background" />
-    <InputOTPSlot index={3} className="size-10 bg-background" />
-    <InputOTPSlot index={4} className="size-10 bg-background" />
-    <InputOTPSlot index={5} className="size-10 bg-background" />
-  </InputOTPGroup>
-</InputOTP>
-```
-
-Do not stretch OTP slots with `w-full justify-between`; that causes clipping on mobile.
-
----
-
-## Auth page variants
-
-### Sign in
-
-- Eyebrow: `Welcome back`
-- Title: `Sign in to {Product}`
-- Description: `Use your email code or continue with a connected provider.`
-- Primary action: `Send code`
-- Secondary: OAuth buttons
-- Footer link: `No account yet? Create one`
-
-### Signup
-
-- Eyebrow: `Create your account`
-- Title: `Sign up to {Product}`
-- Description: `We just need a few details to get you started.`
-- Footer link: `You already have an account? Sign in`
-
-### Password reset
-
-- Icon in small muted square.
-- Title: `Reset your password`
-- Description: `Enter your email and we will send you a reset link.`
-- Primary action: `Send reset link`
-
-### Verify email
-
-- Centered icon, title, and one sentence.
-- No card wrapper.
-- Keep it inside the shared form panel.
-
----
-
-## Anti-patterns
-
-- Do not add cards inside cards.
-- Do not use a marketing navbar on auth pages.
-- Do not use colored social icons in monochrome OAuth buttons.
-- Do not use stock-photo people unless the product specifically needs human trust imagery.
-- Do not put instructional text explaining how the UI works.
-- Do not use visible keyboard shortcut copy on auth pages.
-- Do not let OTP slots resize or shift on input.
-- Do not make the form column wider than 460px.
-
----
-
-## Review checklist
-
-- The layout has two panels on desktop and one clean form panel on mobile.
-- The image is optimized and loads from a browser-friendly format.
-- Social buttons have white icons and white text.
-- Form controls have stable heights and no layout shift.
-- OTP state survives reload, tab switching, and return from email app when relevant.
-- Text does not overlap the visual background or preceding content.
-- Mobile screenshot has no clipped inputs, buttons, or OTP slots.