本文へ移動
cccskills
無料GitHub で公開

cloudflare

Self-contained deploy automation — invoke directly, do not decompose. Deploys a Vibes app to Cloudflare Workers via the Deploy API. Use when deploying, publishing, going live, pushing to production, or hosting on the edge.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOSスター 136(GitHub 136 + cccskills 0)
連携ツールCloudflare

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:cloudflare". Do not decompose the steps below into separate plan tasks.

  ╔═══════════════════════════════════════════════╗
  ║   ☁️  CLOUDFLARE WORKERS DEPLOY               ║
  ║   Deploy API · Pocket ID · Edge Functions      ║
  ╚═══════════════════════════════════════════════╝

Deploy to Cloudflare

Deploy your Vibes app to Cloudflare Workers via the Deploy API.

Prerequisites

  1. Assembled HTML file (from /vibes:vibes or /vibes:factory)
  2. Vibes account (browser login on first deploy)

No Cloudflare account or wrangler CLI needed — the Deploy API handles infrastructure.

Quick Deploy

VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/deploy-cloudflare.js" --name myapp --file index.html

On first run, a browser window opens for Pocket ID authentication. Tokens are cached for subsequent deploys.

Static Assets: Place images, fonts, or other static files in an assets/ directory next to the app file. The deploy script auto-discovers and includes them (binary files are base64-encoded). Reference in code with absolute paths like /assets/logo.png.

Deploy with AI enabled

VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/deploy-cloudflare.js" --name myapp --file index.html --ai-key "sk-or-v1-your-key"

The --ai-key flag configures the OpenRouter API key for the useAI() hook. Without it, /api/ai/chat returns {"error": "AI not configured"}.

Endpoints

EndpointMethodDescription
/registry.jsonGETPublic registry read
/check/:subdomainGETCheck subdomain availability
/claimPOSTClaim a subdomain (auth required)
/api/ai/chatPOSTAI proxy to OpenRouter (requires AI key)

Important: Custom Domain Required for Subdomains

Workers.dev domains only support one subdomain level for SSL. For multi-tenant apps with subdomains (tenant.myapp.workers.dev), you MUST use a custom domain.

Won't work: tenant.myapp.username.workers.dev (SSL error) Will work: tenant.myapp.com (with custom domain)

On workers.dev, use the ?subdomain= query parameter for testing:

  • myapp.username.workers.dev → landing page
  • myapp.username.workers.dev?subdomain=tenant → tenant app
  • myapp.username.workers.dev?subdomain=admin → admin dashboard

Custom Domain Setup

  1. Add domain to Cloudflare (get nameservers from Cloudflare DNS dashboard)
  2. Point registrar nameservers to Cloudflare's assigned nameservers
  3. Delete conflicting DNS records for the apex domain (A, AAAA, CNAME)
  4. Add Custom Domain in Workers & Pages → your worker → Settings → Domains & Routes → Add → Custom Domain (apex: yourdomain.com)
  5. Add wildcard CNAME in DNS: Name: *, Target: <worker-name>.<username>.workers.dev (Proxied: ON)
  6. Add Route in Workers & Pages → your worker → Settings → Domains & Routes → Add → Route: *.yourdomain.com/*

After setup:

  • yourdomain.com → landing page
  • tenant.yourdomain.com → tenant app
  • admin.yourdomain.com → admin dashboard

Troubleshooting

ProblemCauseFix
Browser doesn't open for authHeadless environmentCopy the printed URL and open manually
Deploy API returns 401Expired or invalid tokenDelete ~/.vibes/auth.json and retry
404 on subdomain URLWorkers.dev doesn't support nested subdomainsSet up a custom domain (see Custom Domain Setup above)
/api/ai/chat returns "AI not configured"Missing OpenRouter keyRedeploy with --ai-key
Stale content after redeployBrowser cacheHard refresh (Cmd+Shift+R) or clear cache

What's Next?

After successful deployment, present these options:

AskUserQuestion: question: "Your app is deployed! What would you like to do next?" header: "Next steps" options: - label: "Set up custom domain" description: "Configure DNS for subdomain routing (required for multi-tenant)" - label: "Enable AI features" description: "Add OpenRouter API key for the useAI() hook" - label: "Add auth & SaaS features" description: "Transform into SaaS with /vibes:factory, then redeploy" - label: "Open in browser" description: "Visit the deployed URL to verify everything works"

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

design

無料

Self-contained design transformer — invoke directly, do not decompose. Transforms a design reference HTML file into a Vibes app. Use when user provides a design.html, mockup, or static prototype to match exactly.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

factory

無料

Self-contained SaaS pipeline — invoke directly, do not decompose. Generates a factory app with landing page, Stripe subscription checkout, Vibe Token economics, and deploys to Cloudflare Workers. Use when the user wants to monetize an app, add billing, create token-backed revenue sharing, or turn an app into a business.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

launch

無料

Self-contained SaaS pipeline — invoke directly, do not decompose. Generates a Vibes app, adds auth + billing, and deploys live. Uses Agent Teams to parallelize for maximum speed. Use when the user wants to build and ship a complete SaaS product in one step, or says "launch", "ship it", "build and deploy".

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

riff

無料

Self-contained parallel generator — invoke directly, do not decompose. Generates 3-10 app variations in parallel for comparing ideas. Use when user says "explore options", "give me variations", "riff on this", "brainstorm approaches", or wants to see multiple interpretations of a concept.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

test

無料

Self-contained test automation — invoke directly, do not decompose. End-to-end integration test that assembles a fixture, deploys to Cloudflare (with auto-provisioned Connect), and presents a live URL for browser verification. Use when testing the plugin, running E2E tests, verifying deployment works, or checking that templates assemble correctly.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

vibes

無料

Self-contained app generator — invoke this skill directly, do not decompose into sub-steps. Generates React web apps with TinyBase reactive data store. Use when creating new web applications, adding components, or working with real-time data. Ideal for quick prototypes and single-page apps that need real-time data sync.

日本語の概要は準備中です。原文の説明を表示しています。

popmechanic/VibesOS1362026年7月27日 更新

popmechanic のスキルをすべて見る

このスキルの問題を報告する