Clerk React Patterns

What it does

When your agent uses it

• : Vite Clerk setup
• React Router auth
• Protected route
• Custom sign-in form React

Example prompts

• “/clerk-react-patterns”

Requirements

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

What it can do on your machine

Read from SKILL.md and the folder at commit 347e8ab. 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 (TypeScript), which the agent can run.

  Shell commands in SKILL.md call:

  • npm

  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:

  • VITE_CLERK_PUBLISHABLE_KEY
  • PUBLISHABLE_KEY

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

Context cost

Clerk React Patterns loads about 1k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 73 tokens; SKILL.md has 200 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~73

When it runs · the whole SKILL.md, loaded when a task matches

~1k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~3.4k

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

• NoteMentions a .env fileSKILL.md:42

  `.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 347e8ab, republished under its MIT licence (© geekskai). 200 words, ~1,040 tokens.

name

clerk-react-patterns

description

React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.

allowed-tools

WebFetch

license

MIT

metadata.author

clerk

metadata.version

1.0.0

npm install @clerk/react

VITE_CLERK_PUBLISHABLE_KEY=pk_...

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/react'
import App from './App.tsx'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <App />
    </ClerkProvider>
  </StrictMode>,
)

import { useAuth } from '@clerk/react'

export function Dashboard() {
  const { isLoaded, isSignedIn, userId } = useAuth()

  if (!isLoaded) return <div>Loading...</div>
  if (!isSignedIn) return <div>Please sign in</div>

  return <div>Hello {userId}</div>
}

import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from '@clerk/react'

export function ProtectedRoute() {
  const { isLoaded, isSignedIn } = useAuth()

  if (!isLoaded) return <div>Loading...</div>
  if (!isSignedIn) return <Navigate to="/sign-in" replace />

  return <Outlet />
}

<Routes>
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
  <Route path="/sign-in" element={<SignIn />} />
</Routes>

import { useAuth } from '@clerk/react'

export function DataFetcher() {
  const { getToken } = useAuth()

  async function fetchData() {
    const token = await getToken()
    if (!token) return

    const res = await fetch('/api/data', {
      headers: { Authorization: `Bearer ${token}` },
    })
    return res.json()
  }

  return <button onClick={fetchData}>Load</button>
}

© 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 11 other files (references) in .agents/skills/clerk-react-patterns of geekskai/blog.

• SKILL.md
• evals/evals.json
• references/custom-flows.md
• references/hooks.md
• references/protected-routes.md
• references/router-integration.md
• templates/react-basic-auth/index.html
• templates/react-basic-auth/package.json
• templates/react-basic-auth/src/App.tsx
• templates/react-basic-auth/src/main.tsx
• templates/react-basic-auth/tsconfig.json
• templates/react-basic-auth/vite.config.ts

Open the folder on GitHubat commit 347e8ab

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in geekskai/blog, which our catalogue first saw on October 7, 2026.

• growupanand/ConvoForm.agents/skills/clerk-react-patterns