What state management libraries does it use?

It prioritizes TanStack Query for server state, nuqs for URL-reflectable state (like filters and pagination), and Zustand for lightweight client-only UI state.

How does this skill handle project structure?

It implements a feature-based co-location pattern where all domain-specific logic, components, and API calls live within a 'features' directory, keeping the 'app' directory reserved strictly for routing.

How does it coordinate between data and UI?

The skill follows a multi-step workflow: it first designs the architecture, delegates data layer implementation to a specialized provider skill, and then triggers UI development once the data hooks are ready.

Does it support Next.js 15 and the App Router?

Yes, it is purpose-built for Next.js 15, utilizing Server Components by default, Server Actions for mutations, and optimized App Router conventions like loading.tsx and error.tsx.

Next.js Feature Orchestrator

Name: Next.js Feature Orchestrator
Author: sellernote

bysellernote

•

デザインツール

Orchestrates end-to-end Next.js feature development by coordinating data layers, UI components, and App Router architecture.

This skill acts as a master architect for Next.js 15 App Router projects, implementing a rigorous feature-based co-location pattern. It manages the entire lifecycle of feature creation—from requirement analysis and architectural design to the delegation of specialized data and UI tasks. By enforcing strict dependency rules and separating route logic from business logic, it ensures the creation of scalable, maintainable, and high-performance full-stack web applications that follow modern React best practices.

主な機能

01Next.js 15 App Router optimization including streaming and Suspense boundaries

02Automated delegation to specialized data-provider and UI-dev sub-skills

03Feature-based co-location architecture design and enforcement

04End-to-end coordination between TanStack Query data layers and UI components

05Strict dependency management to prevent circular imports and architectural drift

061 GitHub stars

ユースケース

01Building complex, end-to-end CRUD features within a Next.js application

02Architecting new dashboard pages with sophisticated data fetching and state management

03Implementing full-stack functionality using Server Actions, Zod schemas, and Zustand

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin nextjs-dev-orchestration

For use in Claude.ai and ChatGPT

主な機能

01Next.js 15 App Router optimization including streaming and Suspense boundaries

02Automated delegation to specialized data-provider and UI-dev sub-skills

03Feature-based co-location architecture design and enforcement

04End-to-end coordination between TanStack Query data layers and UI components

05Strict dependency management to prevent circular imports and architectural drift

061 GitHub stars

ユースケース

01Building complex, end-to-end CRUD features within a Next.js application

02Architecting new dashboard pages with sophisticated data fetching and state management

03Implementing full-stack functionality using Server Actions, Zod schemas, and Zustand

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin nextjs-dev-orchestration

For use in Claude.ai and ChatGPT