nextjs-project-starter

Crea proyectos Next.js con un stack configurable, siempre usando las últimas versiones estables.

---

Triggers

Frases que activan el skill
“crear proyecto Next.js”
“nuevo proyecto web”
“empezar app fullstack”
“bootstrap Next.js”

---

Principios

1. Siempre preguntar antes de actuar
2. Últimas versiones con verificación de docs
3. Mostrar breaking changes de versiones mayores
4. Configurable - el usuario elige qué incluir

---

Workflow completo

1. Basics del proyecto

1. Project name (kebab-case)
2. Project description
3. Target domain (carlosmonti.com / xmontc.xyz / custom / none)

2. Versión de Node

Node.js version para este proyecto:
☐ Usar actual (v22.x)
☐ Usar Next.js recommended LTS
☐ Especificar versión custom

Genera .nvmrc y engines en package.json.

3. Selección de features

Core Features (seleccionar):
☐ Mantine UI + Tabler Icons
☐ Supabase (auth + database)
☐ Zustand (state management)
☐ Zod (validation)
☐ SWR (data fetching)
☐ TanStack Query
☐ Vercel Analytics + Speed Insights
☐ Testing setup (Vitest + Testing Library)

4. Verificación de versiones

Para CADA dependencia seleccionada:

📦 @mantine/core
   Version: ^7.15.0 (latest stable)
   Docs: https://mantine.dev/getting-started
   ⚠️ Note: v7 requires PostCSS preset (breaking from v6)

   ¿Install this version? [Y/n]

5. Integraciones

Project Integrations:

1. GitHub Repository
   ☐ ¿Crear private repo en GitHub?

2. Vercel Deployment
   ☐ ¿Linkear a Vercel para auto-deploy?

3. Supabase Project (si seleccionado)
   ☐ ¿Crear nuevo proyecto Supabase?

4. CLAUDE.md
   ☐ ¿Generar CLAUDE.md para este proyecto?

---

Estructura generada

src/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── (auth)/            # Auth route group
│   └── (main)/            # Main app routes
├── components/            # React components
│   ├── ui/               # Base UI
│   └── features/         # Feature-specific
├── hooks/                 # Custom hooks
├── lib/                   # Core utilities
├── providers/             # Context providers
├── stores/                # Zustand stores
├── types/                 # TypeScript types
├── utils/                 # Utility functions
│   └── supabase/         # Supabase client
└── test/                  # Test setup
    ├── mocks/
    └── setup/

---

Archivos de configuración

Si Mantine seleccionado

// postcss.config.mjs
export default {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        // ...
      },
    },
  },
};

Environment template

# .env.example

# Supabase (si seleccionado)
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# Analytics (si seleccionado)
NEXT_PUBLIC_VERCEL_ANALYTICS_ID=

---

Output final

✅ Project created: my-app

📁 Location: ~/Projects/github/my-app
🔧 Node: 22.x (via .nvmrc)

📦 Installed:
   - next@15.x
   - @mantine/core@7.x
   - @supabase/ssr@0.x
   - zustand@5.x
   - zod@3.x

🔗 Integrations:
   - GitHub: https://github.com/testacode/my-app
   - Vercel: Linked (auto-deploy on push)

📝 Next steps:
   1. cd my-app
   2. cp .env.example .env.local
   3. Configure credentials
   4. npm run dev

---

Referencia de dependencias

Package	Propósito	Docs
next	Framework	nextjs.org/docs
@mantine/core	UI Components	mantine.dev
@tabler/icons-react	Icons	tabler.io/icons
@supabase/ssr	Supabase SSR	supabase.com/docs
zustand	State	zustand-demo.pmnd.rs
zod	Validation	zod.dev
swr	Data Fetching	swr.vercel.app
vitest	Testing	vitest.dev

---

Error handling

Error	Solución
npm install falla	Verificar Node version, probar --legacy-peer-deps
gh repo create falla	gh auth status
vercel link falla	vercel login
Supabase setup falla	Guiar a setup manual en supabase.com