From sundial-org-awesome-openclaw-skills-4
Deploys full-stack apps via CLI workflow: init/design with C.R.A.B, build, local test, GitHub push, Cloudflare Pages deploy with human approval per step.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-2 --plugin sundial-org-awesome-openclaw-skills-4This skill uses the workspace's default tool permissions.
Deploy full-stack applications via a multi-step workflow with human approval at each stage.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Deploy full-stack applications via a multi-step workflow with human approval at each stage.
# 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
| 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 |
deploy-agent init my-app
Creates a new deployment state and waits for design input.
deploy-agent status my-app
Shows current step, approvals, and deployment info.
deploy-agent continue my-app
Get guidance on what to do next in the current step.
deploy-agent build my-app
After designing with C.R.A.B, run this to build the app.
deploy-agent test my-app
Verify the app is running locally before pushing.
deploy-agent push my-app [repo-name]
Creates GitHub repo and pushes code. Default repo name = app name.
deploy-agent deploy my-app [custom-domain]
Deploys to Cloudflare Pages. Default domain: {name}.sheraj.org
deploy-agent cancel my-app
Aborts and cleans up the deployment.
deploy-agent list
Shows all active deployments.
# 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 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"
}
| Tool | Purpose |
|---|---|
gh | GitHub repo creation and management |
wrangler | Cloudflare Pages deployment |
git | Version control |
jq | JSON parsing (for state management) |
Cloudflare token should be configured in ~/.wrangler.toml:
[account]
api_token = "your-cloudflare-token"
This section covers common pitfalls and fixes for deploying Next.js apps with D1 on Cloudflare Pages.
| 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 |
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 });
}
| Setting | Value |
|---|---|
| Build command | npx @cloudflare/next-on-pages |
| Output directory | .vercel/output/static |
| Functions | Enable (for D1 API routes) |
| 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 |
html {
overflow-x: hidden;
scrollbar-gutter: stable;
}
body {
overflow-x: hidden;
}
DB → Select your databasedocs/issues/nextjs-cloudflare-d1-deployment.md