Awesome-omni-skill supastarter-nextjs-skill
Guides development with supastarter for Next.js only (not Vue/Nuxt): tech stack, setup, configuration, database (Prisma), API (Hono/oRPC), auth (Better Auth), organizations, payments (Stripe), AI, customization, storage, mailing, i18n, SEO, deployment, background tasks, analytics, monitoring, E2E. Use when building or modifying supastarter Next.js apps, adding features, or when the user mentions supastarter Next.js, Prisma, oRPC, Better Auth, or related Next.js stack topics.
git clone https://github.com/diegosouzapw/awesome-omni-skill
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/supastarter-nextjs-skill-majiayu000" ~/.claude/skills/diegosouzapw-awesome-omni-skill-supastarter-nextjs-skill && rm -rf "$T"
skills/development/supastarter-nextjs-skill-majiayu000/SKILL.mdsupastarter for Next.js – Skill
Expert guidance for building production-ready SaaS applications with the supastarter Next.js starter kit. Next.js only; no Vue/Nuxt content.
When to Use This Skill
Use this skill when:
- Building or modifying a supastarter Next.js app
- Adding features (new entities, API endpoints, UI, i18n)
- Working with Prisma, oRPC, Better Auth, Stripe, or the monorepo structure
- Debugging setup, configuration, deployment, or troubleshooting
- The user mentions supastarter Next.js, Prisma, oRPC, Better Auth, or related stack topics
High-Level Workflow: New Feature
Follow this order when adding a feature:
- Schema – Add or update Prisma models in
; run migrations.packages/database/prisma/schema.prisma - Queries – Add query functions in
and export frompackages/database/prisma/queries/
.queries/index.ts - API – Add oRPC procedures in
(types, procedures, router); mount router inpackages/api/modules/<name>/
.packages/api/orpc/router.ts - UI – Add React components in
(e.g.apps/web/
); use shadcn, TanStack Query, session hooks.modules/shared/components/ - i18n – Add translation keys in
.packages/i18n/translations/{en,de}.json
Full walkthrough: assets/recipes/feedback-widget.md.
Project Structure (Next.js Monorepo)
apps/web/ # Next.js app (App Router, app/, components/, config/, lib/) packages/ api/ # Hono + oRPC (modules/, orpc/router.ts) auth/ # Better Auth config database/ # Prisma schema, migrations, queries i18n/ # Translations mail/ # React Email templates, providers storage/ # S3-compatible storage ui/ # Shared UI (shadcn) config/ # Shared config
Use package exports (e.g.
@repo/api, @repo/database) instead of deep relative imports.
References (Progressive Disclosure)
Load only the reference files you need. All paths are from the skill root, one level deep.
Before writing code, read references/coding-conventions.md. For copy-paste patterns and commands, use references/code-patterns.md and references/quick-reference.md.
Assets
- Env template: assets/env.example – environment variable keys and short comments (no secrets).
- Full recipe: assets/recipes/feedback-widget.md – build a feature from DB → API → UI → i18n (feedback widget example).
Scripts
- generate_module.py – Scaffolds a new API module (types, procedures, router). See scripts/README.md or the Scripts section below.
How to run (from supastarter monorepo root):
python scripts/generate_module.py <module-name>
Example:
python scripts/generate_module.py feedback creates packages/api/modules/feedback/ with types.ts, procedures/create.ts, and router.ts. Mount the router in packages/api/orpc/router.ts manually.
Conventions (Summary)
- TypeScript everywhere; interfaces for object shapes.
- Named function exports for React components; prefer Server Components; use
only when needed."use client" - Forms: react-hook-form + zod; API: oRPC procedures in
.packages/api/modules/ - Use
package imports; do not instantiate Prisma/Drizzle in app code.@repo/* - pnpm, Biome (format/lint), Turbo; Node.js ≥ 20.
Before writing code, read references/coding-conventions.md. For examples and commands: references/code-patterns.md, references/quick-reference.md, references/customization.md, references/api-patterns.md.
Official Docs
- Next.js docs (only): https://supastarter.dev/docs/nextjs
- Download docs as .md: https://supastarter.dev/nextjs-docs.zip