skills.rest
desarrolloainia
desarrolloainiaCOMMUNITY
Explore all skills by this author →
GitHub

feature-sliced-design

Organizes frontend codebases using Feature-Sliced Design v2.1 layers, slices, and import rules.

Updated Sep 14, 2026
Search Tags:#React#frontend architecture#Next.js#code organization#FSD#feature-sliced-design#import boundaries
One-click install
npx skills add https://github.com/desarrolloainia/nuevo_circuito_mir --skill feature-sliced-design-desarrolloainia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feature-sliced-design
Source: https://github.com/desarrolloainia/nuevo_circuito_mir/tree/main/frontend/.agents/skills/feature-sliced-design
Command: npx skills add https://github.com/desarrolloainia/nuevo_circuito_mir --skill feature-sliced-design-desarrolloainia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend projects often grow into tangled folder structures with unclear ownership, circular imports, and premature abstractions. This Skill applies the official Feature-Sliced Design (FSD) v2.1 methodology to decide where code belongs, enforce layer boundaries, and keep architecture maintainable as the project scales. ## Core Features & Use Cases - Placement decisions: A decision tree and quick placement table determine whether code belongs in app, pages, features, entities, or shared, following the "start simple, extract when needed" rule. - Architecture enforcement: Defines the import rule (lower layers only), public API via index.ts, domain-based file naming, and cross-import resolution strategies including the @x pattern for entities. - Framework integration: Conditional reference guides cover Next.js (App and Pages Router), React Router, Nuxt, Vite, and Astro, plus auth, API handling, Redux, and TanStack Query patterns. - Use Case: When adding a login flow to a React app, ask where the form, token storage, and API calls should live; the Skill places tokens in shared/auth, the form in pages or features, and validates the result with the Steiger linter. ## Quick Start Ask the AI to review your frontend folder structure and reorganize it according to Feature-Sliced Design v2.1 layers.

Frequently Asked Questions about feature-sliced-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a React project with Feature-Sliced Design?▼

Start with three layers: app for providers and routing, pages for route-level code, and shared for UI kit and utilities. Add features and entities only when the extraction rule holds: confirmed multi-use, an independent reason to change, and a focused responsibility.

Where should business logic go in FSD architecture?▼

Business logic belongs in the model segment of the slice that owns it, typically a page or feature first. Extract it to entities only when multiple consumers must share one authoritative copy; never place business rules in the shared layer.

Does Feature-Sliced Design work with Next.js App Router?▼

Yes. Keep Next.js routing folders at the project root and rename the FSD layers to _app and _pages inside src to avoid name collisions. Route files become thin re-exports of FSD page slices, and route handlers live in an api-routes segment.

How do I resolve cross-imports between slices in FSD?▼

First try merging slices, pushing shared domain logic to entities, or composing from an upper layer via render props or slots. As a last resort, entities may use the @x notation; features may only access another slice through its public index.ts API.

When should I avoid creating an entities layer?▼

Skip entities for thin-client apps where the backend handles most processing. Do not create entities for single-use code, plain CRUD operations, API response types, or auth tokens; those belong in pages, shared/api, or shared/auth respectively.

How do I validate FSD architecture violations automatically?▼

Use Steiger, the official FSD linter, installed via npm as @feature-sliced/steiger. Running npx steiger src flags issues like insignificant slices with single references and excessive slicing across a layer.

Related Skills

Explore More Software Engineering Skills→
dusvlf111dusvlf111

folder-structure

Organize frontend projects into Feature-Sliced Design layers with import rules.

Community
Intermediate
archibatearchibate
6

python-code-style

Enforce Python style, type checks, and Google-style docstrings using ruff and mypy.

Community
Intermediate
ZendevveZendevve
20

mcaf-architecture-overview

Create or update docs/Architecture/Overview.md with Mermaid diagrams mapping boundaries, dependencies, and contracts.

Community
Intermediate
xmun74xmun74

feature-sliced-design

Guide frontend project structuring with Feature-Sliced Design v2.1 layers and import rules.

Community
Advanced