メニュー
Use when deploying applications, choosing deployment platforms, or troubleshooting deployment issues - routes to platform-specific skills (Vercel, Fly.io, Cloudflare)
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Use when implementing structured logging, setting up Axiom observability, migrating from console.* to a centralized logger, or configuring Vercel Log Drains for log collection in Next.js apps
Psychological principles and implementation patterns for AI chat interfaces that feel natural and engaging. Covers Weber-Fechner timing, beta-distribution delays, character-by-character typing simulation, and model response padding.
CSS and React patterns for building WhatsApp-style chat interfaces with pinned input, bottom-anchored messages, scroll management, and streaming support. Covers the CSSence double-reverse pattern, min-h-0 grid/flex fixes, h-dvh viewport locking, and mobile adaptations.
Use when upgrading Zod 3→4, Vitest 2→4, Tailwind CSS 3→4. Covers non-obvious gotchas that cause runtime failures - things NOT prominently documented.
Use when deploying to Vercel - covers Fluid Compute (timeout issues, 60s bug), vercel.json configuration, maxDuration settings, cron jobs, environment variables (printf gotcha), monorepo setup, Next.js issues, and common build errors
Server-Sent Events (SSE) for real-time progress updates in Next.js/Vercel. TransformStream patterns, client consumption, progress tracking.
SOC 職業分類に基づく
| name | deployment |
| description | Use when deploying applications, choosing deployment platforms, or troubleshooting deployment issues - routes to platform-specific skills (Vercel, Fly.io, Cloudflare) |
Quick guide to choose the right deployment platform and skill for your workload.
| Workload | Platform | Skill |
|---|---|---|
| Next.js / React frontend | Vercel | vercel-deployment |
| Static sites, SPAs | Vercel or Cloudflare Pages | vercel-deployment |
| FastAPI / Python backend | Fly.io | fly-deployment |
| Stateful backend (SQLite, volumes) | Fly.io | fly-deployment |
| Docker containers | Fly.io | fly-deployment |
| Object storage / CDN | Cloudflare R2 | cloudflare-r2-d1 |
| Edge database (SQLite) | Cloudflare D1 | cloudflare-r2-d1 |
| Session/config caching | Cloudflare KV | cloudflare-r2-d1 |
| Serverless functions | Cloudflare Workers | cloudflare-r2-d1 |
Frontend (Next.js) → Vercel → vercel-deployment
Backend (FastAPI) → Fly.io → fly-deployment
File uploads → Cloudflare R2 or Fly volume
Frontend (static/SPA) → Cloudflare Pages
API (Workers) → Cloudflare Workers → cloudflare-r2-d1
Database → Cloudflare D1 → cloudflare-r2-d1
Files → Cloudflare R2 → cloudflare-r2-d1
apps/web (Next.js) → Vercel → vercel-deployment
apps/api (FastAPI) → Fly.io → fly-deployment
Best for: Next.js, React, static sites
Best for: Python backends, stateful apps, containers
Best for: Low-latency APIs, edge computing, global scale
User → Vercel (frontend) → Fly.io (API) → SQLite (volume)
Deploy commands:
# Frontend
vercel --prod
# Backend
fly deploy
User → Pages (frontend) → Workers (API) → D1 (database) + R2 (files)
Deploy command:
wrangler deploy
User → Vercel (Next.js) → Cloudflare R2 (uploads) + external DB
| Issue | Check Skill |
|---|---|
| Vercel deployment issues | vercel-deployment |
| Docker build fails | fly-deployment |
| Volume mount error | fly-deployment |
| D1 query timeout | cloudflare-r2-d1 |
| R2 upload fails | cloudflare-r2-d1 |
| Platform | Free Tier Highlights |
|---|---|
| Vercel | 100GB bandwidth, serverless functions, preview deploys |
| Fly.io | 3 VMs (256MB), 3GB storage, 160GB bandwidth |
| Cloudflare | 100K Worker requests/day, 10GB R2, 5GB D1 |
Use vercel-deployment when:
Use fly-deployment when:
Use cloudflare-r2-d1 when: