nextjs
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
About this skill
The `nextjs` AI agent skill offers extensive support for developing Next.js applications, with a particular focus on routing, managing page and layout properties, and handling URL state. It seamlessly integrates `nuqs`, a robust library specifically designed for managing URL query parameters, ensuring both type safety and ease of use. This skill is engineered to assist developers in rapidly scaffolding and maintaining intricate navigation structures within their Next.js projects. By utilizing this skill, developers can generate strongly typed routes, which significantly minimizes the risk of runtime errors associated with URL parameters and markedly improves code maintainability. It also provides helper functions for `PageProps` and `LayoutProps`, streamlining the process of passing data to components and ensuring consistency across various parts of the application. The embedded `nuqs` integration simplifies the often-complex task of reading, writing, and synchronizing URL query parameters with component state, making dynamic URL management straightforward. Ultimately, this skill aims to accelerate Next.js development by automating repetitive routing tasks, enforcing best practices, and enhancing the overall robustness and scalability of web applications built with the framework. It acts as an intelligent assistant, capable of understanding Next.js conventions and generating accurate, type-safe code for common routing patterns.
Best use case
Developers building Next.js applications who require advanced routing features, wish to enforce type safety across their routes, and need to efficiently manage URL query parameters will find this skill invaluable. It primarily streamlines the creation of complex navigation structures and stateful URLs, making it easier to build robust and maintainable web applications.
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
Users should expect generated Next.js code that correctly implements typed routes, handles `PageProps`/`LayoutProps`, and manages URL state with `nuqs`, resulting in a functional and type-safe application.
Practical example
Example input
I need to create a new Next.js App Router page that displays user profiles. The URL should be `/users/[id]`, and it should read the `id` from the path. Additionally, allow for an optional `tab` query parameter (e.g., `?tab=posts`) to switch between different sections of the profile, using `nuqs`. Generate the necessary page and layout files, including route types.
Example output
Generated `app/users/[id]/page.tsx` and `app/users/[id]/layout.tsx` files, including route parameter typing, `PageProps`/`LayoutProps` definitions, and `nuqs` integration to manage the `tab` query parameter for client-side state.
When to use this skill
- Building new Next.js pages or layouts with defined routes.
- Implementing client-side or server-side navigation with type safety.
- Managing URL query parameters (e.g., filtering, pagination) with `nuqs`.
- Refactoring existing Next.js routing logic for improved robustness and type safety.
When not to use this skill
- Working on non-Next.js web development projects.
- When simple, untyped routing is sufficient for a very small, static project.
- If you prefer a different, incompatible URL state management library over `nuqs`.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs Compares
| Feature / Agent | nextjs | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
@.claude/skills/nextjs/nextjs.mdc
Related Skills
react
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
webmcp
This skill guides AI agents in implementing WebMCP within web projects, enabling browser-native structured tools for AI interaction using JavaScript or HTML APIs.
Prompt Coach
Analyze your Claude Code session logs to improve prompt quality, optimize tool usage, and enhance your skills as an AI-native engineer.
just
Use `just` to save and run project-specific commands. Use when the user mentions `justfile`, `recipe`, or needs a simple alternative to `make` for task automation.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
worktree-manager
Create, manage, and cleanup git worktrees with Claude Code agents across all projects. USE THIS SKILL when user says "create worktree", "spin up worktrees", "new worktree for X", "worktree status", "cleanup worktrees", "sync worktrees", or wants parallel development branches. Also use when creating PRs from a worktree branch (to update registry with PR number). Handles worktree creation, dependency installation, validation, agent launching in Ghostty, and global registry management.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
osgrep
Semantic code search using natural language queries. Use when users ask "where is X implemented", "how does Y work", "find the logic for Z", or need to locate code by concept rather than exact text. Returns file paths with line numbers and code snippets.
10up-css
CSS architecture, best practices, and patterns for WordPress projects. Covers ITCSS methodology, accessibility, specificity management, naming conventions, and modern CSS features.
agentifind
This skill sets up codebase intelligence for AI agents by running the `agentifind` CLI to extract code structure and synthesize a `CODEBASE.md` navigation guide. It includes staleness detection and intelligently handles LSP installation for optimal accuracy.
CLAUDE.md – JJ Quick Command List
A concise cheat sheet for essential Jujutsu (`jj`) version control commands, designed to help AI agents or users quickly perform common repository operations.