Skip to main content
ClaudeWave
Skill510 repo starsupdated today

Deploy Prototype

Deploy Prototype generates a small, functional web application based on signals from articles, memory topics, or logs, then publishes it live to Vercel using an API call. Use this skill to rapidly convert data insights, market findings, or interactive ideas into browser-ready tools that users can access immediately, especially when a static write-up would benefit from real-time interaction or visual exploration.

Install in Claude Code
Copy
git clone --depth 1 https://github.com/aaronjmars/aeon /tmp/deploy-prototype && cp -r /tmp/deploy-prototype/skills/deploy-prototype ~/.claude/skills/deploy-prototype
Then start a new Claude Code session; the skill loads automatically.

SKILL.md

<!-- autoresearch: variation B — sharper output via prototype quality bar + self-check + signal-anchored record -->

> **${var}** — What to build and deploy.
> - Empty → auto-select from recent signals (articles, logs, memory topics).
> - Plain text (e.g. `market heatmap`) → interpret as a build brief.
> - Typed form `type:slug description` (e.g. `tool:market-heatmap volume heatmap of top-20 tokens`, `viz:tx-graph`, `api:summarize`, `landing:startup-idea`) → use `type` to bias shape and `slug` as the deployment name.

Today is ${today}. Your task is to ship a small, self-contained prototype that someone could actually use in the browser today.

## Steps

1. **Read context.** Read `memory/MEMORY.md` and the most recent entries in `memory/logs/` for active topics.
   If running as part of a chain, scan injected upstream outputs for a concrete artifact worth making interactive.

2. **Pick what to build (if `${var}` is empty or vague).**

   Scan these sources, in order, for prototype-worthy signals:
   - `articles/` — last 7 entries by mtime: any claim, finding, or dataset that would be more useful as an interactive page?
   - `memory/topics/*.md` — running narratives; pick one with a live data source (prices, feeds, markets)
   - `memory/logs/${today}.md` and the two prior days — skill outputs flagged as interesting
   - `memory/MEMORY.md` → "Next Priorities" and "Recent Articles"

   Score each candidate 1-5 on:
   - **Leverage** — does an interactive version beat the static write-up?
   - **Concreteness** — is the spec obvious in one sentence? (if no, reject)
   - **Novelty** — haven't shipped this in the last 14 days (check `articles/prototype-*.md` by mtime and any `memory/topics/prototypes.md`)

   Pick the highest-total candidate. If no candidate reaches 9/15, skip building and exit as `DEPLOY_PROTOTYPE_EMPTY` (step 9).

   Record the chosen signal — its source file(s) and one-line rationale — you'll use it in steps 6 and 7.

3. **Commit to a shape before writing code.** Before touching `.pending-deploy/`, write out (in your reasoning, not a file):
   - **Slug**: `aeon-prototype-<descriptor>`, all lowercase, `[a-z0-9-]`, 3–50 chars after prefix (e.g. `aeon-prototype-market-heatmap`). If `${var}` supplied a typed slug, use it; otherwise derive one.
   - **Tagline** (≤90 chars) — the one-liner that appears in the page title and OG tags.
   - **Primary action** — what is the one thing a visitor does in the first 10 seconds? (read a number, click a filter, submit an input, compare two things). If you can't name it, go back to step 2.
   - **Shape**: static HTML+JS / static + `api/` function / Next.js. Default to static single-file HTML unless the idea genuinely needs a serverless function.

4. **Write the files.**
   ```bash
   rm -rf .pending-deploy        # clear stale state from prior runs
   mkdir -p .pending-deploy/files
   ```
   Write all project files into `.pending-deploy/files/`. This directory is the repo root — everything here is pushed to GitHub and deployed to Vercel.

   **Quality bar — every prototype must meet these:**
   - **Self-contained** — no external build step where avoidable. Prefer one `index.html` with inline `<style>` and `<script>`; fall back to a `main.css` / `main.js` only when size justifies it.
   - **Loads in <1s on a cold visit.** No jQuery, no CDN UI libraries for a single-page tool. Vanilla JS or a ~10KB util max. No `<link rel="stylesheet">` to a CDN font unless it's one font.
   - **Mobile-first, works on a phone.** Viewport meta set, tap targets ≥40px, no horizontal scroll at 360px wide.
   - **Share-friendly.** Include `<title>`, `<meta name="description">`, `<meta property="og:title">`, `<meta property="og:description">`, `<meta property="og:type" content="website">`. Skip OG image unless you generate one.
   - **Real content, not lorem.** If the prototype shows data, fetch it from a public no-auth endpoint at load time (CoinGecko, GitHub public API, public RSS, public JSON feeds) — or hardcode a recent, realistic snapshot with the timestamp visible. Never ship placeholder `[example data]`.
   - **One visible CTA or primary surface.** Clear hierarchy: what does the visitor look at first?
   - **Works with JS disabled to at least show the tagline** (progressive enhancement — not required for interactive tools, but the title and description must render server-free).
   - **Light + dark via `prefers-color-scheme`** — 4 CSS vars is enough.
   - **No secrets.** No API keys, tokens, or env vars embedded anywhere. If the idea requires auth, redesign around a public endpoint or drop the idea.
   - **Include a `README.md`** in `.pending-deploy/files/` with: what it is (1 line), how to run locally (1 line), signal source (1 line link to the article/log/topic from step 2).

   For **API endpoints**: place handlers in `api/` (e.g. `api/index.js` exporting `export default function handler(req, res) { ... }`).
   For **Next.js**: keep it one page — `package.json` + `pages/index.js`. Only if the idea genuinely needs SSR.

5. **Write deploy metadata.** Create `.pending-deploy/meta.json`:
   ```json
   {
     "name": "aeon-prototype-<slug-from-step-3>",
     "description": "One-sentence description, matches the OG description on the page",
     "framework": null,
     "tagline": "≤90 chars — matches <title> on the page",
     "signal_source": "path or URL of the article/log/topic that triggered this prototype",
     "primary_action": "what the visitor does in the first 10 seconds"
   }
   ```
   - `framework`: `null` for static; `"nextjs"`, `"svelte"`, etc. when used.
   - The extra fields (`tagline`, `signal_source`, `primary_action`) are for the prototype record and downstream dashboards; the postprocess script may ignore them.

6. **Build the Vercel deploy payload.** Write `.pending-deploy/payload.json`:
   ```json
   {
     "name": "aeon-prototype-<slug>",
     "files": [
       { "file": "index.html", "data": "<!DOCTYPE html>...", "encoding": "utf-8" }