KeiSeiKit-1.0/skills/web-deploy/SKILL.md

name	description	arguments
web-deploy	Use when deploying websites — Cloudflare Pages, Vercel, edge functions, caching strategy, Core Web Vitals, CI/CD pipeline, DNS setup. Triggers on "deploy", "hosting", "cloudflare pages", "web vitals", "caching strategy".	name description required command Command: init, deploy, perf, cache, dns, ci, compare false name description required framework Framework: astro, next, sveltekit, react-router (auto-detect if omitted) false

Web Deployment & Performance

Default target: Cloudflare Pages. Default framework: Astro 6.

Platform Decision

Platform	Free Tier	Pro Price	Best For
Cloudflare Pages	Unlimited BW, 500 builds/mo	$5/mo	Content sites, marketing (DEFAULT)
Vercel	100GB BW, 100 deploys/day	$20/user/mo	Next.js full-stack apps
Netlify	100GB BW, 300 build min	$19/user/mo	Static + built-in forms

Cloudflare ecosystem: Workers, D1, R2, KV, Turnstile, Analytics — all free tier.

Framework Decision

Framework	Zero JS	Islands	Best For
Astro 6	Yes	Yes	Content/marketing (DEFAULT)
Next.js 16	No	No	Full-stack React apps
SvelteKit	Compiles	No	Animation-heavy, mobile-first

Astro 6 static output: typical LCP <500ms on CF Pages.

CDN Caching Strategy

Asset Type	Cache-Control
Hashed JS/CSS/fonts	public, max-age=31536000, immutable
HTML pages	public, max-age=0, s-maxage=3600, stale-while-revalidate=86400
API/dynamic	public, s-maxage=60, stale-while-revalidate=300
Images	public, max-age=86400, s-maxage=604800

Core Web Vitals

Metric	Good	Key Fix
LCP	<2.5s	Preload hero: fetchpriority="high", inline critical CSS, preload fonts
INP	<200ms	Break tasks >50ms, requestIdleCallback, defer 3rd-party
CLS	<0.1	Width/height on all images/video, aspect-ratio, font size-adjust

GitHub Actions CI/CD

name: Deploy
on: { push: { branches: [main] } }
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci && npm run build && npm test
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=my-site

Secrets: CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID.

Cloudflare DNS + SSL

1. Add domain, change nameservers
2. A @ <ip> Proxied + CNAME www @ Proxied
3. SSL: Full (Strict), Always HTTPS, HSTS
4. www→apex redirect rule (301)

Edge Functions

Feature	CF Workers	Vercel Edge
Locations	330+	30+
Cold start	<1ms	<50ms
Free	100K req/day	1M/month

Deploy Checklist

• Build succeeds, tests pass
• Lighthouse Performance >90
• Core Web Vitals green
• Caching headers per asset type
• SSL/HTTPS enforced
• www/apex redirect
• Error pages (404, 500) configured
• Security headers: CSP, X-Frame-Options, Referrer-Policy
• Environment variables in dashboard