SuperAPI AI Directory

ncode-project-setup

General & other

View repository

Updated 10-15 20:31

About this skill

nCode Project Setup

You are setting up a new SaaS project using the nCode Golden Stack. Follow this exact structure - do not deviate.

Web Track (Next.js)

npx create-next-app@latest [project-name] --app --typescript --tailwind --eslint --src-dir --import-alias "@/*"

Then install in order:

  1. npx shadcn@latest init - choose New York style, neutral colors

Note: shadcn default colors and radius are fine for now. They will be customized by DESIGN.md later when you run the design-director agent.

  1. npm install @supabase/ssr @supabase/supabase-js - Supabase client
  2. npm install ai @ai-sdk/google - Vercel AI SDK + Gemini
  3. npm install posthog-js - Analytics
  4. npm install @sentry/nextjs - Error monitoring

Create these files:

  • .env.local from .env.example (create both)
  • lib/supabase/client.ts + lib/supabase/server.ts
  • middleware.ts for auth session refresh
  • app/providers.tsx for PostHog + other providers

Mobile Track (Expo)

npx create-expo-app@latest [project-name] --template tabs

Then install:

  1. NativeWind + Tailwind CSS setup
  2. @react-native-firebase/app + auth + firestore
  3. expo-router (already in template)
  4. react-native-purchases (RevenueCat)
  5. posthog-react-native

Both Tracks - Always Do

  • Create .gitignore with node_modules, .next/.expo, .env*, .DS_Store
  • Create .env.example with ALL required env vars as placeholders
  • git init + first commit: "feat: initial project setup with nCode Golden Stack"
  • Create CLAUDE.md with project-specific conventions
  • Suggest: "Want to set up your design system? Run the design-director agent to create a DESIGN.md for your project."

Do NOT

  • Do not use Pages Router (use App Router only)
  • Do not install Prisma (use Supabase client directly)
  • Do not use styled-components (use Tailwind/NativeWind)
  • Do not create a monorepo structure unless explicitly asked