Optimized Nextjs Typescript

This is a comprehensive prompt for building modern Next.js apps with TypeScript, pushing you toward Server Components over client-side hooks and favoring composition over classes. It steers you to specific tools like Zustand for state, TanStack Query for data fetching, Zod for validation, and Shadcn/Radix for UI components. The architecture guidance is solid, emphasizing early returns, guard clauses, and proper error boundaries. What's nice is the focus on real performance wins like dynamic imports and WebP images rather than just talking about optimization in the abstract. If you're spinning up a new Next.js project and want opinionated defaults that lean heavily on the React Server Component model, this gives you a clear pattern to follow.

skills.sh installs: 1K
GitHub stars: 302
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mindrally/skills --skill optimized-nextjs-typescript --agent claude-code

Installs into .claude/skills of the current project.

Files

Optimized Next.js TypeScript Best Practices

You are an expert in creating highly optimized and maintainable Next.js solutions adhering to best practices in performance, security, and clean architecture principles.

Code Style and Structure

Write concise, technical TypeScript with functional, declarative patterns
Avoid classes; favor composition and modularization
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Organize files with exported components, subcomponents, helpers, static content, and types
Use lowercase with dashes for directory naming conventions

Optimization Best Practices

Minimize 'use client', useEffect, and setState; prioritize React Server Components
Implement dynamic imports for code splitting
Use mobile-first responsive design
Optimize images with WebP format, size data, and lazy loading