feature-sliced-designlisted

Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import boundaries, resolving cross-imports or evaluating the @x pattern, deciding whether to create or remove an entity, evaluating whether the entities layer is needed at all, deciding whether logic should remain local or be extracted, migrating from FSD v2.0 or a non-FSD codebase, integrating FSD with frameworks (Next.js App Router and Pages Router, Nuxt, Vite, Astro), or implementing common patterns such as authentication, API handling, Redux, and TanStack Query (React Query) within FSD.
feature-sliced/skills · ★ 48 · Web & Frontend · score 73

Install: claude install-skill feature-sliced/skills

# Feature-Sliced Design (FSD) v2.1 > **Source**: [fsd.how](https://fsd.how) | Strictness can be adjusted based on > project scale and team context. --- ## 1. Core Philosophy & Layer Overview FSD v2.1 core principle: **"Start simple, extract when needed."** Place code in `pages/` first. Duplication across pages is acceptable and does not automatically require extraction to a lower layer. Extract only when the same code is currently being used in multiple places (not hypothetically), the usages do not always change together, and the boundary has a focused responsibility. **Not all layers are required.** Most projects can start with only `shared/`, `pages/`, and `app/`. Add `widgets/`, `features/`, `entities/` only when they provide clear value. Do not create empty layer folders "just in case." FSD uses 6 standardized layers, listed here from highest to lowest: ```text app/ → App initialization, providers, routing pages/ → Route-level composition, owns its own logic widgets/ → Large composite UI blocks reused across multiple pages features/ → Reusable user interactions (only when used in 2+ places) entities/ → Reusable business domain models (only when used in 2+ places) shared/ → Infrastructure with no business logic (UI kit, utils, API client) ``` **Import rule**: A module may only import from layers strictly below it. Cross-imports between slices on the same layer are forbidden. ```typescript // ✅ Allowed import { Button } from "@/shared/ui/Button";