claude-code-boilerplates

Audit and refactor the entire codebase for code quality. Finds components that are too large or mix concerns, logic that belongs in custom hooks, inline types that should be extracted, and client components that could be server components. Produces a prioritised list of issues and fixes them all. Use when the user asks to clean up code, split components, improve code quality, or refactor the project.

Review the entire project from the perspective of a potential customer and a growth-focused CEO. Scans landing copy, product UX, API routes, DB schema, auth flow, pricing, email, and configuration — reporting specific conversion blockers, trust issues, UX problems, security gaps, and missing elements. Each finding has a severity label and a concrete fix. Use whenever the user asks for a customer review, growth review, conversion audit, or "what can be improved."

Analytics event tracking in this Next.js project — trackEvent() stub in lib/analytics.ts, Vercel Analytics auto-pageviews already wired in app/layout.tsx, and how to swap in a real provider (PostHog, Mixpanel). Use this skill whenever the user asks about analytics, tracking custom events, replacing the analytics stub, or measuring user behaviour.

Full SEO layer for this Next.js project — root layout metadata, page-level static/dynamic metadata, OG images (static + dynamic), sitemap.ts, robots.ts, JSON-LD structured data, canonical URLs, Twitter cards, and comparison/vs pages. Use this skill whenever the user asks about SEO, metadata, open graph, OG image, sitemap, robots.txt, JSON-LD, structured data, canonical URLs, Twitter cards, or adding a competitor comparison page.

Full project initialization after cloning the boilerplate. Installs dependencies, walks through .env setup, configures the database, and writes a project-specific CLAUDE.md. Run this once after cloning. Triggers on /init-project.

REST API structure, error handling, and response shapes for Next.js App Router routes. Loaded when writing or reviewing API route handlers.

Authentication and authorization patterns for this project. JWT-based auth via getUserFromRequest() called in route handlers, not middleware. Loaded when touching protected routes, token handling, or user session logic.

Database access patterns, query rules, and migration conventions using Drizzle ORM + Neon. Loaded when writing queries, repositories, or migrations.

Run Drizzle ORM migrations — generate SQL migrations from schema changes and apply them to the database. Use this skill whenever the user changes a schema file, adds a new table, adds a column, or asks to run/apply/push migrations. Always use this skill before assuming the DB is in sync with the schema.

Generate Next.js App Router API route files (route.ts) following the project's thin-route pattern. Use this skill whenever the user asks to add an endpoint, create a route, add an API, or implement a new HTTP handler. Triggers on phrases like "add a route for", "create an endpoint", "I need a POST/GET/PUT/DELETE for", or any request that implies a new app/api/ file. Always use this skill even for simple routes — it enforces the correct pattern.

Generate SWR data-fetching hooks (useSWR and useSWRMutation) following the project's fetcher pattern. Use this skill whenever the user asks to add a hook, create a useX function, fetch data from the API in a component, or needs client-side data fetching. Triggers on "add a hook for", "I need to fetch X", "create a mutation hook", or any request that implies a new hooks/api/*.ts file.

Set up and manage Vercel deployments for a Next.js project — initial CLI setup, Git integration for automatic deploys on push, environment variables sync, and production deploys. Use this skill whenever the user wants to deploy to Vercel, set up automatic deployments, run `vercel` for the first time, connect a GitHub repo to Vercel, or manage environment variables on Vercel. Always use this skill for any Vercel-related task.

Generate and customize marketing landing page sections for a Next.js project. Covers Hero, Features, Pricing teaser, FAQ (custom accordion), and CTA components in components/landing/, i18n integration, section background alternation, and connecting Pricing to Stripe checkout. Use this skill whenever the user asks to build or modify a landing page, add a new section, change copy, or connect the landing Pricing to Stripe.

Integrate Stripe payments or subscriptions into a Next.js project — lib setup, checkout session API route (payment and subscription modes), webhook handler, customer portal, credit system, and CheckoutButton component. Use this skill whenever the user asks about payments, Stripe, checkout, subscriptions, pricing, billing, plans, credits, or order processing. Always use this skill when adding any payment, subscription, or credit feature.

Analyze a component or file and identify inline logic that can be extracted into a reusable React hook. Proposes the hook name, signature, and affected components -- then asks before writing any code. Use when a component mixes state + effects, when a pattern repeats across components, or when the user asks "can this be a hook?".

Split large React components into focused, performant pieces. Use when a component exceeds ~150 lines, owns mixed concerns, or causes unnecessary re-renders. Covers extraction patterns, state isolation, and co-location conventions.

UI component structure, styling conventions, and theme usage. Custom components in components/, shadcn primitives in components/ui/ for form/interactive elements only. Loaded when creating or modifying components, themes, or styles.

Add multi-tenancy to the app — organizations with owner/admin/member roles, invite-by-email flow, and org context via localStorage + X-Org-Id header. Use this skill whenever the user asks to add organizations, teams, workspaces, multi-tenancy, or member management.

Add an AI feature powered by Claude (Anthropic) to this Next.js project — lib/claude.ts client, streaming chat route, tool-use pattern, prompt caching, and credit deduction per AI call. Use this skill whenever the user asks about Claude AI, Anthropic API, streaming AI responses, AI chat, tool use, prompt caching, or wiring AI into any feature.

Progressive Web App setup for Next.js using @ducanh2912/next-pwa. Covers manifest.json, icons, service worker config, viewport/metadata, .gitignore entries, and how to replace placeholder icons. Use when adding PWA support, adjusting caching strategy, or customizing the web app manifest.

Set up and extend transactional email in this Next.js project using Resend and react-email. Covers lib/email.ts service, emails/ templates, feature flags, and calling emailService from a service layer. Use this skill whenever the user asks about sending email, adding a new email template, toggling email verification or welcome emails, or configuring Resend.

Scaffold a complete feature module (schema, relations, types, validation, repo, service, index) following the project's DDD-lite structure. Use this skill whenever the user wants to add a new feature, entity, or resource — e.g. "add a categories feature", "I need a tags module", "create a module for X", "I want to add X to the app". Always use this skill for new modules — it ensures all 7 files are created consistently and nothing is forgotten.

Integrate Cloudinary image uploads into a Next.js project — lib setup, upload API route, upload hook, and ImageUpload component. Use this skill whenever the user asks about image uploads, file storage, Cloudinary, cover images, or avatar uploads. Always use this skill when adding any kind of file or image upload feature.

Add translations to any page or component in this Next.js project using next-intl. All strings live in messages/en.json. Use getTranslations() in server components and useTranslations() in client components. Use this skill whenever the user asks about translations, i18n, adding a new language, moving text to translation files, or localizing any page or component. Always use this skill when adding visible text strings to new components.

Set up and maintain a Next.js MDX blog that renders posts stored as MDX strings in a database. Use this skill whenever the user asks about MDX rendering, blog post pages, prose styling, serialize/MDXRemote setup, or gets errors like "async Client Component" or missing prose styles. Always use this skill for anything touching next-mdx-remote, blog layout, or MDX content rendering.

Type and validation conventions for this Next.js project. Types live in modules/[name]/[name].types.ts, Zod schemas in modules/[name]/[name].validation.ts. Load when creating or modifying types, validation schemas, or shared interfaces.

Define Drizzle ORM relations correctly so that db.query.* with `with` works without errors. Use this skill whenever the user gets a "referencedTable" error, asks how to use `with` in a Drizzle query, needs to add a relation between tables, or creates a new schema file. This is a common gotcha — always apply this skill when relations are involved.