Skip to content
cccskills
FreePublished on GitHub

nextjs-scaffold

Scaffold de app Next.js 15+ App Router con TypeScript estricto, shadcn/ui, Tailwind, RSC y estructura production-ready. Usar para iniciar un proyecto Next nuevo o agregar la base de UI.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3 stars(GitHub 3 + cccskills 0)
Works withVercel

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

nextjs-scaffold — Next.js + shadcn/ui Scaffolder

MANDATORY WORKFLOW

Antes de generar código, completar en orden.

Step 0: Gather Requirements

Clarificar (o inferir del contexto):

  1. Nombre del proyecto (kebab-case)
  2. Router: App Router (default) / Pages (legacy)
  3. Styling: Tailwind + shadcn/ui (default) / CSS Modules
  4. Data layer: Server Actions + RSC (default) / API routes / tRPC
  5. Auth: Auth.js (NextAuth) / Clerk / ninguna
  6. DB: Postgres + Prisma / Drizzle / ninguna
  7. Deploy: Vercel (default) / Docker / self-host

Si ya está especificado, saltar al Step 1.

Step 1: Crear base

npx create-next-app@latest <name> --ts --app --tailwind --eslint --src-dir --import-alias "@/*"
cd <name>
npx shadcn@latest init   # style: default, base color: slate

Step 2: Estructura

src/
  app/                 # App Router: layouts, pages, route handlers
    (marketing)/       # route groups
    api/               # route handlers solo si hace falta
  components/
    ui/                # shadcn primitives
  lib/                 # utils, db client, auth
  server/              # server actions, data access (RSC-only)

Step 3: Defaults no negociables

  • tsconfig: "strict": true, noUncheckedIndexedAccess
  • Server Components por defecto; 'use client' solo en hojas interactivas
  • next/image + generateMetadata en cada page
  • Env vars validadas con Zod (src/lib/env.ts)
  • ESLint flat config + @typescript-eslint/no-floating-promises

Step 4: Agregar piezas (invocar skills relacionadas)

  • SEO → skill seo-nextjs
  • Búsqueda semántica → skill pgvector-search
  • Features de IA → skill ai-sdk-setup
  • Performance → skill nextjs-best-practices

Step 5: Verificar

npm run build limpio + npx next lint. Revisar contra las rules nextjs-code y react-perf. Build limpio + lint sin errores → scaffold READY.

Stack Defaults

ComponenteDefault
Next.js15+ App Router
LenguajeTypeScript estricto
UIshadcn/ui + Tailwind
DataServer Actions + RSC
ValidaciónZod
ORMPrisma
DeployVercel

Inspirado en nextjs-shadcn de laguagu/claude-code-nextjs-skills. Adaptado al formato Arcane.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

See all skills by SebastianLuser

Report a problem with this skill