Phase5 nextjs

Name: nextjs
Author: SyedaNabila559

Next.js Development Skill

install

source · Clone the upstream repo

git clone https://github.com/SyedaNabila559/phase5

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/SyedaNabila559/phase5 "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/nextjs" ~/.claude/skills/syedanabila559-phase5-nextjs && rm -rf "$T"

manifest: .claude/skills/nextjs/skill.md

source content

Next.js Development Skill

Purpose

This skill provides expert guidance and implementation assistance for Next.js 16+ applications using TypeScript, Tailwind CSS, and the App Router.

Capabilities

Component creation and modification
Route implementation with App Router
State management with React Context and hooks
API route development
Styling with Tailwind CSS
TypeScript type definitions
Performance optimization
SEO best practices
Server-side rendering (SSR) and static site generation (SSG)

Best Practices

Use the App Router (
```
app/
```
directory) for new routes
Implement proper error boundaries with
```
error.tsx
```
and
```
global-error.tsx
```
Follow Next.js conventions for loading states with
```
loading.tsx
```
Leverage React Server Components where appropriate
Use
```
async
```
/
```
await
```
for server-side data fetching
Implement proper form handling with React Hook Form when needed

File Structure

Components:
```
components/
```
Pages:
```
app/
```
API routes:
```
app/api/
```
Styles:
```
styles/
```
or within component folders
Utilities:
```
lib/
```
or
```
utils/
```
Public assets:
```
public/
```

Common Patterns

Client components: Use
```
'use client'
```
directive
Server components: Default behavior, no directive needed
Environment variables: Use
```
.env.local
```
and
```
process.env
```
Image optimization: Use Next.js
```
Image
```
component
Link handling: Use Next.js
```
Link
```
component