aiblueprint-cli 1.4.92 → 1.4.94

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aiblueprint-cli",
-  "version": "1.4.92",
+  "version": "1.4.94",
   "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>