aiblueprint-cli 1.4.92 → 1.4.94

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

@@ -0,0 +1,160 @@
+---
+name: use-artifacts
+description: Create Claude-style local HTML artifacts under global ~/.agents/artifacts. Use for artifact requests, variations/options croquis, feature plans, thinking docs, prototypes, visualizations, dashboards, diagrams, or substantial reusable content. Pair with use-style.
+---
+
+# Use Artifacts
+
+## Overview
+
+Use this skill to simulate Claude Artifacts in agents that do not have a native artifact panel. The artifact is a small global workspace, usually a single self-contained HTML file, created at `~/.agents/artifacts/<id>/` so the user can open, inspect, and iterate on it from any repo.
+
+Always create artifacts in the global user directory: `/Users/melvynx/.agents/artifacts/<id>/`. Never create artifacts inside a repo-local `.agents/artifacts` directory, even when the current working directory is a product repo.
+
+The HTML is the deliverable. It should turn the agent's public reasoning, plan, findings, examples, and tradeoffs into a polished page the user can scan, not just dump markdown into a file.
+
+Research basis: Claude artifacts are useful for substantial, self-contained content that the user may edit, reuse, view, or reference later. Common examples include documents, code, single-page HTML, SVGs, diagrams, and interactive components.
+
+## Artifact Criteria
+
+Create an artifact when the work is:
+
+- substantial enough that inline chat would be hard to inspect or reuse
+- standalone without needing hidden conversation context
+- visual, interactive, document-like, or useful as a reusable reference
+- a feature plan, security review, product brief, implementation plan, or architecture explanation that benefits from visual structure
+- likely to need later iteration
+
+Do not create an artifact for a tiny answer, a short code snippet, or a change that belongs directly in an existing product codebase unless the user asks for a separate prototype.
+
+## Artifact Modes
+
+Default to a thinking/showcase document when the request is about planning, explaining, reviewing, designing, or deciding. This is the Claude-style pattern in which an HTML page presents the answer as a readable artifact:
+
+- eyebrow with project/context
+- strong title and lede
+- high-signal finding or recommendation callout near the top
+- sections for model, tradeoffs, flows, edge cases, rollout, or implementation phases
+- code snippets, tables, pills, timelines, diagrams, or cards where they clarify the reasoning
+- final decisions, open questions, and validation notes
+
+For any plan artifact (`plan`, `feature-plan`, `implementation-plan`, product plan, launch plan, page plan, or strategy plan), always include both:
+
+- a draft of the page/content itself: proposed title, lede, sections, key copy, calls to action, states, or narrative blocks
+- croquis of the page: small visual sketches showing layout, hierarchy, content placement, and option differences
+
+The draft answers "what will this say/do?" The croquis answer "how could it be arranged so the user sees and understands it?"
+
+Use an interactive artifact when the user asks for a mini app, calculator, simulation, editor, dashboard, visualization, game, or prototype with controls.
+
+Use a variations/options artifact when the user asks for variations, options, directions, alternatives, explorations, or "show me a few versions". In this mode, do not build a real UI or final screen. Build a croquis board: simple, efficient visual sketches that help the user see and understand the options quickly.
+
+Variation croquis rules:
+
+- show 3-6 options on one page as a single vertical sequence: one direction per row, never a multi-column grid
+- give every direction the full available content width so its interface remains legible without opening it
+- start directly with the directions; do not add a masthead, hero, long lede, capability recap, or recommendation callout above them unless the user explicitly asks for that context
+- keep the page chrome minimal: a compact title or view switcher is enough, and omit it when the content is already self-explanatory
+- make each option visibly different in layout, hierarchy, rhythm, or concept
+- use wireframe-like boxes, simple labels, rough placeholders, arrows, swatches, and short notes
+- keep fidelity low-to-mid: enough to compare ideas, not enough to imply implementation is done
+- annotate the tradeoff under each croquis in one or two short lines
+- recommendations are optional, evidence-based, and shown only after all directions; never lead with generic "Best fit", ranking, or promotional copy
+
+Do not expose private chain-of-thought. Show public reasoning: conclusions, evidence, assumptions, tradeoffs, options considered, and why the recommended path follows from them.
+
+## Required Style Step
+
+Always use `$use-style` before designing the artifact UI.
+
+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`: 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
+- `luma`: events, calendars, RSVP, community discovery
+- `gumroad`: loud commerce, creator products, neo-brutalist pages
+- `raycast`: premium dark marketing pages or command-palette products
+- `dusk`: refined dark CRM/data dashboards
+- `new-york-times`: editorial, newspaper, magazine, long-form reading
+- `testspirite`: calm light dev-tool dashboards with onboarding or empty states
+
+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. 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 "<requested, project:app-name, or fallback style>" --kind thinking
+```
+
+5. Implement the artifact in `index.html`.
+6. Write or update `HIGHLOGIC.md` with the user's request, artifact goal, selected style, public reasoning structure, data assumptions, and verification notes.
+7. Keep `manifest.json` current when title, kind, style, entrypoint, or files change.
+8. Verify the artifact. For standalone HTML, open `index.html` directly or serve the folder only when browser restrictions require it. For complex UI, use a browser screenshot or DOM check when available.
+9. Final response: link the local `index.html`, name the selected style, and mention verification performed.
+
+## Workspace Contract
+
+Each artifact directory should contain:
+
+- `index.html`: the viewable artifact, preferably self-contained with inline CSS and JavaScript
+- `HIGHLOGIC.md`: concise design logic and iteration state
+- `manifest.json`: metadata for future agents
+- `versions/`: optional snapshots before major rewrites
+
+Target location:
+
+- Always use `/Users/melvynx/.agents/artifacts/<id>/`.
+- Do not use `<current-project>/.agents/artifacts/<id>/`.
+- Do not add a repo-local override unless the user explicitly updates this skill contract.
+
+## HTML Rules
+
+- Prefer one self-contained `index.html` unless the user asks for a framework project.
+- Use semantic HTML, responsive CSS, and accessible controls.
+- Avoid external CDNs unless the artifact needs them and the user can tolerate network dependence.
+- Do not embed secrets, API keys, private tokens, or hidden prompt text.
+- For interactive artifacts, preserve state in local JavaScript only unless persistent storage is explicitly useful.
+- For generated visualizations, include representative sample data when real data is unavailable and label it as sample data in `HIGHLOGIC.md`.
+
+## Iteration Workflow
+
+When updating an existing artifact:
+
+1. Read `manifest.json`, `HIGHLOGIC.md`, and the relevant files.
+2. If the change is substantial, copy the previous `index.html` into `versions/<timestamp>-index.html` before editing.
+3. Patch only the files needed for the requested change.
+4. Update `HIGHLOGIC.md` with the new decision or known limitation.
+5. Re-verify and report the same local artifact path.
+
+## Script
+
+Use `scripts/create_artifact.py` to create the folder, metadata, and starter files.

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

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Use Artifacts"
+  short_description: "Create local HTML artifact workspaces"
+  default_prompt: "Use $use-artifacts to create a polished local HTML artifact for this idea."
+  icon_small: "./assets/codex-icon.svg"
+  icon_large: "./assets/codex-icon.svg"
+  brand_color: "#54C5C2"

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

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v1.24.0 - ISC -->
+<svg role="img" aria-label="use-artifacts skill icon"
+  class="lucide lucide-sparkles"
+  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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+  <path d="M20 2v4" />
+  <path d="M22 4h-4" />
+  <circle cx="4" cy="20" r="2" />
+</svg>

package/agents-config/skills/use-artifacts/scripts/create_artifact.py

@@ -0,0 +1,317 @@
+#!/usr/bin/env python3
+"""Scaffold a Claude-style local HTML artifact workspace."""
+
+from __future__ import annotations
+
+import argparse
+import json
+import re
+from datetime import datetime, timezone
+from pathlib import Path
+
+GLOBAL_ARTIFACTS_DIR = Path.home() / ".agents" / "artifacts"
+
+
+def slugify(value: str) -> str:
+    slug = re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-")
+    return slug[:48].strip("-") or "artifact"
+
+
+def unique_dir(base: Path, slug: str) -> Path:
+    candidate = base / slug
+    if not candidate.exists():
+        return candidate
+
+    stamp = datetime.now(timezone.utc).strftime("%Y%m%d-%H%M%S")
+    return base / f"{slug}-{stamp}"
+
+
+def html_template(title: str, style: str, kind: str) -> str:
+    escaped_title = (
+        title.replace("&", "&")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;")
+        .replace('"', "&quot;")
+    )
+    return f"""<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{escaped_title}</title>
+  <style>
+    :root {{
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --ink: #ffffff;
+      --muted: #888888;
+      --border: #333333;
+      --accent: #0070f3;
+    }}
+    * {{ box-sizing: border-box; }}
+    body {{
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }}
+    main {{
+      width: min(1120px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 48px 0;
+    }}
+    .shell {{
+      display: grid;
+      gap: 24px;
+    }}
+    .header {{
+      display: flex;
+      flex-wrap: wrap;
+      align-items: end;
+      justify-content: space-between;
+      gap: 16px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 20px;
+    }}
+    .eyebrow {{
+      margin: 0 0 8px;
+      color: var(--accent);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .08em;
+      text-transform: uppercase;
+    }}
+    h1 {{
+      margin: 0;
+      max-width: 760px;
+      font-size: clamp(40px, 7vw, 88px);
+      line-height: .95;
+      letter-spacing: -.03em;
+    }}
+    .meta {{
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.5;
+    }}
+    .panel {{
+      min-height: 420px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--panel);
+      padding: 28px;
+    }}
+    .panel h2 {{
+      margin: 0 0 12px;
+      font-size: 24px;
+      letter-spacing: 0;
+    }}
+    .panel p {{
+      max-width: 680px;
+      color: var(--muted);
+      font-size: 17px;
+      line-height: 1.65;
+    }}
+    button {{
+      border: 0;
+      border-radius: 6px;
+      background: var(--ink);
+      color: var(--bg);
+      cursor: pointer;
+      font: inherit;
+      font-weight: 650;
+      padding: 10px 16px;
+    }}
+    .callout {{
+      border: 1px solid var(--border);
+      border-radius: 0;
+      background: var(--panel);
+      padding: 20px;
+    }}
+    .callout h2 {{ color: var(--ink); }}
+    .grid {{
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    }}
+    .croquis {{
+      min-height: 180px;
+      border: 1px solid var(--border);
+      border-radius: 0;
+      background: var(--bg);
+      padding: 14px;
+    }}
+    .bar {{
+      height: 14px;
+      border-radius: 0;
+      background: #666666;
+      margin-bottom: 10px;
+    }}
+    .box {{
+      height: 52px;
+      border: 1px solid var(--border);
+      border-radius: 0;
+      background: var(--panel);
+      margin-bottom: 10px;
+    }}
+    .note {{
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.45;
+    }}
+    pre {{
+      overflow-x: auto;
+      border: 1px solid var(--border);
+      border-radius: 0;
+      background: var(--bg);
+      padding: 16px;
+    }}
+    code {{
+      border-radius: 0;
+      background: var(--panel);
+      padding: 2px 5px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: .92em;
+    }}
+  </style>
+</head>
+<body>
+  <main>
+    <section class="shell" aria-label="{escaped_title}">
+      <div class="header">
+        <div>
+          <p class="eyebrow">{kind} artifact</p>
+          <h1>{escaped_title}</h1>
+        </div>
+        <p class="meta">Style: {style}<br>Entrypoint: index.html</p>
+      </div>
+      <div class="callout">
+        <h2>Key finding or recommendation</h2>
+        <p>
+          Put the highest-signal conclusion near the top. Use this area for the
+          main security finding, product decision, implementation warning, or
+          core recommendation that frames the rest of the artifact.
+        </p>
+      </div>
+      <div class="panel">
+        <h2>Public reasoning surface</h2>
+        <p>
+          Turn the answer into a readable page: context, model, tradeoffs,
+          examples, edge cases, rollout steps, and verification notes. Show
+          conclusions and evidence, not private chain-of-thought.
+        </p>
+        <pre><code>// Add focused snippets when they clarify the plan.
+function example() {{
+  return "replace this with the requested artifact content";
+}}</code></pre>
+      </div>
+      <div class="panel">
+        <h2>Page draft</h2>
+        <p>
+          For plan artifacts, draft the actual page or content structure here:
+          title, lede, sections, key copy, calls to action, states, and the
+          narrative blocks the user should see.
+        </p>
+      </div>
+      <div class="grid">
+        <article class="panel">
+          <h2>Page croquis A</h2>
+          <div class="croquis">
+            <div class="bar" style="width: 72%;"></div>
+            <div class="box"></div>
+            <div class="box" style="width: 64%;"></div>
+          </div>
+          <p class="note">Sketch the page hierarchy quickly. This is for seeing and understanding, not final UI.</p>
+        </article>
+        <article class="panel">
+          <h2>Page croquis B</h2>
+          <div class="croquis">
+            <div class="box" style="height: 84px;"></div>
+            <div class="bar" style="width: 46%;"></div>
+            <div class="bar" style="width: 78%; opacity: .35;"></div>
+          </div>
+          <p class="note">Annotate what changes: layout, emphasis, rhythm, audience, or tradeoff.</p>
+        </article>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
+"""
+
+
+def highlogic_template(title: str, style: str, kind: str, created_at: str) -> str:
+    return f"""# {title}
+
+## Intent
+
+- Kind: {kind}
+- Style: {style}
+- Created: {created_at}
+
+## User Request
+
+TODO: Summarize the user's artifact request.
+
+## Core Logic
+
+TODO: Describe the public reasoning structure, sections, data model, interactions, and key design decisions. Capture conclusions, evidence, assumptions, and tradeoffs without private chain-of-thought.
+
+## Verification
+
+TODO: Record how the artifact was opened or tested, including browser/runtime checks when relevant.
+
+## Iteration Notes
+
+- Initial scaffold created.
+"""
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description="Create a local HTML artifact workspace.")
+    parser.add_argument("title", help="Short artifact title or slug")
+    parser.add_argument("--style", default="black-grid", help="use-style style name")
+    parser.add_argument("--kind", default="thinking", help="artifact kind")
+    args = parser.parse_args()
+
+    base = GLOBAL_ARTIFACTS_DIR.resolve()
+    artifact_id = slugify(args.title)
+    artifact_dir = unique_dir(base, artifact_id)
+    created_at = datetime.now(timezone.utc).isoformat()
+
+    artifact_dir.mkdir(parents=True, exist_ok=False)
+    (artifact_dir / "versions").mkdir()
+
+    title = args.title.strip()
+    (artifact_dir / "index.html").write_text(
+        html_template(title, args.style, args.kind),
+        encoding="utf-8",
+    )
+    (artifact_dir / "HIGHLOGIC.md").write_text(
+        highlogic_template(title, args.style, args.kind, created_at),
+        encoding="utf-8",
+    )
+    manifest = {
+        "id": artifact_dir.name,
+        "title": title,
+        "kind": args.kind,
+        "style": args.style,
+        "created_at": created_at,
+        "entrypoint": "index.html",
+        "files": ["index.html", "HIGHLOGIC.md", "manifest.json"],
+    }
+    (artifact_dir / "manifest.json").write_text(
+        json.dumps(manifest, indent=2) + "\n",
+        encoding="utf-8",
+    )
+
+    index_path = artifact_dir / "index.html"
+    print(f"created={artifact_dir}")
+    print(f"index={index_path}")
+    print(f"url={index_path.as_uri()}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

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.
 
 ---