본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane스타 3(GitHub 3 + cccskills 0)
연동 도구Vercel

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

SebastianLuser의 스킬 모두 보기

이 스킬의 문제 신고