1{2 "skill_name": "clerk-react-patterns",3 "evals": [4 {5 "id": 1,6 "prompt": "i created a new vite react app and want to add clerk authentication. show me how to set up ClerkProvider and add sign-in and sign-out buttons to my app.",7 "expected_output": "Wraps app in ClerkProvider in main.tsx with publishableKey from VITE_CLERK_PUBLISHABLE_KEY, adds Show/SignInButton/UserButton to App.tsx",8 "scaffold": "react-basic-auth",9 "expectations": [
10 "Adds ClerkProvider to src/main.tsx wrapping the App component",
11 "Reads publishableKey from import.meta.env.VITE_CLERK_PUBLISHABLE_KEY",
12 "Uses Show when='signed-in' and Show when='signed-out' for conditional rendering",
13 "Adds UserButton for signed-in state and SignInButton for signed-out",
14 ".env file uses VITE_ prefix not NEXT_PUBLIC_"
15 ]
16 },
17 {
18 "id": 2,
19 "prompt": "i have a react spa with react router v6. i need to protect my /dashboard and /settings routes so only authenticated users can access them. unauthorized users should be redirected to /sign-in.",
20 "expected_output": "Creates ProtectedRoute component using useAuth with isLoaded and isSignedIn checks, wraps protected routes in React Router",
21 "scaffold": "react-basic-auth",
22 "expectations": [
23 "Creates a ProtectedRoute wrapper component",
24 "Uses useAuth() with isLoaded and isSignedIn checks",
25 "Shows loading state while isLoaded is false",
26 "Redirects to /sign-in using <Navigate replace> when not signed in",
27 "Wraps /dashboard and /settings using the ProtectedRoute in the router config"
28 ]
29 },
30 {
31 "id": 3,
32 "prompt": "i want to build a custom sign-in form with email and password fields instead of using the hosted sign-in page. use clerk's useSignIn hook.",
33 "expected_output": "Custom sign-in form using useSignIn() hook with signIn.password() or signIn.create(), then finalize() or setActive()",
34 "scaffold": "react-basic-auth",
35 "expectations": [
36 "Uses useSignIn hook from @clerk/react",
37 "Calls signIn.password({ identifier, password }) or signIn.create({ identifier, password }) to authenticate",
38 "Checks for success before activating the session (via status check, error check, or conditional after the auth call)",
39 "Activates the session using signIn.finalize() or setActive({ session: createdSessionId })",
40 "Catches and displays error messages from the sign-in response"
41 ]
42 },
43 {
44 "id": 4,
45 "prompt": "i want a user profile page that shows the signed-in user's name, email address, and profile picture. use clerk hooks to get this data.",
50 "Guards on isLoaded before rendering user data",
51 "Accesses user.firstName and user.lastName for name",
52 "Accesses user.emailAddresses[0].emailAddress for email",
53 "Displays user.imageUrl in an img element"
54 ]
55 },
56 {
57 "id": 5,
58 "prompt": "i need to add an organization switcher to my react spa so users can switch between their orgs. how do i render the switcher and read the active org id?",
59 "expected_output": "Renders OrganizationSwitcher from @clerk/react and reads orgId from useAuth()",
60 "scaffold": "react-basic-auth",
61 "expectations": [
62 "Imports and renders <OrganizationSwitcher /> from @clerk/react",
63 "Uses orgId from useAuth() to get the active organization ID",
64 "Handles the case where orgId is null (no org selected)",
65 "Places the switcher in a visible location (nav, header, or sidebar)",
66 "Imports from @clerk/react not @clerk/nextjs"
67 ]
68 },
69 {
70 "id": 6,
71 "prompt": "my react app needs to call a protected backend API. how do i get the clerk session token to include in the Authorization header?",
72 "expected_output": "Uses getToken() from useAuth() and includes the token as Bearer in the Authorization header",
73 "scaffold": "react-basic-auth",
74 "expectations": [
75 "Uses getToken() from useAuth() hook",
76 "Awaits the getToken() call (it returns a Promise)",
77 "Null-checks the token before using it",
78 "Sets Authorization: Bearer <token> header on the fetch request",
79 "Shows a pattern for reuse (custom hook or utility function)"