Skip to content

App Builder

Verified

Build, edit, and deploy Instant-backed apps using npx instant-cli, create-instant-app (Next.js + Codex), GitHub (gh), and Vercel (vercel). Use when asked to create a new app, modify an existing app, fix bugs, add features, or deploy/update an app. Projects live under ~/apps; always work inside the relevant app folder.

1,050

Install

Claude Code

Add to .claude/skills/

About This Skill

# App Builder

  • You have access to:
  • `npx instant-cli`
  • `gh`
  • `vercel`

If you use these tools, and find out that you don't have them or are not logged in, prompt the user to install them and log in.

All apps live in: `~/apps`

Ground rules

  • Always create/edit projects in `~/apps/<app-name>`.
  • Before making changes, read `AGENTS.md` in the repo root; also read `~/apps/<app-name>/AGENTS.md` if it exists.
  • For now, always push to `main`.
  • Every app must be:
  • 1) pushed to GitHub
  • 2) deployed on Vercel

Workflow: create a new app

  1. Pick an app folder name
  2. - Ensure `~/apps` exists.
  3. - The project will end up at `~/apps/<app-name>`.
  1. Create an Instant appId + token
  2. - Run:
  3. - `npx instant-cli init-without-files`
  4. - Capture the returned `appId` and `token`.
  1. Generate the Next.js app
  2. - Run this from inside `~/apps` (because the command creates the project folder):
  3. - `cd ~/apps`
  4. - `npx create-instant-app <app-name> --next --codex --app <appId> --token <token>`
  1. Initialise git + GitHub repo (if needed)
  2. - From `~/apps/<app-name>`:
  3. - `git init` (if not already)
  4. - `git add -A && git commit -m "Init"` (if needed)
  5. - `gh repo create <repo-name> --private --source . --remote origin --push`
  6. - Use `--public` if the user requests.
  1. Vercel: create/link project and deploy
  2. - From `~/apps/<app-name>`:
  3. - `vercel link` (or `vercel project add` / `vercel` depending on prompts)
  4. - `vercel --prod`
  1. Implement requested changes
  2. - Use a coding agent (Codex CLI or equivalent) from within the app directory to make changes.
  3. - Prefer small, reviewable commits.
  1. Commit + push (main)
  2. - `git add -A`
  3. - `git commit -m "<clear message>"`
  4. - `git push -u origin main`
  1. Deploy update
  2. - `vercel --prod`

Workflow: edit an existing app

  1. `cd ~/apps/<app-name>`
  2. Read relevant `AGENTS.md`.
  3. Pull latest:
  4. - `git checkout main && git pull`
  5. Make changes via coding agent / normal edits.
  6. Test/build as appropriate.
  7. Commit + push to `main`.
  8. Deploy to Vercel (`vercel --prod`).

Environment variables (.env)

When you first push to vercel, it likely won't have environment variables. Use the CLI to push the environment variables you do have in the local .env file.

Notes / guardrails

  • If `create-instant-app` created the repo + remote already, do not re-create it—just ensure `origin` exists and `main` is pushed.
  • If Vercel is already linked, do not re-link—just deploy.

Communicating

When you start using this skill, send a message saying "Okay, getting ready to use my app builder skill".

Then send period updates as you make progress. Building an app takes a while. Make it fun for the user.

Use Cases

  • Scaffold a new Next.js app with Instant backend and deploy it to Vercel in one session
  • Add features or fix bugs in an existing ~/apps project with automatic commit and deploy
  • Create a private GitHub repo for a new app and link it to Vercel hosting
  • Prototype a full-stack web app idea from description to live URL without manual setup
  • Manage environment variables and redeploy production apps via CLI

Pros & Cons

Pros

  • + End-to-end workflow from project creation to GitHub push to production deployment
  • + Uses standard tooling (npx, gh, vercel) — no custom dependencies to maintain
  • + Provides periodic progress updates making long build sessions transparent to the user

Cons

  • - Locked into the Instant + Next.js + Vercel stack with no alternative options
  • - Pushes directly to main branch by default which bypasses PR review workflows
  • - Requires three separate CLI tools (instant-cli, gh, vercel) to be installed and authenticated

Frequently Asked Questions

What does App Builder do?

Build, edit, and deploy Instant-backed apps using npx instant-cli, create-instant-app (Next.js + Codex), GitHub (gh), and Vercel (vercel). Use when asked to create a new app, modify an existing app, fix bugs, add features, or deploy/update an app. Projects live under ~/apps; always work inside the relevant app folder.

What platforms support App Builder?

App Builder is available on Claude Code, OpenClaw.

What are the use cases for App Builder?

Scaffold a new Next.js app with Instant backend and deploy it to Vercel in one session. Add features or fix bugs in an existing ~/apps project with automatic commit and deploy. Create a private GitHub repo for a new app and link it to Vercel hosting.

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts