本文へ移動
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 / 1000 文字

このフォームは 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 のスキルをすべて見る

このスキルの問題を報告する