Feature-Sliced Design Skill for Claude Code: What It Does and How to Install It

Makes your assistant organize frontend code with Feature-Sliced Design (FSD) v2.1: where code, assets and shared logic go.

Installs: 24.1K; on skills.sh
Stars: 114; on GitHub
Files: 11; besides SKILL.md
Updated: Oct 2026; last repo commit

SKILL.md holds the core rules: six layers, the import rule, a decision framework and anti-patterns. It tells the agent to read one of 9 reference files only when the task needs it, such as asset placement, cross-imports, migration, framework setup, auth and API, or state management.

It loads when you set up or reorganize a frontend project structure. It bundles no scripts. The skill is biased toward pages first, and discourages the widgets layer.

Good for

Frontend developers setting up or reorganizing a project structure
Teams deciding whether code earns its own feature or entity
People migrating from FSD v2.0 or a non-FSD codebase

Install feature-sliced-design

Claude Code

Copy this prompt.

Install the feature-sliced-design skill in Claude Code. Run this command:

npx skills add feature-sliced/skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The repo has one skill, so the README command installs just feature-sliced-design. The skill needs nothing else. If you follow its Steiger tip, install Steiger with npm install -D steiger in your own project.

From the project README. Source.

What's in the skill

When it loads

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 where page layouts belong or whether to use the widgets layer (discouraged), 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, React Router, Nuxt, Vite, Astro), or implementing common patterns such as authentication, API handling, Redux, and TanStack Query (React Query) within FSD.

Sections in SKILL.md

1. Core philosophy & layer overview
The extraction rule
The six layers
The import rule
2. Decision framework
3. Quick placement table
4. Architectural rules (MUST)
4-1. Import only from lower layers
4-2. Public API: every slice exports through index.ts
4-3. No cross-imports between slices on the same layer
4-4. Domain-based file naming (no desegmentation)
4-5. No business logic in shared/
5. Recommendations (SHOULD)
5-1. Pages first: place code where it is used
5-2. Be conservative with entities
5-3. Start with minimal layers

Key facts

Author: Feature-Sliced Design (feature-sliced org)
Repo: feature-sliced/skills
License: MIT per the README (the repo tree has no LICENSE file)
Installs on skills.sh: 24,078 (Nov 2, 2026)
GitHub stars: 114 for the whole feature-sliced/skills repo (Nov 2, 2026)
Last repo commit: Oct 11, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes: 12 files: SKILL.md, 9 in references/ and 2 in evals/ (counted from the repo tree)
Covers: FSD v2.1; Next.js, React Router, Nuxt, Vite, Astro; Redux and TanStack Query

What it includes

Six layers from app down to shared; most projects start with app, pages and shared.
The widgets layer is discouraged, and the processes layer is deprecated in v2.1.
Read · Section 1: Core philosophy and layers
Steps for deciding where a piece of code belongs.
Try: “Where should I put auth tokens and session state?”
Read · Section 2: Decision framework
A lookup table for common placement questions.
Read · Section 3: Quick placement table
Import only from lower layers, export through index.ts, no cross-imports on a layer.
Also domain-based file naming, and no business logic in shared/.
Read · Section 4: Architectural rules (MUST)
Pages first, be conservative with entities, start with minimal layers.
5-4 recommends validating with the Steiger linter.
Try: “This rule is used on two pages now. Should it become an entity?”
Read · Section 5: Recommendations (SHOULD)
Premature entities, CRUD in entities, abusing @x, single-use extraction.
Read · Section 6: Anti-patterns (AVOID)
Entities prefer a boundary merge; features and widgets get strategies A to D.
The strategies are slice merge, push to entities, compose from an upper layer, and Public API access.
Try: “These two entities need to import from each other. How do I fix this?”
Read · Section 7: Cross-import resolution
Standard segments ui, model, api, lib and config; what belongs in shared.
Read · Sections 8 and 9: Segments and shared layer
Routes the agent to one of 9 reference files only when the task calls for it.
Covers layer structure, assets, cross-imports, entities, migration, frameworks, auth and API, and state management.
Try: “Set up FSD project structure with Next.js App Router”
Read · Section 10: Conditional references
Runs the Steiger linter, which section 5-4 recommends after npm install -D steiger.
SKILL.md names insignificant-slice and excessive-slicing as the key rules.
Runs code · npx steiger src

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Restructuring moves your files
Following the skill can mean the agent creates folders and moves or renames files and imports. Commit first and review the diff. github.com
It suggests a dev dependency
Section 5-4 shows npm install -D steiger and npx steiger src. Run these only if you want the linter in your project. github.com

Technical details

Turning on read-only	No read-only mode is documented.
Talks to	npm registry (npm install -D steiger)
Scopes	Guides where files go, so the agent may create, move or rename files in your frontend project SKILL.md suggests installing Steiger with npm

Questions

What does the feature-sliced-design skill do?

It teaches your assistant the Feature-Sliced Design v2.1 way of organizing frontend code. That includes the layer order, import rules and a decision framework for where code, assets and shared logic belong.

How do I install it?

Use the install box at the top of this page. The README gives one command, a skills CLI install for the feature-sliced/skills repo.

Which frameworks does it cover?

The README lists Next.js (App Router or Pages Router), React Router, Nuxt, Vite and Astro for integration, plus Redux and TanStack Query for state management.

Is it the official FSD skill?

SKILL.md describes itself as the official FSD v2.1 skill, and it sits in the feature-sliced GitHub organization. The README says it follows the official documentation but is not a verbatim copy and picks one answer where two official guides differ.

Does it always add every layer?

No. The README calls its bias pages-first: start with app, pages and shared, and open a features or entities boundary only when a stable shared responsibility has earned one. SKILL.md discourages the widgets layer.

Is it safe?

It bundles no scripts, only guidance files. Following it can lead the agent to move files and rewrite imports in your project. Our advice: commit before a restructure and review the diff.

Does it need an API key?

No key or sign-in is named in SKILL.md or the README. SKILL.md suggests the Steiger linter, which you install with npm.

Does it work in the Claude app?

The install box includes the standard ZIP upload route for the skill folder, which holds Markdown and JSON files. The README documents no Claude app install, so this route comes from the skill format, not from the README.

Information

updated Nov 2, 2026

Repository: feature-sliced/skills
Folder: feature-sliced-design

feature-sliced/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

feature-sliced/skills README · github.com
feature-sliced-design SKILL.md · github.com