feature-sliced-design
feature sliced design
What it does
- Used in only one page → keep it in that pages/ slice.
- Used in 2+ pages but duplication is manageable → keeping separate copies
- An entity or feature used in only one page → keep it in that page
- UI components → shared/ui/
- Utility functions → shared/lib/
- API client, route constants → shared/api/ or shared/config/
- Auth tokens, session management → shared/auth/
Requirements & configuration
- not automatically require extraction to a lower layer. Extract only when the
- | Auth token/session | shared/auth/ (always) | shared/auth/ (always) |
- If two slices on the same layer need to share logic, follow the resolution
- Thin-client apps rarely need entities.
- 3. Business logic does not automatically require an entity. Keeping types
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
feature-sliced-design FAQ
What does the feature-sliced-design skill do?
> 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. Used in only one page → keep it in that pages/ slice. Used in 2+ pages but duplication is manageable → keeping separate copies
What does feature-sliced-design require?
not automatically require extraction to a lower layer. Extract only when the | Auth token/session | shared/auth/ (always) | shared/auth/ (always) | If two slices on the same layer need to share logic, follow the resolution Thin-client apps rarely need entities. 3. Business logic does not automatically require an entity. Keeping types
How do I install feature-sliced-design?
Run: npx -y skills add https://github.com/feature-sliced/skills --skill feature-sliced-design --agent claude-code — the source lives at github.com/feature-sliced/skills.
Maintain feature-sliced-design?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/feature-sliced-skills-feature-sliced-design?ref=badge) npx agentictools info skills/feature-sliced-skills-feature-sliced-design The second line is the CLI lookup for this page — handy in READMEs and docs.