How does this skill help with CORS errors?

It provides specific middleware templates that ensure CORS headers are applied in the correct order before API routes, handling both development and production origins.

What authentication providers are supported?

While optimized for Clerk with JWT verification, the architectural patterns can be adapted for other JWT-based auth providers like Kinde or Auth0.

How does it handle authentication race conditions?

It provides React hooks and components that check the Clerk 'isLoaded' state before attempting API calls, preventing 401 errors caused by missing tokens.

Does this skill work with the Cloudflare Vite plugin?

Yes, it includes configuration templates for @cloudflare/vite-plugin, allowing your frontend and Worker to run on the same port during development.

Is D1 database access included?

Yes, it provides patterns for accessing D1 through environment bindings in Hono and using parameterized queries to ensure security.

Cloudflare Full-Stack Integration

Name: Cloudflare Full-Stack Integration
Author: jackspace

byjackspace

•

API開発

Streamlines the integration of React frontends with Cloudflare Workers using Hono, Clerk authentication, and D1 databases.

This skill provides production-tested architectural patterns and templates for building robust full-stack applications on the Cloudflare platform. It addresses the most common friction points in serverless development, including CORS misconfigurations, environment variable management between Vite and Workers, and authentication race conditions. By providing standardized fetch wrappers, Hono middleware, and Vite configurations, it ensures that frontend and backend components communicate securely and efficiently without the typical troubleshooting overhead associated with auth tokens and database bindings.

主な機能

012 GitHub stars

02Unified development setup using @cloudflare/vite-plugin for single-port local testing.

03Frontend API client wrappers that automatically attach Clerk session tokens to requests.

04Standardized environment variable handling for both Vite (frontend) and Wrangler (backend).

05Pre-configured Hono middleware for JWT verification and robust CORS handling.

06Secure D1 database binding patterns with parameterized query templates.

ユースケース

01Resolving persistent 401 Unauthorized or CORS errors between frontend and serverless backends.

02Setting up a production-ready Cloudflare D1 database integration with type-safe API routes.

03Building secure SaaS applications using React, Cloudflare Workers, and Clerk authentication.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jackspace/claudeskillz cloudflare-full-stack-integration

For use in Claude.ai and ChatGPT

Download Skill