deploy-agent
Multi-step deployment agent for full-stack apps. Build → Test → GitHub → Cloudflare Pages with human approval at each step.
Install
mkdir -p .claude/skills/deploy-agent && curl -L -o skill.zip "https://mcp.directory/api/skills/download/6135" && unzip -o skill.zip -d .claude/skills/deploy-agent && rm skill.zipInstalls to .claude/skills/deploy-agent
About this skill
deploy-agent
Deploy full-stack applications via a multi-step workflow with human approval at each stage.
Quick Start
# Install via ClawdHub
clawdhub install deploy-agent
# Initialize a new deployment
deploy-agent init my-app
# Check status
deploy-agent status my-app
# Continue through steps
deploy-agent continue my-app
Workflow Steps
| Step | Command | Description | Requires Approval |
|---|---|---|---|
| 1 | deploy-agent init <name> | Start deployment | ✅ Design phase |
| 2 | deploy-agent build <name> | Build app | ✅ Before testing |
| 3 | deploy-agent test <name> | Test locally | ✅ Before GitHub |
| 4 | deploy-agent push <name> | Push to GitHub | ✅ Before Cloudflare |
| 5 | deploy-agent deploy <name> | Deploy to Cloudflare | ✅ Final |
Commands
Initialize Deployment
deploy-agent init my-app
Creates a new deployment state and waits for design input.
Check Status
deploy-agent status my-app
Shows current step, approvals, and deployment info.
Continue
deploy-agent continue my-app
Get guidance on what to do next in the current step.
Build (Step 2)
deploy-agent build my-app
After designing with C.R.A.B, run this to build the app.
Test (Step 3)
deploy-agent test my-app
Verify the app is running locally before pushing.
Push to GitHub (Step 4)
deploy-agent push my-app [repo-name]
Creates GitHub repo and pushes code. Default repo name = app name.
Deploy to Cloudflare (Step 5)
deploy-agent deploy my-app [custom-domain]
Deploys to Cloudflare Pages. Default domain: {name}.sheraj.org
Cancel
deploy-agent cancel my-app
Aborts and cleans up the deployment.
List
deploy-agent list
Shows all active deployments.
Example Session
# Start new deployment
$ deploy-agent init my-blog
🚀 Deployment initialized: my-blog
Step 1: Design your app with C.R.A.B
# ... design phase with C.R.A.B ...
$ deploy-agent build my-blog
🚀 Build complete! Step 2: Local Testing
Start dev server: cd my-blog && npm run dev
# ... test locally ...
$ deploy-agent push my-blog
🚀 GitHub repository ready!
Say 'deploy-agent deploy my-blog' to deploy to Cloudflare
$ deploy-agent deploy my-blog my-blog.sheraj.org
🎉 Deployment complete!
App live at: https://my-blog.sheraj.org
State Management
State stored in: ~/.clawdbot/skills/deploy-agent/state/{deployment-name}.json
{
"name": "my-blog",
"step": 5,
"status": "deployed",
"created_at": "2026-01-18T08:00:00Z",
"repo_url": "https://github.com/user/my-blog",
"domain": "https://my-blog.sheraj.org"
}
Requirements
| Tool | Purpose |
|---|---|
gh | GitHub repo creation and management |
wrangler | Cloudflare Pages deployment |
git | Version control |
jq | JSON parsing (for state management) |
Configuration
Cloudflare token should be configured in ~/.wrangler.toml:
[account]
api_token = "your-cloudflare-token"
Notes
- Each deployment is independent
- State persists across sessions
- Human approval required at each major step
- Use "cancel" to abort anytime
Next.js + Cloudflare D1 Deployment Guide
This section covers common pitfalls and fixes for deploying Next.js apps with D1 on Cloudflare Pages.
Pre-Deployment Checklist
| Check | Command | Fix if Failed |
|---|---|---|
| Next.js version | npm list next | npm install next@15.5.2 |
| Package lock sync | rm -rf node_modules package-lock.json && npm install | Commit lock file |
| Cloudflare adapter | npm list @cloudflare/next-on-pages | npm install -D @cloudflare/next-on-pages |
| wrangler installed | npm list wrangler | npm install -D wrangler |
Required Configuration
1. package.json
{
"dependencies": {
"next": "15.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.16",
"wrangler": "^4.x"
}
}
2. wrangler.toml
name = "my-app"
compatibility_date = "2026-01-18"
compatibility_flags = ["nodejs_compat"]
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "your-db-id"
3. API Routes (each file)
import { getRequestContext } from '@cloudflare/next-on-pages';
export const runtime = 'edge';
export async function GET() {
const { env } = getRequestContext();
const { results } = await env.DB.prepare("SELECT * FROM tasks").all();
return Response.json({ data: results });
}
Cloudflare Pages Build Settings
| Setting | Value |
|---|---|
| Build command | npx @cloudflare/next-on-pages |
| Output directory | .vercel/output/static |
| Functions | Enable (for D1 API routes) |
Common Issues & Fixes
| Issue | Error | Fix |
|---|---|---|
| Lock file mismatch | npm ci can only install packages when your package.json and package-lock.json are in sync | rm -rf node_modules package-lock.json && npm install && git add package-lock.json |
| Next.js version | peer next@">=14.3.0 && <=15.5.2" from @cloudflare/next-on-pages | Downgrade to next: "15.5.2" |
| API routes not edge | The following routes were not configured to run with the Edge Runtime | Add export const runtime = 'edge'; |
| D1 access pattern | Using context.env.DB | Use getRequestContext().env.DB |
| Missing types | TypeScript errors for D1 bindings | Create env.d.ts with CloudflareEnv interface |
CSS Fix (Scrollbar Flicker)
html {
overflow-x: hidden;
scrollbar-gutter: stable;
}
body {
overflow-x: hidden;
}
Post-Deployment
- Cloudflare Dashboard → Settings → Functions
- Add D1 binding: Variable name
DB→ Select your database
Reference Documents
- Full guide:
docs/issues/nextjs-cloudflare-d1-deployment.md - Cloudflare docs: https://developers.cloudflare.com/pages/framework-guides/nextjs/
More by openclaw
View all skills by openclaw →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
fastapi-templates
wshobson
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
Related MCP Servers
Browse all serversThe fullstack MCP framework for developing MCP apps for ChatGPT, Claude, and building MCP servers for AI agents. Connect
Deploy and manage MCP-compatible AI apps on Google Cloud Run — automate Cloud Run deployments, list services, and manage
Devopness — Deploy apps and infrastructure to any cloud provider in minutes. Fast, reliable multi-cloud deployments for
Deploy and manage apps easily on Railway's train platform—handle services, environments, and more via conversational wor
Integrate Ollama's local LLM models for secure, on-premise AI and data control with MCP-compatible apps. Deploy custom m
Easily streamline container deployment to Kubernetes with Container Inc. Deploy apps directly from code editors via GitH
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.