Agent skill

Clerk Astro Patterns

by geekskai in geekskai/blog

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering.

MITAuto-check: notesFrontend & Design

Install Clerk Astro Patterns

skills CLI
$ npx skills add geekskai/blog --skill clerk-astro-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install geekskai/blog clerk-astro-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/geekskai/blog.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/clerk-astro-patterns .claude/skills/clerk-astro-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
clerk-astro-patterns
GitHub stars
103
Token cost
~822 tokens
SKILL.md length
206 words
Files
13 (incl. references)
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering.

  • Clerk astro middleware
  • SKILL.md covers What Do You Need?, Mental Model, Setup and SSR Page Auth, plus 5 more sections
  • Runs JavaScript and TypeScript scripts from its folder; needs PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY
  • Astro protected page

What it does

Clerk Astro Patterns is an agent skill from geekskai/blog. Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.

Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files, including reference files (for example `evals/evals.json`, `references/api-routes.md` and `references/astro-react.md`).

It sits in Frontend & Design, covering Static sites and blogs. It works with Astro and React. The repository describes itself as: 🚀 2026 Most Popular FREE Blog Template! Next.js 14, Zero Code - Just Write & Deploy | 2026最火免费博客模板!支持Markdown,一键部署,极致性能!⚡️ ✨ Write in Markdown, get your professional blog in…. The licence is MIT.

When your agent uses it

  • Clerk astro middleware
  • Astro protected page
  • Clerk island component
  • Astro API route auth

Example prompts

  • “/clerk-astro-patterns”

Requirements

  • Node.js
  • A credential in PUBLIC_CLERK_PUBLISHABLE_KEY
  • A credential in CLERK_SECRET_KEY
  • Pre-approved tools (allowed-tools): WebFetch

What it can do on your machine

Read from SKILL.md and the folder at commit e5554c5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • WebFetch

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript and TypeScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • clerk.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • PUBLIC_CLERK_PUBLISHABLE_KEY
    • CLERK_SECRET_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Clerk Astro Patterns loads about 822 tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 66 tokens; SKILL.md has 206 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~66
When it runs · the whole SKILL.md, loaded when a task matches
~822
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:102
    # .env

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from geekskai/blog at commit e5554c5, republished under its MIT licence (© geekskai). 206 words, ~822 tokens.

Download SKILL.mdSave it as .claude/skills/clerk-astro-patterns/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
clerk-astro-patterns
description
Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.
allowed-tools
WebFetch
license
MIT
metadata.author
clerk
metadata.version
1.0.0

Astro Patterns

SDK: @clerk/astro v3+. Requires Astro 4.15+.

What Do You Need?

TaskReference
Configure middlewarereferences/middleware.md
Protect SSR pagesreferences/ssr-pages.md
Use Clerk in island componentsreferences/island-components.md
Auth in API routesreferences/api-routes.md
Use Clerk with React in Astroreferences/astro-react.md

Mental Model

Astro has two rendering modes per page: SSR and static prerender. Clerk works differently in each:

  • SSR pages — use Astro.locals.auth() which is populated by the middleware
  • Static pages (export const prerender = true) — Clerk middleware skips them; use client-side hooks in islands
  • Islands — React/Vue/Svelte components; use useAuth() and other hooks from @clerk/astro/react
Request → clerkMiddleware() → SSR page → Astro.locals.auth()
                                ↓
                         Island (.client) → useAuth() hook

Setup

astro.config.mjs
ts
import { defineConfig } from 'astro/config'
import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [clerk()],
  output: 'server',
})
src/middleware.ts
ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])

export const onRequest = clerkMiddleware((auth, context, next) => {
  if (isProtectedRoute(context.request) && !auth().userId) {
    return auth().redirectToSignIn()
  }
  return next()
})

SSR Page Auth

astro
---
const { userId, orgId } = Astro.locals.auth()
if (!userId) return Astro.redirect('/sign-in')
---

<h1>Dashboard</h1>

Common Pitfalls

SymptomCauseFix
Astro.locals.auth is undefinedMissing middlewareAdd clerkMiddleware to src/middleware.ts
Auth works in dev but not productionoutput: 'static' globallySet output: 'server' or hybrid for protected pages
Static page has no authPrerendered pages skip middlewareUse export const prerender = false or move to island
Island not reactive to sign-inMissing client:load directiveAdd client:load to the island component

Import Map

WhatImport From
clerkMiddleware, createRouteMatcher@clerk/astro/server
useAuth, useUser, UserButton@clerk/astro/react
Astro components (<SignIn>, etc.)@clerk/astro/components

Env Variables

# .env
PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

Astro uses PUBLIC_ prefix for client-exposed variables (not NEXT_PUBLIC_).

See Also

  • clerk-setup - Initial Clerk install
  • clerk-custom-ui - Custom flows & appearance
  • clerk-orgs - B2B organizations

Docs

Astro SDK

© geekskai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (references) in .agents/skills/clerk-astro-patterns of geekskai/blog.

  • SKILL.md
  • evals/evals.json
  • references/api-routes.md
  • references/astro-react.md
  • references/island-components.md
  • references/middleware.md
  • references/ssr-pages.md
  • templates/astro-basic-auth/astro.config.mjs
  • templates/astro-basic-auth/package.json
  • templates/astro-basic-auth/src/layouts/Layout.astro
  • templates/astro-basic-auth/src/middleware.ts
  • templates/astro-basic-auth/src/pages/index.astro
  • templates/astro-basic-auth/tsconfig.json

Open the folder on GitHubat commit e5554c5

Compare with similar skills

Clerk Astro Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Clerk Astro Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Clerk Astro Patterns this skillgeekskai/blog103—~822Automated safety check: NotesMIT
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill1051 repos~2.8kAutomated safety check: NotesMIT
GlideSrivarsanK/Glide125—~1.7kAutomated safety check: PassApache-2.0
Integration Astro Staticwill-be-done/will-be-done152—~636Automated safety check: PassAGPL-3.0
Astroone-ie/one131—~351Automated safety check: PassCustom licence

Similar skills

  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed
  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    105 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes
  • Glide

    SrivarsanK/Glide

    Authoritative guide and toolset for AI agents to operate, configure, and visually design applications using Glide (@srivarsank/glide).

    125 GitHub stars~1.7k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed
  • Integration Astro Static

    will-be-done/will-be-done

    PostHog integration for static Astro sites using SSG. An agent skill from will-be-done/will-be-done.

    152 GitHub stars~636 tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • Astro

    one-ie/one

    Astro 7 conventions for ONE sites — plugin wiring via one.config.ts, OneChat/OneTrack placement, Cloudflare SSR.

    131 GitHub stars~351 tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed
  • Launch With AWS

    aws/agent-toolkit-for-aws

    Official

    Migrates vibe-coded web applications to AWS. An agent skill from aws/agent-toolkit-for-aws.

    2.8k GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from geekskai/blog

All 20 skills in this repo
  • Clerk Android

    geekskai/blog

    Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns.

    103 GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows.

    103 GitHub starsUsed in 1 repo~1k tokens
    Auto-check: notes
  • React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching.

    103 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server.

    103 GitHub starsUsed in 1 repo~875 tokens
    Auto-check: notes
  • Clerk Billing

    geekskai/blog

    Clerk Billing for subscription management - render Clerk's PricingTable and in-app checkout drawer, configure subscription plans, seat-limit plans for B2B, feature entitlements with has(), and…

    103 GitHub stars~5.1k tokensUpdated yesterday
    Auto-check passed
  • Chrome Extension auth with @clerk/chrome-extension -- popup/sidepanel setup, syncHost for OAuth/SAML via web app, createClerkClient for service workers and headless extensions, stable CRX ID.

    103 GitHub stars~2.9k tokensUpdated yesterday
    Auto-check: notes

Works with

Questions about Clerk Astro Patterns

What does Clerk Astro Patterns do?

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Clerk Astro Patterns is an agent skill from geekskai/blog. Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering.

When should I use Clerk Astro Patterns?

Clerk Astro Patterns fits situations like: clerk astro middleware; astro protected page; clerk island component; astro API route auth.

How do I install Clerk Astro Patterns in Claude Code?

Run `npx skills add geekskai/blog --skill clerk-astro-patterns -a claude-code`. Or copy the skill folder (.agents/skills/clerk-astro-patterns in geekskai/blog) into .claude/skills/clerk-astro-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Clerk Astro Patterns in Codex?

Run `npx skills add geekskai/blog --skill clerk-astro-patterns -a codex`. Or copy the skill folder (.agents/skills/clerk-astro-patterns in geekskai/blog) into .agents/skills/clerk-astro-patterns in your project. Codex loads it when a task matches its description.

Can I use Clerk Astro Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add geekskai/blog --skill clerk-astro-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/clerk-astro-patterns, .gemini/skills/clerk-astro-patterns, .github/skills/clerk-astro-patterns and .opencode/skills/clerk-astro-patterns in your project.

What does Clerk Astro Patterns need to run?

Going by SKILL.md and its folder, Clerk Astro Patterns needs JavaScript and TypeScript for the scripts in its folder and credentials named PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY. Our summary lists: Node.js; A credential in PUBLIC_CLERK_PUBLISHABLE_KEY; A credential in CLERK_SECRET_KEY. Its frontmatter pre-approves these tools: WebFetch.

Does Clerk Astro Patterns access the network?

SKILL.md names 1 domain. As links in the text: clerk.com. This is read from the text; nothing was executed.

Is Clerk Astro Patterns safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Clerk Astro Patterns use?

Clerk Astro Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Clerk Astro Patterns use?

About 822 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.

What are the alternatives to Clerk Astro Patterns?

Skills that share tags, products or a category with Clerk Astro Patterns: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Motion Dev Animations (199-biotechnologies/motion-dev-animations-skill, 105 stars), Glide (SrivarsanK/Glide, 125 stars) and Integration Astro Static (will-be-done/will-be-done, 152 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Clerk Astro Patterns?

geekskai (a GitHub user) maintains it in geekskai/blog, which has 103 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 7, 2026.

Source: geekskai/blog on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.