wsimmonds/claude-nextjs-skills

A proof of concept set of Claude Skills designed to improve the pass rates against the Next.js evals on https://nextjs.org/evals

main Updated last yearGitHub

Indexed skills
10
Skill groups
1
GitHub stars
108
Forks
22

Skills

10 total

/nextjs-advanced-routing

Guide for advanced Next.js App Router patterns including Route Handlers, Parallel Routes, Intercepting Routes, Server Actions, error boundaries, draft mode, and streaming with Suspense. CRITICAL for server actions (action.ts, actions.ts files, 'use server' directive), setting cookies from client components, and form handling. Use when requirements involve server actions, form submissions, cookies, mutations, API routes, `route.ts`, parallel routes, intercepting routes, or streaming. Essential for separating server actions from client components.

Updated last year

/nextjs-dynamic-routes-params

Guide for Next.js App Router dynamic routes and pathname parameters. Use when building pages that depend on URL segments (IDs, slugs, nested paths), accessing the `params` prop, or fetching resources by identifier. Helps avoid over-nesting by defaulting to the simplest route structure (e.g., `app/[id]` instead of `app/products/[id]` unless the URL calls for it).

Updated last year

/nextjs-pathname-id-fetch

Focused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server components to fetch data from APIs. Use when building pages that display individual items (product pages, blog posts, user profiles) based on a URL parameter. Complements nextjs-dynamic-routes-params with a simplified, common-case pattern.

Updated last year

/nextjs-server-navigation

Guide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client navigation methods. Use when adding links, redirects, or navigation logic in server components without converting them to client components unnecessarily.

Updated last year

/nextjs-anti-patterns

Identify and fix common Next.js App Router anti-patterns and mistakes. Use when reviewing code for Next.js best practices, debugging performance issues, migrating from Pages Router patterns, or preventing common pitfalls. Activates for code review, performance optimization, or detecting inappropriate useEffect/useState usage. CRITICAL: For browser detection, keep the logic in the user-facing component (or a composed helper that it renders) rather than isolating it in unused files.

Updated last year

/nextjs-app-router-fundamentals

Guide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks.

Updated last year

/nextjs-client-cookie-pattern

Pattern for client components calling server actions to set cookies in Next.js. Covers the two-file pattern of a client component with user interaction (onClick, form submission) that calls a server action to modify cookies. Use when building features like authentication, preferences, or session management where client-side triggers need to set/modify server-side cookies.

Updated last year

/nextjs-server-client-components

Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.

Updated last year

/nextjs-use-search-params-suspense

Pattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when accessing URL query parameters in client components. Use when building search interfaces, filters, pagination, or any feature that needs to read/manipulate URL query parameters client-side.

Updated last year

/vercel-ai-sdk

Guide for Vercel AI SDK v5 implementation patterns including generateText, streamText, useChat hook, tool calling, embeddings, and MCP integration. Use when implementing AI chat interfaces, streaming responses, tool/function calling, text embeddings, or working with convertToModelMessages and toUIMessageStreamResponse. Activates for AI SDK integration, useChat hook usage, message streaming, or tool calling tasks.

Updated last year

Add to your README

The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.

<a href="https://skilld.dev/gh/wsimmonds/claude-nextjs-skills">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/wsimmonds/claude-nextjs-skills?theme=dark">
    <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/wsimmonds/claude-nextjs-skills?theme=light">
    <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/wsimmonds/claude-nextjs-skills?theme=light">
  </picture>
</a>

wsimmonds/claude-nextjs-skills

Repository statistics

Skills

/nextjs-advanced-routing

/nextjs-dynamic-routes-params

/nextjs-pathname-id-fetch

/nextjs-server-navigation

/nextjs-anti-patterns

/nextjs-app-router-fundamentals

/nextjs-client-cookie-pattern

/nextjs-server-client-components

/nextjs-use-search-params-suspense

/vercel-ai-sdk

Add to your README