[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M76SNBA1F0MJZEVSY4R4G9R0":3,"skill-same:01M76SNBA1F0MJZEVSY4R4G9R0":45},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M76SNBA1F0MJZEVSY4R4G9R0","nextjs-setup-better-auth",null,"Setup Better Auth with Email OTP authentication and shadcn\u002Fui components in a Next.js project","zuzu59\u002Fz-skills","zuzu59","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F15345233?v=4","01M756RFXRYFCM8DCAHTP0F5YW","Christian Zufferey","01M756RFYZRYH7F070CKQRMW38",0,"MIT","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fnextjs-setup-better-auth\u002FSKILL.md",[],[],"2026-11-12 13:55:43",false,"---\nname: nextjs-setup-better-auth\ndescription: Setup Better Auth with Email OTP authentication and shadcn\u002Fui components in a Next.js project\n---\n\n\u003Cobjective>\nSetup Better Auth in the current Next.js project with Email OTP authentication flow.\n\nThis creates a production-ready authentication system with Resend email delivery, a beautiful sign-in page using shadcn\u002Fui, and an account management page. Uses Prisma adapter for database integration.\n\u003C\u002Fobjective>\n\n\u003Ccontext>\nProject structure: !`ls -la`\nPrisma schema: !`cat prisma\u002Fschema.prisma 2>\u002Fdev\u002Fnull | head -40 || echo \"No Prisma schema\"`\nExisting auth: !`ls src\u002Flib\u002Fauth* 2>\u002Fdev\u002Fnull || ls lib\u002Fauth* 2>\u002Fdev\u002Fnull || echo \"No auth files\"`\nPath aliases: !`cat tsconfig.json | grep -A5 '\"paths\"'`\n\u003C\u002Fcontext>\n\n\u003Cprocess>\n## Phase 1: Prerequisites\n\n1. **Ask for Resend API Key** - Prompt user:\n   > \"I need your Resend API key to send OTP emails. Get it from https:\u002F\u002Fresend.com\u002Fapi-keys\"\n\n2. **Verify Prisma is configured**:\n   - Check `prisma\u002Fschema.prisma` exists\n   - Identify Prisma client import path (custom output or default)\n   - Confirm `lib\u002Fprisma.ts` singleton exists\n\n## Phase 2: Installation\n\n3. **Install dependencies**:\n   ```bash\n   pnpm add better-auth resend\n   ```\n\n4. **Install shadcn\u002Fui components**:\n   ```bash\n   pnpm dlx shadcn@latest add input label card button tabs input-otp\n   ```\n\n5. **Get reference components** (study then delete):\n   ```bash\n   pnpm dlx shadcn@latest add https:\u002F\u002Fcoss.com\u002Forigin\u002Fr\u002Fcomp-326.json\n   pnpm dlx shadcn@latest add https:\u002F\u002Fcoss.com\u002Forigin\u002Fr\u002Fcomp-324.json\n   ```\n\n## Phase 3: Configuration\n\n6. **Configure environment variables** - Add to `.env`:\n   ```\n   BETTER_AUTH_SECRET=\"[generate with: openssl rand -base64 32]\"\n   BETTER_AUTH_URL=\"http:\u002F\u002Flocalhost:3000\"\n   RESEND_API_KEY=\"[user-provided]\"\n   RESEND_FROM_EMAIL=\"onboarding@resend.dev\"\n   ```\n\n7. **Create Better Auth instance** - `src\u002Flib\u002Fauth.ts`:\n   ```typescript\n   import { betterAuth } from \"better-auth\";\n   import { prismaAdapter } from \"better-auth\u002Fadapters\u002Fprisma\";\n   import { emailOTP } from \"better-auth\u002Fplugins\";\n   import { prisma } from \".\u002Fprisma\";\n   import { Resend } from \"resend\";\n\n   const resend = new Resend(process.env.RESEND_API_KEY);\n\n   export const auth = betterAuth({\n     database: prismaAdapter(prisma, { provider: \"postgresql\" }),\n     emailAndPassword: { enabled: false },\n     plugins: [\n       emailOTP({\n         async sendVerificationOTP({ email, otp, type }) {\n           await resend.emails.send({\n             from: process.env.RESEND_FROM_EMAIL!,\n             to: email,\n             subject: type === \"sign-in\" ? \"Sign in to your account\" : \"Verify your email\",\n             html: `\u003Cp>Your verification code is: \u003Cstrong>${otp}\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>This code will expire in 5 minutes.\u003C\u002Fp>`,\n           });\n         },\n         otpLength: 6,\n         expiresIn: 300,\n       }),\n     ],\n     secret: process.env.BETTER_AUTH_SECRET!,\n     baseURL: process.env.BETTER_AUTH_URL!,\n   });\n   ```\n\n8. **Generate Prisma schema** using Better Auth CLI:\n   ```bash\n   npx @better-auth\u002Fcli generate --config src\u002Flib\u002Fauth.ts\n   npx prisma migrate dev --name add_better_auth\n   npx prisma generate\n   ```\n\n9. **Create API route handler** - `app\u002Fapi\u002Fauth\u002F[...all]\u002Froute.ts`:\n   ```typescript\n   import { auth } from \"@\u002Flib\u002Fauth\";\n   import { toNextJsHandler } from \"better-auth\u002Fnext-js\";\n\n   export const { GET, POST } = toNextJsHandler(auth.handler);\n   ```\n\n10. **Create auth client** - `src\u002Flib\u002Fauth-client.ts`:\n    ```typescript\n    import { createAuthClient } from \"better-auth\u002Freact\";\n    import { emailOTPClient } from \"better-auth\u002Fclient\u002Fplugins\";\n\n    export const authClient = createAuthClient({\n      baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || \"http:\u002F\u002Flocalhost:3000\",\n      plugins: [emailOTPClient()],\n    });\n\n    export const { signIn, signOut, useSession } = authClient;\n    ```\n\n## Phase 4: UI Implementation\n\n11. **Study reference components** - Read comp-326 and comp-324 patterns:\n    - Note form layouts, validation patterns, UX flows\n    - Understand OTP input behavior\n\n12. **Create sign-in page** - `app\u002Fsign-in\u002Fpage.tsx`:\n    - Two-step flow: email input → OTP verification\n    - Use `InputOTP` component with 6 slots\n    - Auto-submit on complete with `onComplete` handler\n    - Loading states and error handling with `text-destructive`\n    - Redirect to `\u002Faccount` on success\n\n13. **Create account page** - `app\u002Faccount\u002Fpage.tsx`:\n    - Protected route (redirect if no session)\n    - Tabs for Profile and Security\n    - Profile form with name update\n    - Sign out button\n    - Session info display\n\n14. **Delete reference components** - Remove comp-326 and comp-324 files\n\n## Phase 5: Integration & Testing\n\n15. **Update layout** - Add TanStack Query provider if needed for session management\n\n16. **Update home page** - Add auth status display with sign-in\u002Faccount links\n\n17. **Test complete flow**:\n    - Navigate to `\u002Fsign-in`\n    - Enter email, receive OTP\n    - Verify OTP, redirect to `\u002Faccount`\n    - Update name, sign out\n\u003C\u002Fprocess>\n\n\u003Cconstraints>\n**UI RULES**:\n- ONLY use shadcn\u002Fui components and theme colors\n- NEVER use custom colors - only background, foreground, primary, secondary, muted, accent, destructive\n- All styling via Tailwind with theme-aware classes\n- NO hardcoded colors like #000, blue-500, etc.\n\n**FLEXIBILITY**:\n- Check Prisma client location before importing\n- Adapt all paths to project structure\n- Match existing path alias conventions\n\u003C\u002Fconstraints>\n\n\u003Csuccess_criteria>\n- Sign-in page renders with email input\n- OTP email is sent via Resend\n- OTP verification signs user in\n- Account page shows session data\n- Name update persists to database\n- Sign out clears session and redirects\n- No TypeScript or linting errors\n\u003C\u002Fsuccess_criteria>\n","\u003Cobjective>\nSetup Better Auth in the current Next.js project with Email OTP authentication flow.\n\nThis creates a production-ready authentication system with Resend email delivery, a beautiful sign-in page using shadcn\u002Fui, and an account management page. Uses Prisma adapter for database integration.\n\u003C\u002Fobjective>\n\n\u003Ccontext>\nProject structure: !`ls -la`\nPrisma schema: !`cat prisma\u002Fschema.prisma 2>\u002Fdev\u002Fnull | head -40 || echo \"No Prisma schema\"`\nExisting auth: !`ls src\u002Flib\u002Fauth* 2>\u002Fdev\u002Fnull || ls lib\u002Fauth* 2>\u002Fdev\u002Fnull || echo \"No auth files\"`\nPath aliases: !`cat tsconfig.json | grep -A5 '\"paths\"'`\n\u003C\u002Fcontext>\n\n\u003Cprocess>\n## Phase 1: Prerequisites\n\n1. **Ask for Resend API Key** - Prompt user:\n   > \"I need your Resend API key to send OTP emails. Get it from https:\u002F\u002Fresend.com\u002Fapi-keys\"\n\n2. **Verify Prisma is configured**:\n   - Check `prisma\u002Fschema.prisma` exists\n   - Identify Prisma client import path (custom output or default)\n   - Confirm `lib\u002Fprisma.ts` singleton exists\n\n## Phase 2: Installation\n\n3. **Install dependencies**:\n   ```bash\n   pnpm add better-auth resend\n   ```\n\n4. **Install shadcn\u002Fui components**:\n   ```bash\n   pnpm dlx shadcn@latest add input label card button tabs input-otp\n   ```\n\n5. **Get reference components** (study then delete):\n   ```bash\n   pnpm dlx shadcn@latest add https:\u002F\u002Fcoss.com\u002Forigin\u002Fr\u002Fcomp-326.json\n   pnpm dlx shadcn@latest add https:\u002F\u002Fcoss.com\u002Forigin\u002Fr\u002Fcomp-324.json\n   ```\n\n## Phase 3: Configuration\n\n6. **Configure environment variables** - Add to `.env`:\n   ```\n   BETTER_AUTH_SECRET=\"[generate with: openssl rand -base64 32]\"\n   BETTER_AUTH_URL=\"http:\u002F\u002Flocalhost:3000\"\n   RESEND_API_KEY=\"[user-provided]\"\n   RESEND_FROM_EMAIL=\"onboarding@resend.dev\"\n   ```\n\n7. **Create Better Auth instance** - `src\u002Flib\u002Fauth.ts`:\n   ```typescript\n   import { betterAuth } from \"better-auth\";\n   import { prismaAdapter } from \"better-auth\u002Fadapters\u002Fprisma\";\n   import { emailOTP } from \"better-auth\u002Fplugins\";\n   import { prisma } from \".\u002Fprisma\";\n   import { Resend } from \"resend\";\n\n   const resend = new Resend(process.env.RESEND_API_KEY);\n\n   export const auth = betterAuth({\n     database: prismaAdapter(prisma, { provider: \"postgresql\" }),\n     emailAndPassword: { enabled: false },\n     plugins: [\n       emailOTP({\n         async sendVerificationOTP({ email, otp, type }) {\n           await resend.emails.send({\n             from: process.env.RESEND_FROM_EMAIL!,\n             to: email,\n             subject: type === \"sign-in\" ? \"Sign in to your account\" : \"Verify your email\",\n             html: `\u003Cp>Your verification code is: \u003Cstrong>${otp}\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>This code will expire in 5 minutes.\u003C\u002Fp>`,\n           });\n         },\n         otpLength: 6,\n         expiresIn: 300,\n       }),\n     ],\n     secret: process.env.BETTER_AUTH_SECRET!,\n     baseURL: process.env.BETTER_AUTH_URL!,\n   });\n   ```\n\n8. **Generate Prisma schema** using Better Auth CLI:\n   ```bash\n   npx @better-auth\u002Fcli generate --config src\u002Flib\u002Fauth.ts\n   npx prisma migrate dev --name add_better_auth\n   npx prisma generate\n   ```\n\n9. **Create API route handler** - `app\u002Fapi\u002Fauth\u002F[...all]\u002Froute.ts`:\n   ```typescript\n   import { auth } from \"@\u002Flib\u002Fauth\";\n   import { toNextJsHandler } from \"better-auth\u002Fnext-js\";\n\n   export const { GET, POST } = toNextJsHandler(auth.handler);\n   ```\n\n10. **Create auth client** - `src\u002Flib\u002Fauth-client.ts`:\n    ```typescript\n    import { createAuthClient } from \"better-auth\u002Freact\";\n    import { emailOTPClient } from \"better-auth\u002Fclient\u002Fplugins\";\n\n    export const authClient = createAuthClient({\n      baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || \"http:\u002F\u002Flocalhost:3000\",\n      plugins: [emailOTPClient()],\n    });\n\n    export const { signIn, signOut, useSession } = authClient;\n    ```\n\n## Phase 4: UI Implementation\n\n11. **Study reference components** - Read comp-326 and comp-324 patterns:\n    - Note form layouts, validation patterns, UX flows\n    - Understand OTP input behavior\n\n12. **Create sign-in page** - `app\u002Fsign-in\u002Fpage.tsx`:\n    - Two-step flow: email input → OTP verification\n    - Use `InputOTP` component with 6 slots\n    - Auto-submit on complete with `onComplete` handler\n    - Loading states and error handling with `text-destructive`\n    - Redirect to `\u002Faccount` on success\n\n13. **Create account page** - `app\u002Faccount\u002Fpage.tsx`:\n    - Protected route (redirect if no session)\n    - Tabs for Profile and Security\n    - Profile form with name update\n    - Sign out button\n    - Session info display\n\n14. **Delete reference components** - Remove comp-326 and comp-324 files\n\n## Phase 5: Integration & Testing\n\n15. **Update layout** - Add TanStack Query provider if needed for session management\n\n16. **Update home page** - Add auth status display with sign-in\u002Faccount links\n\n17. **Test complete flow**:\n    - Navigate to `\u002Fsign-in`\n    - Enter email, receive OTP\n    - Verify OTP, redirect to `\u002Faccount`\n    - Update name, sign out\n\u003C\u002Fprocess>\n\n\u003Cconstraints>\n**UI RULES**:\n- ONLY use shadcn\u002Fui components and theme colors\n- NEVER use custom colors - only background, foreground, primary, secondary, muted, accent, destructive\n- All styling via Tailwind with theme-aware classes\n- NO hardcoded colors like #000, blue-500, etc.\n\n**FLEXIBILITY**:\n- Check Prisma client location before importing\n- Adapt all paths to project structure\n- Match existing path alias conventions\n\u003C\u002Fconstraints>\n\n\u003Csuccess_criteria>\n- Sign-in page renders with email input\n- OTP email is sent via Resend\n- OTP verification signs user in\n- Account page shows session data\n- Name update persists to database\n- Sign out clears session and redirects\n- No TypeScript or linting errors\n\u003C\u002Fsuccess_criteria>\n",{"name":5,"description":7},"master","46a82833a3f7f6f5f408511246a55e0485c5f7ab","skills\u002Fnextjs-setup-better-auth",1,"https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills","https:\u002F\u002Fgithub.com\u002Fzuzu59","2026-09-30 17:58:42",{"source":8,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add zuzu59\u002Fz-skills --skill nextjs-setup-better-auth",{"tool":37,"command":38},"bunx","bunx skills add zuzu59\u002Fz-skills --skill nextjs-setup-better-auth",{"tool":40,"command":41},"pnpm","pnpm dlx skills add zuzu59\u002Fz-skills --skill nextjs-setup-better-auth","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fnextjs-setup-better-auth\u002FSKILL.md",true,[],[46,53,60,67,74,81],{"skillNo":47,"name":48,"nameZh":6,"description":49,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":50,"categories":51,"keywords":52,"publishedAt":19},"01M76SQGVSKRYNQX4AA4RXV3K0","writing-great-skills","Reference for writing and editing skills well — the vocabulary and principles that make a skill predictable.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fwriting-great-skills\u002FSKILL.md",[],[],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":59,"publishedAt":19},"01M76SQDSAZSA1272D56JY8Q2G","use-style","Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, \u002Fuseskill, list styles, or styles like ios-app, grid, vercel, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fuse-style\u002FSKILL.md",[],[],{"skillNo":61,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":64,"categories":65,"keywords":66,"publishedAt":19},"01M76SQAXDVX02V4JH4PF1MC9G","use-goal","Use when the user asks to create, draft, set, start, or refine a Codex or Claude Code `\u002Fgoal` objective for persistent multi-turn work.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fuse-goal\u002FSKILL.md",[],[],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":19},"01M76SQ8B11GTTGQ5CZHHGXFXM","use-fable","Orchestrator mode for Fable: Fable thinks, plans, and reviews while Codex CLI and subagents execute all heavy work. Use when the user invokes \u002Fuse-fable, says 'use fable', 'fable mode', 'orchestrator mode', or wants to save Fable tokens\u002Frate limits.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fuse-fable\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":19},"01M76SQ4SB7Q4CXEGGPA75KGFK","use-delegate","Delegation mode: the host agent (Claude or Codex) plans and reviews while heavy work runs on cheap executors: OpenCode Kimi K3, Codex GPT-5.6 terra\u002Fsol. Use when the user invokes \u002Fuse-delegate, says 'use delegate', 'delegate mode', 'orchestrator mode', or wants to save tokens\u002Frate limits.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fuse-delegate\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":19},"01M76SQ24836GDGMGGPV6Z2B7N","use-artifacts","Create Claude-style local HTML artifacts under ~\u002F.agents\u002Fartifacts. Use for plans, prototypes, visualizations, dashboards, diagrams, options, or substantial reusable content, with a portable local runtime and no Anthropic API.","https:\u002F\u002Fgithub.com\u002Fzuzu59\u002Fz-skills\u002Fblob\u002Fmaster\u002Fskills\u002Fuse-artifacts\u002FSKILL.md",[],[]]