opencode-skills-collection 1.0.186 → 1.0.187

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/bundled-skills/.antigravity-install-manifest.json +5 -1
  2. package/bundled-skills/3d-web-experience/SKILL.md +152 -37
  3. package/bundled-skills/agent-evaluation/SKILL.md +1088 -26
  4. package/bundled-skills/agent-memory-systems/SKILL.md +1037 -25
  5. package/bundled-skills/agent-tool-builder/SKILL.md +668 -16
  6. package/bundled-skills/ai-agents-architect/SKILL.md +271 -31
  7. package/bundled-skills/ai-product/SKILL.md +716 -26
  8. package/bundled-skills/ai-wrapper-product/SKILL.md +450 -44
  9. package/bundled-skills/algolia-search/SKILL.md +867 -15
  10. package/bundled-skills/autonomous-agents/SKILL.md +1033 -26
  11. package/bundled-skills/aws-serverless/SKILL.md +1046 -35
  12. package/bundled-skills/azure-functions/SKILL.md +1318 -19
  13. package/bundled-skills/browser-automation/SKILL.md +1065 -28
  14. package/bundled-skills/browser-extension-builder/SKILL.md +159 -32
  15. package/bundled-skills/bullmq-specialist/SKILL.md +347 -16
  16. package/bundled-skills/clerk-auth/SKILL.md +796 -15
  17. package/bundled-skills/computer-use-agents/SKILL.md +1870 -28
  18. package/bundled-skills/context-window-management/SKILL.md +271 -18
  19. package/bundled-skills/conversation-memory/SKILL.md +453 -24
  20. package/bundled-skills/crewai/SKILL.md +252 -46
  21. package/bundled-skills/discord-bot-architect/SKILL.md +1207 -34
  22. package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
  23. package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
  24. package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
  25. package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
  26. package/bundled-skills/docs/users/bundles.md +1 -1
  27. package/bundled-skills/docs/users/claude-code-skills.md +1 -1
  28. package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
  29. package/bundled-skills/docs/users/getting-started.md +1 -1
  30. package/bundled-skills/docs/users/kiro-integration.md +1 -1
  31. package/bundled-skills/docs/users/usage.md +4 -4
  32. package/bundled-skills/docs/users/visual-guide.md +4 -4
  33. package/bundled-skills/email-systems/SKILL.md +646 -26
  34. package/bundled-skills/faf-expert/SKILL.md +221 -0
  35. package/bundled-skills/faf-wizard/SKILL.md +252 -0
  36. package/bundled-skills/file-uploads/SKILL.md +212 -11
  37. package/bundled-skills/firebase/SKILL.md +646 -16
  38. package/bundled-skills/gcp-cloud-run/SKILL.md +1117 -32
  39. package/bundled-skills/graphql/SKILL.md +1026 -27
  40. package/bundled-skills/hubspot-integration/SKILL.md +804 -19
  41. package/bundled-skills/idea-darwin/SKILL.md +120 -0
  42. package/bundled-skills/inngest/SKILL.md +431 -16
  43. package/bundled-skills/interactive-portfolio/SKILL.md +342 -44
  44. package/bundled-skills/langfuse/SKILL.md +296 -41
  45. package/bundled-skills/langgraph/SKILL.md +259 -50
  46. package/bundled-skills/micro-saas-launcher/SKILL.md +343 -44
  47. package/bundled-skills/neon-postgres/SKILL.md +572 -15
  48. package/bundled-skills/nextjs-supabase-auth/SKILL.md +269 -21
  49. package/bundled-skills/notion-template-business/SKILL.md +371 -44
  50. package/bundled-skills/personal-tool-builder/SKILL.md +537 -44
  51. package/bundled-skills/plaid-fintech/SKILL.md +825 -19
  52. package/bundled-skills/prompt-caching/SKILL.md +438 -25
  53. package/bundled-skills/rag-engineer/SKILL.md +271 -29
  54. package/bundled-skills/salesforce-development/SKILL.md +912 -19
  55. package/bundled-skills/satori/SKILL.md +54 -0
  56. package/bundled-skills/scroll-experience/SKILL.md +381 -44
  57. package/bundled-skills/segment-cdp/SKILL.md +817 -19
  58. package/bundled-skills/shopify-apps/SKILL.md +1475 -19
  59. package/bundled-skills/slack-bot-builder/SKILL.md +1162 -28
  60. package/bundled-skills/telegram-bot-builder/SKILL.md +152 -37
  61. package/bundled-skills/telegram-mini-app/SKILL.md +445 -44
  62. package/bundled-skills/trigger-dev/SKILL.md +916 -27
  63. package/bundled-skills/twilio-communications/SKILL.md +1310 -28
  64. package/bundled-skills/upstash-qstash/SKILL.md +898 -27
  65. package/bundled-skills/vercel-deployment/SKILL.md +637 -39
  66. package/bundled-skills/viral-generator-builder/SKILL.md +132 -37
  67. package/bundled-skills/voice-agents/SKILL.md +937 -27
  68. package/bundled-skills/voice-ai-development/SKILL.md +375 -46
  69. package/bundled-skills/workflow-automation/SKILL.md +982 -29
  70. package/bundled-skills/zapier-make-patterns/SKILL.md +772 -27
  71. package/package.json +1 -1
@@ -1,13 +1,16 @@
1
1
  ---
2
2
  name: clerk-auth
3
- description: "Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up."
3
+ description: Expert patterns for Clerk auth implementation, middleware,
4
+ organizations, webhooks, and user sync
4
5
  risk: safe
5
- source: "vibeship-spawner-skills (Apache 2.0)"
6
- date_added: "2026-02-27"
6
+ source: vibeship-spawner-skills (Apache 2.0)
7
+ date_added: 2026-02-27
7
8
  ---
8
9
 
9
10
  # Clerk Authentication
10
11
 
12
+ Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync
13
+
11
14
  ## Patterns
12
15
 
13
16
  ### Next.js App Router Setup
@@ -22,6 +25,81 @@ Key components:
22
25
  - <SignIn />, <SignUp />: Pre-built auth forms
23
26
  - <UserButton />: User menu with session management
24
27
 
28
+ ### Code_example
29
+
30
+ # Environment variables (.env.local)
31
+ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
32
+ CLERK_SECRET_KEY=sk_test_...
33
+ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
34
+ NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
35
+ NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
36
+ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
37
+
38
+ // app/layout.tsx
39
+ import { ClerkProvider } from '@clerk/nextjs';
40
+
41
+ export default function RootLayout({
42
+ children,
43
+ }: {
44
+ children: React.ReactNode;
45
+ }) {
46
+ return (
47
+ <ClerkProvider>
48
+ <html lang="en">
49
+ <body>{children}</body>
50
+ </html>
51
+ </ClerkProvider>
52
+ );
53
+ }
54
+
55
+ // app/sign-in/[[...sign-in]]/page.tsx
56
+ import { SignIn } from '@clerk/nextjs';
57
+
58
+ export default function SignInPage() {
59
+ return (
60
+ <div className="flex justify-center items-center min-h-screen">
61
+ <SignIn />
62
+ </div>
63
+ );
64
+ }
65
+
66
+ // app/sign-up/[[...sign-up]]/page.tsx
67
+ import { SignUp } from '@clerk/nextjs';
68
+
69
+ export default function SignUpPage() {
70
+ return (
71
+ <div className="flex justify-center items-center min-h-screen">
72
+ <SignUp />
73
+ </div>
74
+ );
75
+ }
76
+
77
+ // components/Header.tsx
78
+ import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
79
+
80
+ export function Header() {
81
+ return (
82
+ <header className="flex justify-between p-4">
83
+ <h1>My App</h1>
84
+ <SignedOut>
85
+ <SignInButton />
86
+ </SignedOut>
87
+ <SignedIn>
88
+ <UserButton afterSignOutUrl="/" />
89
+ </SignedIn>
90
+ </header>
91
+ );
92
+ }
93
+
94
+ ### Anti_patterns
95
+
96
+ - Pattern: ClerkProvider inside page component | Why: Provider must wrap entire app in root layout | Fix: Move ClerkProvider to app/layout.tsx
97
+ - Pattern: Using auth() without middleware | Why: auth() requires clerkMiddleware to be configured | Fix: Set up middleware.ts with clerkMiddleware
98
+
99
+ ### References
100
+
101
+ - https://clerk.com/docs/nextjs/getting-started/quickstart
102
+
25
103
  ### Middleware Route Protection
26
104
 
27
105
  Protect routes using clerkMiddleware and createRouteMatcher.
@@ -32,6 +110,73 @@ Best practices:
32
110
  - auth.protect() for explicit protection
33
111
  - Centralize all auth logic in middleware
34
112
 
113
+ ### Code_example
114
+
115
+ // middleware.ts
116
+ import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
117
+
118
+ // Define protected route patterns
119
+ const isProtectedRoute = createRouteMatcher([
120
+ '/dashboard(.*)',
121
+ '/settings(.*)',
122
+ '/api/private(.*)',
123
+ ]);
124
+
125
+ // Define public routes (optional, for clarity)
126
+ const isPublicRoute = createRouteMatcher([
127
+ '/',
128
+ '/sign-in(.*)',
129
+ '/sign-up(.*)',
130
+ '/api/webhooks(.*)',
131
+ ]);
132
+
133
+ export default clerkMiddleware(async (auth, req) => {
134
+ // Protect matched routes
135
+ if (isProtectedRoute(req)) {
136
+ await auth.protect();
137
+ }
138
+ });
139
+
140
+ export const config = {
141
+ matcher: [
142
+ // Match all routes except static files
143
+ '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
144
+ // Always run for API routes
145
+ '/(api|trpc)(.*)',
146
+ ],
147
+ };
148
+
149
+ // Advanced: Role-based protection
150
+ export default clerkMiddleware(async (auth, req) => {
151
+ if (isProtectedRoute(req)) {
152
+ await auth.protect();
153
+ }
154
+
155
+ // Admin routes require admin role
156
+ if (req.nextUrl.pathname.startsWith('/admin')) {
157
+ await auth.protect({
158
+ role: 'org:admin',
159
+ });
160
+ }
161
+
162
+ // Premium routes require premium permission
163
+ if (req.nextUrl.pathname.startsWith('/premium')) {
164
+ await auth.protect({
165
+ permission: 'org:premium:access',
166
+ });
167
+ }
168
+ });
169
+
170
+ ### Anti_patterns
171
+
172
+ - Pattern: Multiple middleware.ts files | Why: Causes conflicts and redirect loops | Fix: Use single middleware.ts with route matchers
173
+ - Pattern: Manual redirects in components | Why: Double redirects, missed routes | Fix: Handle all redirects in middleware
174
+ - Pattern: Missing matcher config | Why: Middleware won't run on all routes | Fix: Add comprehensive matcher pattern
175
+
176
+ ### References
177
+
178
+ - https://clerk.com/docs/reference/nextjs/clerk-middleware
179
+
35
180
  ### Server Component Authentication
36
181
 
37
182
  Access auth state in Server Components using auth() and currentUser().
@@ -41,18 +186,654 @@ Key functions:
41
186
  - currentUser(): Returns full User object
42
187
  - Both require clerkMiddleware to be configured
43
188
 
44
- ## ⚠️ Sharp Edges
189
+ ### Code_example
190
+
191
+ // app/dashboard/page.tsx (Server Component)
192
+ import { auth, currentUser } from '@clerk/nextjs/server';
193
+ import { redirect } from 'next/navigation';
194
+
195
+ export default async function DashboardPage() {
196
+ const { userId } = await auth();
197
+
198
+ if (!userId) {
199
+ redirect('/sign-in');
200
+ }
201
+
202
+ // Full user data (counts toward rate limits)
203
+ const user = await currentUser();
204
+
205
+ return (
206
+ <div>
207
+ <h1>Welcome, {user?.firstName}!</h1>
208
+ <p>Email: {user?.emailAddresses[0]?.emailAddress}</p>
209
+ </div>
210
+ );
211
+ }
212
+
213
+ // Using auth() for quick checks
214
+ export default async function ProtectedLayout({
215
+ children,
216
+ }: {
217
+ children: React.ReactNode;
218
+ }) {
219
+ const { userId, orgId, orgRole } = await auth();
220
+
221
+ if (!userId) {
222
+ redirect('/sign-in');
223
+ }
224
+
225
+ // Check organization access
226
+ if (!orgId) {
227
+ redirect('/select-org');
228
+ }
229
+
230
+ return (
231
+ <div>
232
+ <p>Organization Role: {orgRole}</p>
233
+ {children}
234
+ </div>
235
+ );
236
+ }
237
+
238
+ // Server Action with auth check
239
+ // app/actions/posts.ts
240
+ 'use server';
241
+ import { auth } from '@clerk/nextjs/server';
242
+
243
+ export async function createPost(formData: FormData) {
244
+ const { userId } = await auth();
245
+
246
+ if (!userId) {
247
+ throw new Error('Unauthorized');
248
+ }
249
+
250
+ const title = formData.get('title') as string;
251
+
252
+ // Create post with userId
253
+ const post = await prisma.post.create({
254
+ data: {
255
+ title,
256
+ authorId: userId,
257
+ },
258
+ });
259
+
260
+ return post;
261
+ }
262
+
263
+ ### Anti_patterns
264
+
265
+ - Pattern: Not awaiting auth() | Why: auth() is async in App Router | Fix: Use await auth() or const { userId } = await auth()
266
+ - Pattern: Using currentUser() for simple checks | Why: Counts toward rate limits, slower than auth() | Fix: Use auth() for userId checks, currentUser() for user data
267
+
268
+ ### References
269
+
270
+ - https://clerk.com/docs/references/nextjs/auth
271
+
272
+ ### Client Component Hooks
273
+
274
+ Access auth state in Client Components using hooks.
275
+
276
+ Key hooks:
277
+ - useUser(): User object and loading state
278
+ - useAuth(): Auth state, signOut, etc.
279
+ - useSession(): Session object
280
+ - useOrganization(): Current organization
281
+
282
+ ### Code_example
283
+
284
+ // components/UserProfile.tsx
285
+ 'use client';
286
+ import { useUser, useAuth } from '@clerk/nextjs';
287
+
288
+ export function UserProfile() {
289
+ const { user, isLoaded, isSignedIn } = useUser();
290
+ const { signOut } = useAuth();
291
+
292
+ if (!isLoaded) {
293
+ return <div>Loading...</div>;
294
+ }
295
+
296
+ if (!isSignedIn) {
297
+ return <div>Not signed in</div>;
298
+ }
299
+
300
+ return (
301
+ <div>
302
+ <img src={user.imageUrl} alt={user.fullName ?? ''} />
303
+ <h2>{user.fullName}</h2>
304
+ <p>{user.emailAddresses[0]?.emailAddress}</p>
305
+ <button onClick={() => signOut()}>Sign Out</button>
306
+ </div>
307
+ );
308
+ }
309
+
310
+ // Organization context
311
+ 'use client';
312
+ import { useOrganization, useOrganizationList } from '@clerk/nextjs';
313
+
314
+ export function OrgSwitcher() {
315
+ const { organization, membership } = useOrganization();
316
+ const { setActive, userMemberships } = useOrganizationList({
317
+ userMemberships: { infinite: true },
318
+ });
319
+
320
+ if (!organization) {
321
+ return <p>No organization selected</p>;
322
+ }
323
+
324
+ return (
325
+ <div>
326
+ <p>Current: {organization.name}</p>
327
+ <p>Role: {membership?.role}</p>
328
+
329
+ <select
330
+ onChange={(e) => setActive?.({ organization: e.target.value })}
331
+ value={organization.id}
332
+ >
333
+ {userMemberships.data?.map((mem) => (
334
+ <option key={mem.organization.id} value={mem.organization.id}>
335
+ {mem.organization.name}
336
+ </option>
337
+ ))}
338
+ </select>
339
+ </div>
340
+ );
341
+ }
342
+
343
+ // Protected client component
344
+ 'use client';
345
+ import { useAuth } from '@clerk/nextjs';
346
+ import { useRouter } from 'next/navigation';
347
+ import { useEffect } from 'react';
348
+
349
+ export function ProtectedContent() {
350
+ const { isLoaded, userId } = useAuth();
351
+ const router = useRouter();
352
+
353
+ useEffect(() => {
354
+ if (isLoaded && !userId) {
355
+ router.push('/sign-in');
356
+ }
357
+ }, [isLoaded, userId, router]);
358
+
359
+ if (!isLoaded || !userId) {
360
+ return <div>Loading...</div>;
361
+ }
362
+
363
+ return <div>Protected content here</div>;
364
+ }
365
+
366
+ ### Anti_patterns
367
+
368
+ - Pattern: Not checking isLoaded | Why: Auth state undefined during hydration | Fix: Always check isLoaded before accessing user/auth state
369
+ - Pattern: Using hooks in Server Components | Why: Hooks only work in Client Components | Fix: Use auth() and currentUser() in Server Components
370
+
371
+ ### References
372
+
373
+ - https://clerk.com/docs/references/react/use-user
374
+
375
+ ### Organizations and Multi-Tenancy
376
+
377
+ Implement B2B multi-tenancy with Clerk Organizations.
378
+
379
+ Features:
380
+ - Multiple orgs per user
381
+ - Roles and permissions
382
+ - Organization-scoped data
383
+ - Enterprise SSO per organization
384
+
385
+ ### Code_example
386
+
387
+ // Organization creation UI
388
+ // app/create-org/page.tsx
389
+ import { CreateOrganization } from '@clerk/nextjs';
390
+
391
+ export default function CreateOrgPage() {
392
+ return (
393
+ <div className="flex justify-center">
394
+ <CreateOrganization afterCreateOrganizationUrl="/dashboard" />
395
+ </div>
396
+ );
397
+ }
398
+
399
+ // Organization profile and management
400
+ // app/org-settings/page.tsx
401
+ import { OrganizationProfile } from '@clerk/nextjs';
402
+
403
+ export default function OrgSettingsPage() {
404
+ return <OrganizationProfile />;
405
+ }
406
+
407
+ // Organization switcher in header
408
+ // components/Header.tsx
409
+ import { OrganizationSwitcher, UserButton } from '@clerk/nextjs';
410
+
411
+ export function Header() {
412
+ return (
413
+ <header className="flex justify-between p-4">
414
+ <OrganizationSwitcher
415
+ hidePersonal
416
+ afterCreateOrganizationUrl="/dashboard"
417
+ afterSelectOrganizationUrl="/dashboard"
418
+ />
419
+ <UserButton />
420
+ </header>
421
+ );
422
+ }
423
+
424
+ // Org-scoped data access
425
+ // app/dashboard/page.tsx
426
+ import { auth } from '@clerk/nextjs/server';
427
+ import { prisma } from '@/lib/prisma';
428
+
429
+ export default async function DashboardPage() {
430
+ const { orgId } = await auth();
431
+
432
+ if (!orgId) {
433
+ redirect('/select-org');
434
+ }
435
+
436
+ // Fetch org-scoped data
437
+ const projects = await prisma.project.findMany({
438
+ where: { organizationId: orgId },
439
+ });
440
+
441
+ return (
442
+ <div>
443
+ <h1>Projects</h1>
444
+ {projects.map((p) => (
445
+ <div key={p.id}>{p.name}</div>
446
+ ))}
447
+ </div>
448
+ );
449
+ }
450
+
451
+ // Role-based UI
452
+ 'use client';
453
+ import { useOrganization, Protect } from '@clerk/nextjs';
454
+
455
+ export function AdminPanel() {
456
+ const { membership } = useOrganization();
457
+
458
+ // Using Protect component
459
+ return (
460
+ <Protect role="org:admin" fallback={<p>Admin access required</p>}>
461
+ <div>Admin content here</div>
462
+ </Protect>
463
+ );
464
+
465
+ // Or manual check
466
+ if (membership?.role !== 'org:admin') {
467
+ return <p>Admin access required</p>;
468
+ }
469
+
470
+ return <div>Admin content here</div>;
471
+ }
472
+
473
+ ### Anti_patterns
474
+
475
+ - Pattern: Not scoping data by orgId | Why: Data leaks between organizations | Fix: Always filter queries by orgId from auth()
476
+ - Pattern: Hardcoding role strings | Why: Typos cause access issues | Fix: Define role constants or use TypeScript enums
477
+
478
+ ### References
479
+
480
+ - https://clerk.com/docs/guides/organizations
481
+ - https://clerk.com/articles/multi-tenancy-in-react-applications-guide
482
+
483
+ ### Webhook User Sync
484
+
485
+ Sync Clerk users to your database using webhooks.
486
+
487
+ Key webhooks:
488
+ - user.created: New user signed up
489
+ - user.updated: User profile changed
490
+ - user.deleted: User deleted account
491
+
492
+ Uses svix for signature verification.
493
+
494
+ ### Code_example
495
+
496
+ // app/api/webhooks/clerk/route.ts
497
+ import { Webhook } from 'svix';
498
+ import { headers } from 'next/headers';
499
+ import { WebhookEvent } from '@clerk/nextjs/server';
500
+ import { prisma } from '@/lib/prisma';
501
+
502
+ export async function POST(req: Request) {
503
+ const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
504
+
505
+ if (!WEBHOOK_SECRET) {
506
+ throw new Error('Missing CLERK_WEBHOOK_SECRET');
507
+ }
508
+
509
+ // Get headers
510
+ const headerPayload = await headers();
511
+ const svix_id = headerPayload.get('svix-id');
512
+ const svix_timestamp = headerPayload.get('svix-timestamp');
513
+ const svix_signature = headerPayload.get('svix-signature');
514
+
515
+ if (!svix_id || !svix_timestamp || !svix_signature) {
516
+ return new Response('Missing svix headers', { status: 400 });
517
+ }
518
+
519
+ // Get body
520
+ const payload = await req.json();
521
+ const body = JSON.stringify(payload);
45
522
 
46
- | Issue | Severity | Solution |
47
- |-------|----------|----------|
48
- | Issue | critical | See docs |
49
- | Issue | high | See docs |
50
- | Issue | high | See docs |
51
- | Issue | high | See docs |
52
- | Issue | medium | See docs |
53
- | Issue | medium | See docs |
54
- | Issue | medium | See docs |
55
- | Issue | medium | See docs |
523
+ // Verify webhook
524
+ const wh = new Webhook(WEBHOOK_SECRET);
525
+ let evt: WebhookEvent;
526
+
527
+ try {
528
+ evt = wh.verify(body, {
529
+ 'svix-id': svix_id,
530
+ 'svix-timestamp': svix_timestamp,
531
+ 'svix-signature': svix_signature,
532
+ }) as WebhookEvent;
533
+ } catch (err) {
534
+ console.error('Webhook verification failed:', err);
535
+ return new Response('Verification failed', { status: 400 });
536
+ }
537
+
538
+ // Handle events
539
+ const eventType = evt.type;
540
+
541
+ if (eventType === 'user.created') {
542
+ const { id, email_addresses, first_name, last_name, image_url } = evt.data;
543
+
544
+ await prisma.user.create({
545
+ data: {
546
+ clerkId: id,
547
+ email: email_addresses[0]?.email_address,
548
+ firstName: first_name,
549
+ lastName: last_name,
550
+ imageUrl: image_url,
551
+ },
552
+ });
553
+ }
554
+
555
+ if (eventType === 'user.updated') {
556
+ const { id, email_addresses, first_name, last_name, image_url } = evt.data;
557
+
558
+ await prisma.user.update({
559
+ where: { clerkId: id },
560
+ data: {
561
+ email: email_addresses[0]?.email_address,
562
+ firstName: first_name,
563
+ lastName: last_name,
564
+ imageUrl: image_url,
565
+ },
566
+ });
567
+ }
568
+
569
+ if (eventType === 'user.deleted') {
570
+ const { id } = evt.data;
571
+
572
+ await prisma.user.delete({
573
+ where: { clerkId: id! },
574
+ });
575
+ }
576
+
577
+ return new Response('Webhook processed', { status: 200 });
578
+ }
579
+
580
+ // Prisma schema
581
+ // prisma/schema.prisma
582
+ model User {
583
+ id String @id @default(cuid())
584
+ clerkId String @unique
585
+ email String @unique
586
+ firstName String?
587
+ lastName String?
588
+ imageUrl String?
589
+ createdAt DateTime @default(now())
590
+ updatedAt DateTime @updatedAt
591
+
592
+ posts Post[]
593
+ @@index([clerkId])
594
+ }
595
+
596
+ ### Anti_patterns
597
+
598
+ - Pattern: Not verifying webhook signature | Why: Anyone can hit your endpoint with fake data | Fix: Always verify with svix
599
+ - Pattern: Blocking middleware for webhook routes | Why: Webhooks come from Clerk, not authenticated users | Fix: Add /api/webhooks(.*)' to public routes
600
+ - Pattern: Not handling race conditions | Why: user.created might arrive after user.updated | Fix: Use upsert instead of create, handle missing records
601
+
602
+ ### References
603
+
604
+ - https://clerk.com/docs/webhooks/sync-data
605
+ - https://clerk.com/articles/how-to-sync-clerk-user-data-to-your-database
606
+
607
+ ### API Route Protection
608
+
609
+ Protect API routes using auth() from Clerk.
610
+
611
+ Route Handlers in App Router use auth() for authentication.
612
+ Middleware provides initial protection, auth() provides in-handler verification.
613
+
614
+ ### Code_example
615
+
616
+ // app/api/projects/route.ts
617
+ import { auth } from '@clerk/nextjs/server';
618
+ import { prisma } from '@/lib/prisma';
619
+ import { NextResponse } from 'next/server';
620
+
621
+ export async function GET() {
622
+ const { userId, orgId } = await auth();
623
+
624
+ if (!userId) {
625
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
626
+ }
627
+
628
+ // User's personal projects or org projects
629
+ const projects = await prisma.project.findMany({
630
+ where: orgId
631
+ ? { organizationId: orgId }
632
+ : { userId, organizationId: null },
633
+ });
634
+
635
+ return NextResponse.json(projects);
636
+ }
637
+
638
+ export async function POST(req: Request) {
639
+ const { userId, orgId } = await auth();
640
+
641
+ if (!userId) {
642
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
643
+ }
644
+
645
+ const body = await req.json();
646
+
647
+ const project = await prisma.project.create({
648
+ data: {
649
+ name: body.name,
650
+ userId,
651
+ organizationId: orgId ?? null,
652
+ },
653
+ });
654
+
655
+ return NextResponse.json(project, { status: 201 });
656
+ }
657
+
658
+ // Protected with role check
659
+ // app/api/admin/users/route.ts
660
+ export async function GET() {
661
+ const { userId, orgRole } = await auth();
662
+
663
+ if (!userId) {
664
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
665
+ }
666
+
667
+ if (orgRole !== 'org:admin') {
668
+ return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
669
+ }
670
+
671
+ // Admin-only logic
672
+ const users = await prisma.user.findMany();
673
+ return NextResponse.json(users);
674
+ }
675
+
676
+ // Using getAuth in older patterns (not recommended)
677
+ // For backwards compatibility only
678
+ import { getAuth } from '@clerk/nextjs/server';
679
+
680
+ export async function GET(req: Request) {
681
+ const { userId } = getAuth(req);
682
+ // ...
683
+ }
684
+
685
+ ### Anti_patterns
686
+
687
+ - Pattern: Trusting middleware alone | Why: Middleware can be bypassed (CVE-2025-29927) | Fix: Always verify auth in route handler too
688
+ - Pattern: Not checking orgId for multi-tenant | Why: Users might access other org's data | Fix: Always filter by orgId from auth()
689
+
690
+ ### References
691
+
692
+ - https://clerk.com/docs/guides/protecting-pages
693
+
694
+ ## Sharp Edges
695
+
696
+ ### CVE-2025-29927 Middleware Bypass Vulnerability
697
+
698
+ Severity: CRITICAL
699
+
700
+ ### Multiple Middleware Files Cause Conflicts
701
+
702
+ Severity: HIGH
703
+
704
+ ### 4KB Session Token Cookie Limit
705
+
706
+ Severity: HIGH
707
+
708
+ ### auth() Requires clerkMiddleware Configuration
709
+
710
+ Severity: HIGH
711
+
712
+ ### Webhook Race Conditions
713
+
714
+ Severity: MEDIUM
715
+
716
+ ### auth() is Async in App Router
717
+
718
+ Severity: MEDIUM
719
+
720
+ ### Middleware Blocks Webhook Endpoints
721
+
722
+ Severity: MEDIUM
723
+
724
+ ### Accessing Auth State Before isLoaded
725
+
726
+ Severity: MEDIUM
727
+
728
+ ### Manual Redirects Cause Double Redirects
729
+
730
+ Severity: MEDIUM
731
+
732
+ ### Organization Data Not Scoped by orgId
733
+
734
+ Severity: HIGH
735
+
736
+ ## Validation Checks
737
+
738
+ ### Clerk Secret Key in Client Code
739
+
740
+ Severity: ERROR
741
+
742
+ CLERK_SECRET_KEY must only be used server-side
743
+
744
+ Message: Clerk secret key exposed to client. Use CLERK_SECRET_KEY without NEXT_PUBLIC prefix.
745
+
746
+ ### Protected Route Without Middleware
747
+
748
+ Severity: ERROR
749
+
750
+ API routes should have middleware protection
751
+
752
+ Message: API route without auth check. Add middleware protection or auth() check.
753
+
754
+ ### Hardcoded Clerk API Keys
755
+
756
+ Severity: ERROR
757
+
758
+ Clerk keys should use environment variables
759
+
760
+ Message: Hardcoded Clerk keys. Use environment variables.
761
+
762
+ ### Missing Await on auth()
763
+
764
+ Severity: ERROR
765
+
766
+ auth() is async in App Router and must be awaited
767
+
768
+ Message: auth() not awaited. Use 'await auth()' in App Router.
769
+
770
+ ### Multiple Middleware Files
771
+
772
+ Severity: WARNING
773
+
774
+ Only one middleware.ts file should exist
775
+
776
+ Message: Multiple middleware files detected. Use single middleware.ts.
777
+
778
+ ### Webhook Route Not Excluded from Protection
779
+
780
+ Severity: WARNING
781
+
782
+ Webhook routes should be public
783
+
784
+ Message: Webhook route may be blocked by middleware. Add to public routes.
785
+
786
+ ### Accessing Auth Without isLoaded Check
787
+
788
+ Severity: WARNING
789
+
790
+ Check isLoaded before accessing user state in client components
791
+
792
+ Message: Accessing user without isLoaded check. Check isLoaded first.
793
+
794
+ ### Clerk Hooks in Server Component
795
+
796
+ Severity: ERROR
797
+
798
+ Clerk hooks only work in Client Components
799
+
800
+ Message: Clerk hooks in Server Component. Add 'use client' or use auth().
801
+
802
+ ### Multi-Tenant Query Without orgId
803
+
804
+ Severity: WARNING
805
+
806
+ Organization data should be scoped by orgId
807
+
808
+ Message: Query without organization scope. Filter by orgId for multi-tenancy.
809
+
810
+ ### Webhook Without Signature Verification
811
+
812
+ Severity: ERROR
813
+
814
+ Clerk webhooks must verify svix signature
815
+
816
+ Message: Webhook without signature verification. Use svix to verify.
817
+
818
+ ## Collaboration
819
+
820
+ ### Delegation Triggers
821
+
822
+ - user needs database -> postgres-wizard (User table with clerkId)
823
+ - user needs payments -> stripe-integration (Customer linked to Clerk user)
824
+ - user needs search -> algolia-search (Secured API keys per user)
825
+ - user needs analytics -> segment-cdp (User identification)
826
+ - user needs email -> resend-email (Transactional emails)
56
827
 
57
828
  ## When to Use
58
- This skill is applicable to execute the workflow or actions described in the overview.
829
+
830
+ - User mentions or implies: adding authentication
831
+ - User mentions or implies: clerk auth
832
+ - User mentions or implies: user authentication
833
+ - User mentions or implies: sign in
834
+ - User mentions or implies: sign up
835
+ - User mentions or implies: user management
836
+ - User mentions or implies: multi-tenancy
837
+ - User mentions or implies: organizations
838
+ - User mentions or implies: sso
839
+ - User mentions or implies: single sign-on