Clerk React SPA patterns for Vite and CRA - **name_fr:** Patterns Clerk React SPA pour Vite et CRA - **tl_en:** Client-side Clerk auth in React SPAs — ClerkProvider setup, useAuth/useUser hooks, protected routes, custom sign-in flows - **tl_fr:** Auth Clerk côté client dans les SPA React — configuration ClerkProvider, hooks useAuth/useUser, routes protégées, formulaires de connexion personnalisés - **creator:** @clerk - **type:** Agent skill - **url:** https://github.com/clerk/skills - **cat:** Developer tools - **kws:** clerk, react, spa, vite, cra, useauth, hooks, protected routes, authentication, sign-in - **license:** unknown **Description EN:** Curated by Skill Harbor — a short pointer to @clerk's official guide for `@clerk/react` in Vite/CRA single-page apps: ClerkProvider setup, the mental model of client-only auth, guarding on `isLoaded` before trusting `isSignedIn`, `useAuth`/`useUser`/`useClerk` hooks, protected routes with React Router, session JWT tokens for API calls, and custom sign-in/sign-up forms. Honest caveats: **no license declared in the repository — license unknown**, so this is a short fiche linking to the source, without reusing its content; SPA-only — for Next.js see the companion Next.js patterns guide, for TanStack Start see the TanStack patterns guide; needs a Clerk publishable key (free). Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — un renvoi court vers le guide officiel de @clerk pour `@clerk/react` dans les SPA Vite/CRA : configuration du ClerkProvider, modèle mental de l'auth 100 % client, vérification de `isLoaded` avant de faire confiance à `isSignedIn`, hooks `useAuth`/`useUser`/`useClerk`, routes protégées avec React Router, tokens JWT de session pour les appels API, et formulaires de connexion/inscription personnalisés. Bémols honnêtes : **aucune licence déclarée dans le dépôt — licence inconnue**, d'où cette fiche courte avec lien vers la source, sans réutiliser son contenu ; réservé aux SPA — pour Next.js voir le guide patterns Next.js, pour TanStack Start voir le guide TanStack ; nécessite une clé publishable Clerk (gratuite). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a React SPA (Vite or CRA) with @clerk/react installed; a Clerk publishable key (free tier); no license declared in the source repo — read it yourself before reusing its content Install "Clerk React SPA patterns for Vite and CRA" for me. Fetch the SKILL.md and its reference files from the source repository into a temporary folder, review them for anything suspicious, and report in two or three sentences what the guide covers (ClerkProvider setup, hooks usage, protected routes, token for API calls, custom sign-in flows) so I can follow it in my own project. Do not copy the guide's content into my project — this is a reference lookup only. Repository: https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Rules: don't touch anything outside the temp folder. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : une SPA React (Vite ou CRA) avec @clerk/react installé ; une clé publishable Clerk (free tier) ; aucune licence déclarée dans le dépôt source — lisez-le vous-même avant d'en réutiliser le contenu Installe-moi « Patterns Clerk React SPA pour Vite et CRA ». Récupère le SKILL.md et ses fichiers de référence depuis le dépôt source dans un dossier temporaire, examine-les pour tout contenu suspect, et indique en deux ou trois phrases ce que couvre le guide (configuration ClerkProvider, usage des hooks, routes protégées, token pour appels API, formulaires custom) pour que je puisse le suivre dans mon propre projet. Ne copie pas le contenu du guide dans mon projet — c'est une consultation de référence seulement. Dépôt : https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---
Auth Clerk côté client dans les SPA React — configuration ClerkProvider, hooks useAuth/useUser, routes protégées, formulaires de connexion personnalisés - **creator:** @clerk - **type:** Agent skill - **url:** https://github.com/clerk/skills - **cat:** Developer tools - **kws:** clerk, react, spa, vite, cra, useauth, hooks, protected routes, authentication, sign-in - **license:** unknown **Description EN:** Curated by Skill Harbor — a short pointer to @clerk's official guide for `@clerk/react` in Vite/CRA single-page apps: ClerkProvider setup, the mental model of client-only auth, guarding on `isLoaded` before trusting `isSignedIn`, `useAuth`/`useUser`/`useClerk` hooks, protected routes with React Router, session JWT tokens for API calls, and custom sign-in/sign-up forms. Honest caveats: **no license declared in the repository — license unknown**, so this is a short fiche linking to the source, without reusing its content; SPA-only — for Next.js see the companion Next.js patterns guide, for TanStack Start see the TanStack patterns guide; needs a Clerk publishable key (free). Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — un renvoi court vers le guide officiel de @clerk pour `@clerk/react` dans les SPA Vite/CRA : configuration du ClerkProvider, modèle mental de l'auth 100 % client, vérification de `isLoaded` avant de faire confiance à `isSignedIn`, hooks `useAuth`/`useUser`/`useClerk`, routes protégées avec React Router, tokens JWT de session pour les appels API, et formulaires de connexion/inscription personnalisés. Bémols honnêtes : **aucune licence déclarée dans le dépôt — licence inconnue**, d'où cette fiche courte avec lien vers la source, sans réutiliser son contenu ; réservé aux SPA — pour Next.js voir le guide patterns Next.js, pour TanStack Start voir le guide TanStack ; nécessite une clé publishable Clerk (gratuite). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a React SPA (Vite or CRA) with @clerk/react installed; a Clerk publishable key (free tier); no license declared in the source repo — read it yourself before reusing its content Install "Clerk React SPA patterns for Vite and CRA" for me. Fetch the SKILL.md and its reference files from the source repository into a temporary folder, review them for anything suspicious, and report in two or three sentences what the guide covers (ClerkProvider setup, hooks usage, protected routes, token for API calls, custom sign-in flows) so I can follow it in my own project. Do not copy the guide's content into my project — this is a reference lookup only. Repository: https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Rules: don't touch anything outside the temp folder. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : une SPA React (Vite ou CRA) avec @clerk/react installé ; une clé publishable Clerk (free tier) ; aucune licence déclarée dans le dépôt source — lisez-le vous-même avant d'en réutiliser le contenu Installe-moi « Patterns Clerk React SPA pour Vite et CRA ». Récupère le SKILL.md et ses fichiers de référence depuis le dépôt source dans un dossier temporaire, examine-les pour tout contenu suspect, et indique en deux ou trois phrases ce que couvre le guide (configuration ClerkProvider, usage des hooks, routes protégées, token pour appels API, formulaires custom) pour que je puisse le suivre dans mon propre projet. Ne copie pas le contenu du guide dans mon projet — c'est une consultation de référence seulement. Dépôt : https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---
- Quoi
- Auth Clerk côté client dans les SPA React — configuration ClerkProvider, hooks useAuth/useUser, routes protégées, formulaires de connexion personnalisés - **creator:** @clerk - **type:** Agent skill - **url:** https://github.com/clerk/skills - **cat:** Developer tools - **kws:** clerk, react, spa, vite, cra, useauth, hooks, protected routes, authentication, sign-in - **license:** unknown **Description EN:** Curated by Skill Harbor — a short pointer to @clerk's official guide for `@clerk/react` in Vite/CRA single-page apps: ClerkProvider setup, the mental model of client-only auth, guarding on `isLoaded` before trusting `isSignedIn`, `useAuth`/`useUser`/`useClerk` hooks, protected routes with React Router, session JWT tokens for API calls, and custom sign-in/sign-up forms. Honest caveats: **no license declared in the repository — license unknown**, so this is a short fiche linking to the source, without reusing its content; SPA-only — for Next.js see the companion Next.js patterns guide, for TanStack Start see the TanStack patterns guide; needs a Clerk publishable key (free). Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — un renvoi court vers le guide officiel de @clerk pour `@clerk/react` dans les SPA Vite/CRA : configuration du ClerkProvider, modèle mental de l'auth 100 % client, vérification de `isLoaded` avant de faire confiance à `isSignedIn`, hooks `useAuth`/`useUser`/`useClerk`, routes protégées avec React Router, tokens JWT de session pour les appels API, et formulaires de connexion/inscription personnalisés. Bémols honnêtes : **aucune licence déclarée dans le dépôt — licence inconnue**, d'où cette fiche courte avec lien vers la source, sans réutiliser son contenu ; réservé aux SPA — pour Next.js voir le guide patterns Next.js, pour TanStack Start voir le guide TanStack ; nécessite une clé publishable Clerk (gratuite). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a React SPA (Vite or CRA) with @clerk/react installed; a Clerk publishable key (free tier); no license declared in the source repo — read it yourself before reusing its content Install "Clerk React SPA patterns for Vite and CRA" for me. Fetch the SKILL.md and its reference files from the source repository into a temporary folder, review them for anything suspicious, and report in two or three sentences what the guide covers (ClerkProvider setup, hooks usage, protected routes, token for API calls, custom sign-in flows) so I can follow it in my own project. Do not copy the guide's content into my project — this is a reference lookup only. Repository: https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Rules: don't touch anything outside the temp folder. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : une SPA React (Vite ou CRA) avec @clerk/react installé ; une clé publishable Clerk (free tier) ; aucune licence déclarée dans le dépôt source — lisez-le vous-même avant d'en réutiliser le contenu Installe-moi « Patterns Clerk React SPA pour Vite et CRA ». Récupère le SKILL.md et ses fichiers de référence depuis le dépôt source dans un dossier temporaire, examine-les pour tout contenu suspect, et indique en deux ou trois phrases ce que couvre le guide (configuration ClerkProvider, usage des hooks, routes protégées, token pour appels API, formulaires custom) pour que je puisse le suivre dans mon propre projet. Ne copie pas le contenu du guide dans mon projet — c'est une consultation de référence seulement. Dépôt : https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---
- Coût
- Gratuit
- Prérequis
- une SPA React (Vite ou CRA) avec @clerk/react installé ; une clé publishable Clerk (free tier) ; aucune licence déclarée dans le dépôt source — lisez-le vous-même avant d'en réutiliser le contenu
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un renvoi court vers le guide officiel de @clerk pour `@clerk/react` dans les SPA Vite/CRA : configuration du ClerkProvider, modèle mental de l'auth 100 % client, vérification de `isLoaded` avant de faire confiance à `isSignedIn`, hooks `useAuth`/`useUser`/`useClerk`, routes protégées avec React Router, tokens JWT de session pour les appels API, et formulaires de connexion/inscription personnalisés. Bémols honnêtes : **aucune licence déclarée dans le dépôt — licence inconnue**, d'où cette fiche courte avec lien vers la source, sans réutiliser son contenu ; réservé aux SPA — pour Next.js voir le guide patterns Next.js, pour TanStack Start voir le guide TanStack ; nécessite une clé publishable Clerk (gratuite). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : une SPA React (Vite ou CRA) avec @clerk/react installé ; une clé publishable Clerk (free tier) ; aucune licence déclarée dans le dépôt source — lisez-le vous-même avant d'en réutiliser le contenu Installe-moi « Patterns Clerk React SPA pour Vite et CRA ». Récupère le SKILL.md et ses fichiers de référence depuis le dépôt source dans un dossier temporaire, examine-les pour tout contenu suspect, et indique en deux ou trois phrases ce que couvre le guide (configuration ClerkProvider, usage des hooks, routes protégées, token pour appels API, formulaires custom) pour que je puisse le suivre dans mon propre projet. Ne copie pas le contenu du guide dans mon projet — c'est une consultation de référence seulement. Dépôt : https://github.com/clerk/skills/blob/main/skills/frameworks/clerk-react-patterns/SKILL.md GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.