Next.js App Router Patterns: free AI skill for design

What the skill covers

The sections of its instructions, in order.

01 When to Use This Skill
02 Core Concepts
1. Rendering Modes
2. File Conventions
03 Quick Start
04 Detailed patterns and worked examples
05 Best Practices
Do's
Don'ts

Reference files

1 file Phở can open while it uses the skill.

references/details.md

More in Frontend and UI design

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 System Patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching…
Interaction Design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or…
Android Mobile Design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's…
iOS Mobile Design
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow…
React Native Design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns…
Responsive Design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces…
Visual Design Foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or…
Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries…
React Native Architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native…
React State Management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state…
Tailwind Design System (v4)
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design…
Screen Reader Testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring…
WCAG Audit Patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations…

Similar design skills

Frequently asked questions

What does Next.js App Router Patterns do?

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.

Is Next.js App Router Patterns free to use?

Yes. Next.js App Router Patterns is published by Seth Hobson under the MIT licence, and you can use it with a free Phở account.

How do I use Next.js App Router Patterns in Phở?

Press Open in Phở, then Try to apply it to your next message, or add the Frontend and UI design set so Phở loads it whenever a request matches.

Does Next.js App Router Patterns need other tools?

No. It works in a normal Phở chat with what you type or upload.