fsd-slice

To scaffold a Feature-Sliced Design (FSD) project structure in React, this Skill automatically generates a complete slice directory with standard `ui`, `model`, `api`, and `lib` subdirectories along with necessary `index.ts` files. It ensures architectural consistency by applying predefined rules for feature-based modular development.

The best way to generate FSD slices for Next.js projects is using automated scaffolding tools that create the entire directory and boilerplate code instantly. This Skill specifically supports Next.js projects using TanStack Query and Tailwind CSS, enforcing specific component structures and `cn()` styling conventions.

Yes, this scaffolding tool is designed specifically for React and Next.js projects using TanStack Query and Tailwind CSS. It enforces coding conventions tailored to this tech stack, ensuring that generated `ui`, `model`, `api`, and `lib` files integrate seamlessly with your existing feature-based modular setup.

You can create a new feature slice directory without manual setup by invoking this Skill to instantly generate the boilerplate structure. For example, requesting a slice named 'auth' under the 'features' layer will automatically produce all required subdirectories and index files for immediate development.

When generating an FSD slice, the tool creates standard `ui/`, `model/`, `api/`, `lib/` subdirectories and their corresponding `index.ts` files. This complete structure supports feature-based modular development by separating UI components, business logic, API calls, and utility functions.

Yes, this FSD scaffolding tool enforces specific coding conventions by applying predefined rules for component structure and styling using the `cn()` utility. It ensures architectural consistency across your React or Next.js project by standardizing the directory layout and boilerplate code generation.