القائمة
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 ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.
| 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: