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

개발자 도구

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.

주요 기능

Automated Git hooks setup via Husky and lint-staged for code quality
React Compiler support enabled by default for optimized performance
Automated FSD (Feature-Sliced Design) directory structure generation
Pre-configured ESLint 9 flat config with architectural boundary rules
0 GitHub stars
Full modern stack integration including Zustand, React Query, and Zod

사용 사례

Initializing a new enterprise-scale Next.js project with a scalable architecture
Setting up a production-ready boilerplate with modern state management and UI primitives
Standardizing team workflows using Feature-Sliced Design principles

소개

주요 기능

Automated Git hooks setup via Husky and lint-staged for code quality
React Compiler support enabled by default for optimized performance
Automated FSD (Feature-Sliced Design) directory structure generation
Pre-configured ESLint 9 flat config with architectural boundary rules
0 GitHub stars
Full modern stack integration including Zustand, React Query, and Zod

사용 사례

Initializing a new enterprise-scale Next.js project with a scalable architecture
Setting up a production-ready boilerplate with modern state management and UI primitives
Standardizing team workflows using Feature-Sliced Design principles