clerk-react-patterns은(는) 무엇을 하나요?
@clerk/react를 사용한 Vite/CRA 기반 React SPA 인증 패턴 - ClerkProvider 설정, useAuth/useUser/useClerk 훅, React Router 보호된 라우트, 커스텀 로그인 플로우를 다룹니다. 트리거 키워드: Vite Clerk 설정, React Router 인증, useAuth 훅, 보호된 라우트, 커스텀 로그인 폼 React.
React SPA 인증 패턴 - @clerk/react와 Vite/CRA를 위한 ClerkProvider 설정, useAuth/useUser/useClerk 훅, React Router 보호된 라우트, 커스텀 로그인 플로우를 제공합니다.
이 스킬은 React 단일 페이지 애플리케이션(SPA)에서 @clerk/react 라이브러리를 사용하여 인증 기능을 손쉽게 통합할 수 있도록 설계되었습니다. Vite 또는 Create React App(CRA) 환경에서 ClerkProvider를 최상위 컴포넌트로 설정하고, useAuth, useUser, useClerk 훅을 통해 인증 상태, 사용자 정보, Clerk SDK 기능에 접근하는 방법을 제공합니다. 또한 React Router와 함께 보호된 라우트(Protected Route)를 구현하는 패턴과 완전히 커스터마이즈 가능한 로그인 폼을 만드는 방법을 다룹니다. 이 스킬은 'Vite Clerk 설정', 'React Router 인증', 'useAuth 훅', '보호된 라우트', '커스텀 로그인 폼'과 같은 키워드로 트리거되어 개발자가 빠르게 안전한 인증 시스템을 구축할 수 있도록 도와줍니다.
npx skills add https://github.com/clerk/skills/tree/main/skills/clerk-react-patternsInstalled? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →
@clerk/react를 사용한 Vite/CRA 기반 React SPA 인증 패턴 - ClerkProvider 설정, useAuth/useUser/useClerk 훅, React Router 보호된 라우트, 커스텀 로그인 플로우를 다룹니다. 트리거 키워드: Vite Clerk 설정, React Router 인증, useAuth 훅, 보호된 라우트, 커스텀 로그인 폼 React.
This repo contains 19 individual skills — each has its own dedicated page.
Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments, pricing, plans, seat-based pricing, feature entitlements, syncing users, or testing. Automatically routes to the specific skill based on their task.
Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/UserButton or custom API-driven auth flows. Do not use for Expo or React Native projects.
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.
Clerk Backend REST API explorer and executor. Browse tags, inspect endpoint schemas, and execute authenticated requests. Use when listing users, managing organizations, or calling any Clerk API endpoint.
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 billing webhooks. Use for SaaS monetization, plan gating, checkout flows, trials, invoicing, and subscription lifecycle management.
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. Triggers on: Chrome extension auth, Plasmo clerk, popup sign-in, syncHost, background service worker token, createClerkClient, headless extension.
Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.
Implement Clerk authentication for Expo and React Native apps using @clerk/expo source-guided patterns. Use for prebuilt AuthView/UserButton or custom hook-driven auth flows. Do not use for native iOS/Swift, native Android/Kotlin, or web framework projects.
Expo / React Native patterns with Clerk — SecureStore token cache, OAuth deep linking, useAuth in native, Expo Router protected routes, push notifications with user context. Triggers on: expo clerk, clerk react native, SecureStore token cache, expo router auth, OAuth deep link clerk, mobile auth clerk.
Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.
Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.
Clerk Organizations for B2B SaaS - create multi-tenant apps with org switching, role-based access, verified domains, and enterprise SSO. Use for team workspaces, RBAC, org-based routing, member management.
React Router v7 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router.
Add Clerk authentication to any project by following the official quickstart guides.
Implement Clerk authentication for native Swift and iOS apps using ClerkKit and ClerkKitUI source-guided patterns. Use for prebuilt AuthView or custom native flows. Do not use for Expo or React Native projects.
TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.
E2E testing for Clerk apps. Use with Playwright or Cypress for auth flow tests.
Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.
Clerk webhooks for real-time events and data syncing. Verify with verifyWebhook from the framework-specific package. Handle user, session, organization, billing, and payment events. Build event-driven features like database sync, notifications, and integrations.
Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.
Control Eight Sleep pods (status, temperature, alarms, schedules).
BluOS CLI (blu) for discovery, playback, grouping, and volume.
Create, search, and manage Bear notes via grizzly CLI.
Capture frames or clips from RTSP/ONVIF cameras.
Search GIF providers with CLI/TUI, download results, and extract stills/sheets.