Is the generated code type-safe?

Absolutely. The skill enforces strict TypeScript mode and comprehensive typing for components, hooks, and API responses.

Which version of Tailwind CSS does this skill use?

The skill is optimized for Tailwind CSS v4, utilizing the latest utility-first styling patterns and configuration standards.

How does this skill handle state management?

It implements Zustand for global state management, providing patterns for persistent storage and efficient hook-based state access.

Does this skill support the Next.js Pages Router?

No, this skill is strictly focused on the App Router architecture (Next.js 14+) to leverage the performance benefits of React Server Components.

Can I use this for data-heavy applications?

Yes, it includes specific patterns for TanStack Query to manage complex client-side data fetching, caching, and synchronization.

Modern Next.js Patterns

Name: Modern Next.js Patterns
Author: Add4x

byAdd4x

0•

Herramientas de Diseño

Implements production-ready Next.js architectures using App Router, TypeScript, Tailwind CSS v4, and shadcn/ui components.

This skill provides Claude with a comprehensive framework for building high-performance Next.js applications according to modern industry standards. It prioritizes a 'Server Components First' approach while offering structured guidance on client-side interactivity using Zustand and TanStack Query. By implementing standardized project structures and reusable component patterns like the cn() utility and shadcn/ui extensions, this skill ensures that generated code is scalable, maintainable, and type-safe from the start.

Características Principales

01Client-side state management with Zustand and persistent middleware

02Strict TypeScript typing and standardized project directory organization

03Tailwind CSS v4 utility patterns and shadcn/ui component standards

04App Router architecture with optimized Server Component implementation

050 GitHub stars

06Efficient data fetching and caching using TanStack Query

Casos de Uso

01Developing accessible, variant-based UI components using shadcn/ui and CVA

02Building complex stateful features like e-commerce carts or multi-step forms with global state

03Scaffolding a new Next.js project with a scalable directory structure and absolute imports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add add4x/cc-plugins nextjs-patterns

For use in Claude.ai and ChatGPT

Download Skill