Claude Astro 6 Cloudflare Starter

Scaffold a complete Astro 6 + Cloudflare Pages project with D1, Drizzle, ZOD, Tailwind, and Vitest, all gotchas pre-solved.

The Problem

Astro 6 + Cloudflare is a minefield if you’re wiring it up from scratch. Sharp breaks your CI. Drizzle throws SSR chunk errors. CSP blocks Shiki. The env pattern changed. Zod v4 breaks existing schemas.

I hit every wall during beta across four production apps so you don’t have to.

What Astro 6 Gets Right

The headline feature for Cloudflare users is dev/production parity. Previous versions simulated the Workers runtime in development. Code that worked locally could break on deploy. Astro 6 runs your dev server on the real workerd runtime.

Beyond that:

• SSR is up to 2x faster than version 5
• Zod 4 with cleaner syntax
• Live Content Collections — real-time data without rebuilds
• Fonts API — first-party font management with <Font /> component

Under the hood: Vite 7, Node 22+, Shiki v4.

The Gotchas This Plugin Solves

Sharp breaks CI. The platform-specific package works on your Mac and fails on GitHub Actions. The plugin installs sharp (not @img/sharp-darwin-arm64) which auto-detects the platform.

Drizzle throws SSR chunk errors. Without ssr.optimizeDeps.include in your Astro config, Vite can’t resolve Drizzle in the Workers environment. Pre-configured.

CSP blocks Shiki. Shiki uses inline styles that CSP blocks. Astro tried to fix this and reverted. The plugin documents the trade-off.

Deprecated env pattern. Tutorials that use Astro.locals.runtime.env are v5. The plugin uses the v6 pattern:

import { env } from 'cloudflare:workers';
const db = env.DB;

Zod v4 breaking changes. z.string().email() became z.email(), message: became error:. Schemas are written for Zod v4 from the start.

What You Get

Run /get:astro-6:new and walk through the setup:

1. Scaffold — Astro’s generator + Tailwind CSS v4
2. Tailwind config — sensible defaults with the Vite plugin (no PostCSS config files)
3. Request logging (optional) — dev-only middleware with params and headers
4. Starter components — header, footer, layout, homepage
5. Sharp (optional) — image optimization installed the CI-safe way
6. Content Collections (optional) — structured content management
7. Client Routing (optional) — page nav without full DOM reloads
8. REST API (optional) — D1 + Drizzle ORM + Zod validation + Vitest

The REST API Layer

Step 8 sets up a full D1-backed REST API with Drizzle ORM, Zod validation, and Vitest — configured to work in Cloudflare’s Workers runtime. Tests run against real D1 using singleWorker: true with a Workers pool.

If you want an API, this skill will setup the infrastructure, but you also have included: /get:astro-6:api:resource - a Rails-style resource generator. Give it a model-name — users, posts, products — and it scaffolds model, migration, actions, routes, and tests in one step.

CLAUDE.md

The final step generates a CLAUDE.md for your project, so the next Claude session already understands your structure, schema, and conventions.

Install

claude plugin marketplace add getskillsdev/claude-astro-6-cf-starter
claude plugin install get@astro-6

Commands

Each subcommand works standalone — add any layer to an existing project without the full orchestrator.

Source

https://github.com/getskillsdev/claude-astro-6-cf-starter

Subscribe to Skills Weekly, a digest of the hottest plugins & industry news. Only one email a week.

Want to unsubscribe?

We respect your privacy. Unsubscribe anytime. Privacy Policy

Questions or feedback? Reach out on X @GetSkillsdev