deploy-agent

1
0
Source

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

Installs 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

StepCommandDescriptionRequires Approval
1deploy-agent init <name>Start deployment✅ Design phase
2deploy-agent build <name>Build app✅ Before testing
3deploy-agent test <name>Test locally✅ Before GitHub
4deploy-agent push <name>Push to GitHub✅ Before Cloudflare
5deploy-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

ToolPurpose
ghGitHub repo creation and management
wranglerCloudflare Pages deployment
gitVersion control
jqJSON 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

CheckCommandFix if Failed
Next.js versionnpm list nextnpm install next@15.5.2
Package lock syncrm -rf node_modules package-lock.json && npm installCommit lock file
Cloudflare adapternpm list @cloudflare/next-on-pagesnpm install -D @cloudflare/next-on-pages
wrangler installednpm list wranglernpm 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

SettingValue
Build commandnpx @cloudflare/next-on-pages
Output directory.vercel/output/static
FunctionsEnable (for D1 API routes)

Common Issues & Fixes

IssueErrorFix
Lock file mismatchnpm ci can only install packages when your package.json and package-lock.json are in syncrm -rf node_modules package-lock.json && npm install && git add package-lock.json
Next.js versionpeer next@">=14.3.0 && <=15.5.2" from @cloudflare/next-on-pagesDowngrade to next: "15.5.2"
API routes not edgeThe following routes were not configured to run with the Edge RuntimeAdd export const runtime = 'edge';
D1 access patternUsing context.env.DBUse getRequestContext().env.DB
Missing typesTypeScript errors for D1 bindingsCreate env.d.ts with CloudflareEnv interface

CSS Fix (Scrollbar Flicker)

html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
body {
  overflow-x: hidden;
}

Post-Deployment

  1. Cloudflare Dashboard → Settings → Functions
  2. Add D1 binding: Variable name DB → Select your database

Reference Documents

seedream-image-gen

openclaw

Generate images via Seedream API (doubao-seedream models). Synchronous generation.

2359

ffmpeg-cli

openclaw

Comprehensive video/audio processing with FFmpeg. Use for: (1) Video transcoding and format conversion, (2) Cutting and merging clips, (3) Audio extraction and manipulation, (4) Thumbnail and GIF generation, (5) Resolution scaling and quality adjustment, (6) Adding subtitles or watermarks, (7) Speed adjustment (slow/fast motion), (8) Color correction and filters.

6623

context-optimizer

openclaw

Advanced context management with auto-compaction and dynamic context optimization for DeepSeek's 64k context window. Features intelligent compaction (merging, summarizing, extracting), query-aware relevance scoring, and hierarchical memory system with context archive. Logs optimization events to chat.

3622

a-stock-analysis

openclaw

A股实时行情与分时量能分析。获取沪深股票实时价格、涨跌、成交量,分析分时量能分布(早盘/尾盘放量)、主力动向(抢筹/出货信号)、涨停封单。支持持仓管理和盈亏分析。Use when: (1) 查询A股实时行情, (2) 分析主力资金动向, (3) 查看分时成交量分布, (4) 管理股票持仓, (5) 分析持仓盈亏。

9121

himalaya

openclaw

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

7921

garmin-connect

openclaw

Syncs daily health and fitness data from Garmin Connect into markdown files. Provides sleep, activity, heart rate, stress, body battery, HRV, SpO2, and weight data.

7321

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.

643969

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.

591705

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

318398

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.

339397

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.

451339

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.

304231

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.