What is Feature-Sliced Design (FSD)?

FSD is an architectural methodology for frontend applications that divides code into layers like shared, entities, features, widgets, and views to increase scalability and maintainability.

What state management libraries are included?

The starter includes Zustand for client-side state and TanStack React Query for managing server-state and data fetching.

How does it handle code quality and linting?

It sets up ESLint 9 with a flat configuration, Prettier for formatting, and Husky with pre-commit hooks to ensure code follows architectural boundaries.

Is the UI layer customizable?

Absolutely. It comes pre-installed with Radix UI primitives and Tailwind CSS, providing a foundation for accessible, highly customized interfaces.

Does this skill support the latest Next.js features?

Yes, it supports the App Router, Next.js 15+, and includes configurations for the new React Compiler.

Next.js FSD Architecture Starter

Name: Next.js FSD Architecture Starter
Author: rladydqls99

byrladydqls99

0•

개발자 도구

Scaffolds production-ready Next.js projects with Feature-Sliced Design architecture and modern development tooling.

This skill automates the setup of a high-quality Next.js boilerplate following the Feature-Sliced Design (FSD) architectural pattern. It configures a comprehensive modern stack including TypeScript, Tailwind CSS, and TanStack Query, while setting up essential developer experience tools like Husky, ESLint (flat config), and Prettier. It is designed for developers who need to start scalable enterprise-grade applications with a clear separation of concerns, strict architectural linting, and pre-configured directory structures for features, entities, and widgets.

주요 기능

01Automated Git hooks setup via Husky and lint-staged for code quality

02React Compiler support enabled by default for optimized performance

03Automated FSD (Feature-Sliced Design) directory structure generation

04Pre-configured ESLint 9 flat config with architectural boundary rules

050 GitHub stars

06Full modern stack integration including Zustand, React Query, and Zod

사용 사례

01Initializing a new enterprise-scale Next.js project with a scalable architecture

02Setting up a production-ready boilerplate with modern state management and UI primitives

03Standardizing team workflows using Feature-Sliced Design principles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rladydqls99/claude-marketplace nextjs-fsd-starter

For use in Claude.ai and ChatGPT

Download Skill