Skip to content
STACK IT FAST
Share

Astro SSR + Tailwind CSS + Cloudflare

Curated rule Content & Directory · Developer Tool & API Updated Oct 2026 Which file does my tool read?
astro-tailwind-cloudflare.md

Architecture rules for Astro server-side rendering, React client islands, Tailwind CSS, and Cloudflare Pages/Workers edge deployment.

Astro Tailwind CSS Cloudflare TypeScript React
Formats
4 files
AGENTS.md
39 lines
CLAUDE.md
16 lines
Languages
TypeScript
Updated
Oct 2026
Used by
4 projects
Install

Writes .claude/skills/astro-tailwind-cloudflare/SKILL.md

$ curl -s --create-dirs -o .claude/skills/astro-tailwind-cloudflare/SKILL.md https://stackitfast.com/rules/astro-tailwind-cloudflare/SKILL.md

Rule files

AGENTS.md· 39 lines · 2.8 KB
1# Project Architecture & Guidelines (Astro + Tailwind + Cloudflare)
2
3## 1. Core Architecture
4- **Framework**: Astro 7 with `@astrojs/cloudflare` server adapter (`output: "server"`); Node 22.12+ for builds, and only Content Layer collections (`src/content.config.ts`).
5- **UI Hydration**: React client islands mounted with selective directives (`client:load`, `client:visible`, `client:idle`).
6- **Styling**: Tailwind CSS with strict CSS variables and dark-theme tokens.
7- **Edge Execution**: Cloudflare Pages Functions / Workers runtime with Cloudflare KV / D1 / Hyperdrive.
8
9## 2. Islands Architecture Rules
10- Keep pages and static wrappers in `.astro` components for zero-JS delivery.
11- Convert components to React (`.tsx`) ONLY when interactive client-side state is required (modals, dropdowns, filters).
12- Pass server-computed data as serializable props into React islands; avoid fetching boilerplate inside client components.
13
14## 3. Cloudflare Edge & Environment Constraints
15- Do NOT rely on Node.js core modules (`fs`, `child_process`) at runtime unless supported by Node compatibility flags.
16- Access edge bindings (KV, D1, Hyperdrive, Secrets) via `Astro.locals.runtime.env` in Astro pages or `locals` in API routes.
17- Enforce SSRF protection and timeout limits (`AbortSignal.timeout`) on all outbound `fetch` calls.
18
19## 4. API Endpoints & Data Flow
20- Place server endpoints in `src/pages/api/` exporting HTTP methods (`export const POST: APIRoute`, `export const GET`).
21- Always set `export const prerender = false` on dynamic API routes.
22- Return explicit `Response` objects with standard `Content-Type: application/json` headers and proper HTTP status codes.
23
24## 5. Coding Standards
25- Strict TypeScript (`tsc --noEmit`).
26- English-only copy, code comments, and documentation.
27- Prettier formatting with 2-space indentation.
28
29## 6. Testing Conventions
30- Use Playwright for end-to-end tests covering Astro pages and hydrated React islands (`@astro/test` or a standalone Playwright config).
31- Test islands in isolation with Vitest + `@testing-library/react` before wiring them into `.astro` pages.
32- Run `tsc --noEmit` as a required pre-merge check; treat type errors as test failures, not warnings.
33- Verify edge-only code paths (KV, D1, Hyperdrive) with `wrangler dev --local` or `wrangler dev --remote` against a staging binding before deploying.
34
35## 7. Git Workflow & PR Conventions
36- Commit messages follow Conventional Commits (`feat:`, `fix:`, `refactor:`, `chore:`) scoped to the touched package when in a monorepo (e.g. `feat(web): add pricing page`).
37- Every PR touching `.astro` pages must include a screenshot or Playwright trace for the changed route.
38- Run `bun run build` locally before opening a PR; a failed Cloudflare adapter build blocks merge.
39- Squash-merge feature branches; keep `main` deployable to Cloudflare Pages at every commit.

Works with Cursor · Claude Code · Windsurf · AGY

Architecture notes

Architecture Overview

Standardized production guidelines for Astro SSR, React Client Islands, Tailwind CSS, and Cloudflare Edge Deployment.

Key Advantages

  • Sub-100ms Global TTFB: Cloudflare edge distribution ensures instant response times worldwide.
  • Zero Client-Side JS by Default: Astro ships zero JavaScript unless explicitly hydrated with React islands.
  • Cost Efficiency: Serverless edge execution eliminates always-on server costs.

Frequently asked questions

Does this AGENTS.md work with Cursor, Claude Code, and Windsurf?

Yes. AGENTS.md is the open cross-tool standard read natively by Cursor, Claude Code, Windsurf, GitHub Copilot, and 30+ other agents. This page also ships a dedicated .mdc file for Cursor's modern .cursor/rules format if you prefer scoped, glob-based rule loading.

Why must Astro islands avoid fetching data with useEffect?

Astro server-renders .astro pages before any client JavaScript runs, so data is already available at render time. Fetching again inside a React island with useEffect duplicates the request, adds a loading flash, and defeats the zero-JS-by-default model — pass the data down as a serializable prop instead.

Can I use Node.js APIs in a Cloudflare Pages Function?

Only with the Node compatibility flag enabled in wrangler.toml (nodejs_compat). Without it, fs, child_process, and other Node core modules are unavailable at the edge — use Web Platform APIs (fetch, crypto, Request/Response) instead, which work identically in Cloudflare Workers.

Used in production

Explore all stacks

elekcsv

5
Headless CSV Ingestion Engine · Solo

Keeping parsing, compiled-validator generation, fuzzy column mapping and bitmap error tracking in one dependency-free core package lets every UI framework reuse identical import logic instead of six separate implementations.

OpenSEO

Open-Source SEO Research Platform · 2-5 people

Running on Cloudflare Workers with D1, Workflows and Durable Objects makes it free-tier friendly to self-host and to scale when hosted. Supporting both D1 and Postgres through Drizzle, plus a Docker path, keeps the project portable beyond Cloudflare.

Tinycast

Native macOS Launcher & Clipboard Manager · Solo / 2-5 people

Staying native with zero third-party dependencies and delegating search to Spotlight and system services keeps memory use low. A small embedded JavaScriptCore runtime adds Raycast extension compatibility without pulling in Electron.

Astro

Island Architecture Web Framework · 1M+ MAU

Vite as a first-class dependency and per-framework, per-host integration packages let Astro ship a fast static-first build while opting into server rendering or client hydration only where a project actually needs it.
Where this stack fits

Stack It First recommends it at:

Web · MVP · SEO-drivenWeb · Growth · SEO-driven
Walk the web roadmap
Every stack ships as files

More AI agent coding rules and skills

View all
astro-static-content/AGENTS.mdAstro Static Site + Content Collections + TailwindAstro · Tailwind CSS · TypeScriptbun-hono-sqlite/AGENTS.mdBun + Hono + SQLite (libSQL & Drizzle ORM)Bun · Hono · SQLitefastapi-python-postgres/AGENTS.mdFastAPI + Python + PostgreSQL (Async SQLAlchemy & Pydantic v2)FastAPI · Python · PostgreSQLgo-echo-sqlite/AGENTS.mdGo + Echo + SQLite (Embedded, Self-Hosted Tools)Go · Echo · SQLite