nextjs-master
Use when building or refactoring Next.js 14+ App Router applications — Server Components, TypeScript patterns, Supabase integration, and performance optimization
Best use case
nextjs-master is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when building or refactoring Next.js 14+ App Router applications — Server Components, TypeScript patterns, Supabase integration, and performance optimization
Teams using nextjs-master should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-master/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-master Compares
| Feature / Agent | nextjs-master | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when building or refactoring Next.js 14+ App Router applications — Server Components, TypeScript patterns, Supabase integration, and performance optimization
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.
SKILL.md Source
# Next.js 14+ Mastery Skill
## Core Architecture
### Server Components (Default)
- Use Server Components by default - no "use client" unless necessary
- Client Components only for: interactivity, browser APIs, hooks
- Minimize useEffect, useState - favor RSC data fetching
### App Router Conventions
```
app/
├── (auth)/ # Route groups
├── api/ # API routes / Edge Functions
├── globals.css # Global styles
└── layout.tsx # Root layout with providers
components/
├── ui/ # Shadcn UI components
├── forms/ # Form components with React Hook Form
└── sections/ # Page sections
```
### File-Based Routing Rules
- `page.tsx`: Route pages (Server Components)
- `layout.tsx`: Shared layouts with proper children typing
- `loading.tsx`: Suspense fallbacks
- `error.tsx`: Error boundaries with error.ts
- `not-found.tsx`: 404 pages
## TypeScript Patterns
### Dynamic Route Props
```typescript
interface PageProps {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string: string | string[] | undefined }>
}
```
### Server Actions
```typescript
'use server'
export async function createItem(formData: FormData) {
'use server'
// Direct database calls - no API routes needed
}
```
## Supabase Integration
### Row Level Security (RLS)
- Always enable RLS on all tables
- Create policies for: SELECT, INSERT, UPDATE, DELETE
- Use auth.uid() for user-specific data
### Real-time Subscriptions
```typescript
const channel = supabase
.channel('table-db')
.on('postgres_changes', { event: '*', schema: 'public', table: 'tasks' }, payload => {
// Handle changes
})
.subscribe()
```
## Performance Optimization
### Core Web Vitals
- LCP < 2.5s: Optimize images, font loading, SSR
- CLS < 0.1: Reserve space for dynamic content
- FID/INP < 100ms: Minimize client JS, defer non-critical
### Optimization Techniques
- Dynamic imports for non-critical components
- React.memo for pure components
- Image optimization with Next.js Image
- Font optimization with next/font
- Route prefetching with Link
## State Management
### Server-First Approach
- Fetch data in Server Components
- Pass serialized data to Client Components
- Use URL searchParams for filter state
### Client State (when needed)
- React Hook Form for form state
- Zustand for global client state
- React Query for server state synchronization
## Error Handling
### Error Boundaries
```typescript
// app/error.tsx
'use client'
export default function Error({ error, reset }) {
return <div>Error: {error.message}</div>
}
```
### try/catch in Server Actions
```typescript
'use server'
export async function submitForm(prevState, formData) {
try {
// Logic
return { success: true }
} catch (e) {
return { error: e.message }
}
}
```
## SEO & Metadata
### Dynamic Metadata
```typescript
export async function generateMetadata({ params }) {
const product = await fetchProduct(params.slug)
return {
title: product.title,
description: product.description,
openGraph: { images: [product.image] }
}
}
```
## Testing Requirements
- Jest + React Testing Library for unit tests
- Playwright for E2E tests
- Test components in isolation
- Mock Supabase responsesRelated Skills
shadcn-master
Shadcn UI, Radix UI, and Tailwind CSS component patterns for enterprise applications
nextjs-production-bug-audit
Use when reviewing a Next.js marketing site or app for production readiness, before go-live, or when users report visual or functional bugs. Covers 26-point checklist across CRITICAL, HIGH, MEDIUM, LOW severity.
writing-plans
Use when you have a spec or requirements for a multi-step task, before touching code
webtricks-tier-pricing-ui
Build interactive tier-based pricing UI with lock/unlock states, progressive disclosure, and cross-slide consistency. Use when building pricing pages, tier selectors, or feature comparison grids. Tags: webtricks, pricing, tiers, SaaS.
webtricks-browser-qa-audit
Audit live websites using Playwright MCP for browser-based QA. Covers accessibility snapshots, screenshot verification, interactive element testing, and tier differentiation audits. Use after deploying web changes to verify they work. Tags: webtricks, QA, testing, playwright, audit.
webtricks-animated-pipeline
Build animated data flow pipelines with SVG circuits, traveling dots, and ambient animations using Framer Motion + SVG. Use when visualizing architecture, workflows, API pipelines, or any step-by-step data flow. Tags: webtricks, animation, pipeline, SVG, architecture.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
verification-before-completion
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
vercel-react-best-practices
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 optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
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 on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.