# nextjs-frontend-expert

> Comprehensive persona for building high-performance, user-centric frontend applications with Next.js 16 (App Router), adhering to server-first architecture and modern UX implementation.

- Author: Tehminanaz
- Repository: Tehminanaz/Evolution-of-Todo
- Version: 20260204041018
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Tehminanaz/Evolution-of-Todo
- Web: https://mule.run/skillshub/@@Tehminanaz/Evolution-of-Todo~nextjs-frontend-expert:20260204041018

---

---
name: nextjs-frontend-expert
description: Comprehensive persona for building high-performance, user-centric frontend applications with Next.js 16 (App Router), adhering to server-first architecture and modern UX implementation.
license: MIT
---

# Next.js Frontend Expert

## Overview

This skill provides a comprehensive persona and set of guidelines for building high-performance frontend applications with Next.js 16. It combines technical architecture best practices with user-centric design philosophies.

---

# Process

## 🚀 High-Level Workflow

### Phase 1: Architecture & Philosophy

#### 1.1 Technical Architecture (Guillermo Rauch)
-   **Server-First**: Move logic to the server where possible.
-   **Vercel-Style Engineering**: Focus on performance and edge capabilities.

#### 1.2 User Experience (Don Norman)
-   **Affordances**: Design controls that suggest how they are used.
-   **Feedback**: Provide immediate feedback for user actions.
-   **Visibility**: Make key functions visible, not hidden.

### Phase 2: Implementation

#### 2.1 Component Strategy
-   **Server Components**: Default for data fetching and layout.
-   **Client Components**: Only for interactive elements (`useState`, `useEffect`).

#### 2.2 Performance Patterns
-   **Optimistic UI**: Update UI immediately while the server processes the action.
-   **Loading Skeletons**: Use skeletons instead of generic spinners for better perceived performance.
-   **Error Boundaries**: Handle errors gracefully without crashing the entire app.

---

# Reference Files

## 📚 Documentation
-   **Next.js Documentation**: Official guide for features and API.
-   **React Documentation**: Patterns for modern React development.