wsimmonds/claude-nextjs-skills
9 skills4.4k installs981 starsGitHub
Install
npx skills add https://github.com/wsimmonds/claude-nextjs-skillsSkills in this repo
1Nextjs App Router FundamentalsThe nextjs-app-router-fundamentals skill guides Next.js 13+ App Router work: migration from pages/ to app/, file conventions, layouts, metadata, and modern routing. It enforces no explicit any because @typescript-eslint/no-explicit-any fails builds, with typed page params, searchParams, form events, and server actions. Use when migrating, creating layouts, implementing metadata, or building with route groups and dynamic segments. Core concepts contrast Pages Router _app and _document with required app/layout.tsx containing html and body, page.tsx per route, loading.tsx, error.tsx, and route.ts handlers. Migration steps map pages to app routes, move Head metadata to metadata exports, replace anchors with Link, and remove conflicting pages files. Covers static and generateMetadata, nested layouts that preserve state, dynamic and catch-all routes, Server Components by default, and use client for interactivity. Documents generateStaticParams as getStaticPaths replacement with dynamicParams control. Lists pitfalls: missing root html tags, next/head in App Router, layouts without page.tsx, and plain anchor internal links.2.1kinstalls2Nextjs Server Client Componentsnextjs-server-client-components is a Next.js App Router guidance skill that helps developers decide when to use Server Components versus Client Components and how to avoid mixing server-only and client-only APIs. nextjs-server-client-components explicitly calls out common boundary hazards like `useSearchParams` requiring `Suspense` and a `'use client'` component, navigation APIs such as `Link`, `redirect`, and `useRouter`, and the differences between client navigation and server data access such as cookies and headers. Developers reach for nextjs-server-client-components when upgrading to App Router, refactoring pages into RSC, debugging hydration mismatches, or untangling errors caused by calling client hooks in server components. nextjs-server-client-components is practical for day-to-day Next.js architecture decisions across routing, data fetching, and component composition.317installs3Vercel Ai Sdkvercel-ai-sdk is a wsimmonds/claude-nextjs-skills Agent Skill for implementing Vercel AI SDK v5 in TypeScript Next.js projects. The guide defines a seven-step workflow—from scoping chat versus API routes through lockfile-aware installs, TypeScript fixes, build loops, and test debugging—for generateText, streamText, useChat with sendMessage and UIMessage parts, tool() helpers with zod inputSchema, embeddings, convertToModelMessages, toUIMessageStreamResponse, and MCP server wiring. It mandates string provider models like openai/gpt-4, rejects v4 append patterns, and lists packages ai, @ai-sdk/openai, @ai-sdk/anthropic, @modelcontextprotocol/sdk, and zod. Developers reach for vercel-ai-sdk when chat UIs, streaming responses, or function-calling routes must compile and pass CI. With 250 catalog installs, the skill targets engineers migrating from AI SDK v4 or wiring production agents on Vercel.303installs4Nextjs Advanced Routingnextjs-advanced-routing is an advanced Next.js skill from wsimmonds/claude-nextjs-skills that documents App Router patterns agents must get right: Route Handlers in route.ts, Parallel Routes, Intercepting Routes, Server Actions in action.ts or actions.ts with the use server directive, error boundaries, draft mode, and streaming with Suspense. Developers reach for it when requirements involve form submissions, cookie setting from client components, mutations separated from client bundles, or API routes coexisting with UI routes. The skill explicitly flags server actions, cookie handling, and form flows as critical paths where mixing client and server boundaries causes subtle bugs. Allowed tools include Read, Write, Edit, Glob, Grep, and Bash so agents can locate action.ts files and wire handlers correctly during feature implementation or refactors.297installs5Nextjs Client Cookie Patternnextjs-client-cookie-pattern is a wsimmonds/claude-nextjs-skills agent skill documenting the two-file App Router pattern for client-triggered server-side cookie changes. A client component handles user interaction—button clicks or form submissions—and invokes a server action that calls cookies() from next/headers to set or modify HttpOnly session, auth, or preference values. Developers reach for nextjs-client-cookie-pattern when building login flows, theme toggles, or session refresh UX that must not expose cookie mutation logic to the browser bundle. The skill explicitly covers the boundary where client components cannot directly write secure cookies and server actions become the sanctioned bridge. It fits Next.js engineers implementing authentication, preference persistence, or session management in React Server Components architectures. Allowed tools include Read, Write, Edit, Glob, Grep, and Bash for scaffolding the paired client and server action files.287installs6Nextjs Use Search Params Suspensenextjs-use-search-params-suspense is a Claude Code skill in the AI & Agent Building category.277installs7Nextjs Server Navigationnextjs-server-navigation is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.270installs8Nextjs Dynamic Routes Paramsnextjs-dynamic-routes-params is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.268installs9Nextjs Pathname Id Fetchnextjs-pathname-id-fetch is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.261installs