Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design & UI
Seth Hobson42k
Nextjs App Router Patterns
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add wshobson/agents --skill nextjs-app-router-patternsNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Nextjs App Router Patterns
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /nextjs-app-router-patterns.
It contains no scripts, only instructions and reference files, so it can't run code on its own.
What the instructions cover
- 1When to Use This Skill
- 2Core Concepts
- 3Quick Start
- 4Detailed patterns and worked examples
- 5Best Practices
Section headings from the skill's SKILL.md file.
What's inside · 2 files
- SKILL.md
- references/details.md
More from Seth Hobson
See all →AI Debt Detector
Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when…
AI & AgentsSeth Hobson42k
Airflow Dag Patterns
Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling…
Data & DatabasesSeth Hobson42k
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…
FrontendSeth Hobson42k
More Claude skills for frontend development
See all →Vercel React Best PracticesTop pick
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…
Frontend
Vercel34k
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…
Frontend
Anthropic187k
Vercel Composition Patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…
FrontendVercel34k
Vercel React View Transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…
FrontendVercel34k