feature-sliced-design — Claude Code skill: FSD and installation
This skill helps organize frontend code with Feature-Sliced Design and check import boundaries. Use it when creating or migrating a project.
npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-codeWhat feature-sliced-design does
The skill applies Feature-Sliced Design v2.1 to frontend projects. It helps decide where code, static assets, and logic belong, when to extract features or entities, and when to keep code in pages. It also covers public APIs, import boundaries, cross-imports, and the @x pattern.
Its guidance includes a decision tree, a placement table, and structure checks. The covered integrations include Next.js App Router, Next.js Pages Router, React Router, Nuxt, Vite, and Astro; it also discusses authentication, APIs, Redux, and TanStack Query. The widgets layer is allowed but discouraged. That is a reason to check whether a composition belongs in pages, features, shared, or app.
The skill is available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Installing it in Claude Code requires npx.
What it helps with
- map code to FSD layers
- choose a location for a component or API request
- check import boundaries between layers
- migrate a project from FSD v2.0 or another structure
Example prompts for the agent
- Apply Feature-Sliced Design v2.1 and decide where the new profile component belongs.
- Check this project for FSD import violations and suggest focused fixes.
- Migrate this project to FSD and explain what should stay in
pagesand what should move tofeaturesorentities.
How to install feature-sliced-design
1Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code2Manually: put the files in place
~/.claude/skills/feature-sliced-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/feature-sliced-design/
1Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a codex2Manually: put the files in place
.agents/skills/feature-sliced-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a cursor2Manually: put the files in place
.cursor/skills/feature-sliced-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install feature-sliced/skills feature-sliced-design2Manually: put the files in place
.github/skills/feature-sliced-design/SKILL.md1Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/feature-sliced/skills --path feature-sliced-designManually: put the files in place
.devin/skills/feature-sliced-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about feature-sliced-design
How do I install feature-sliced-design in Claude Code?
Run npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code, then run the same command again: npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code. After installation, the file is available at ~/.claude/skills/feature-sliced-design/SKILL.md.
What does feature-sliced-design do?
The skill applies Feature-Sliced Design v2.1 to placement decisions, import boundaries, and reusable slices. It also provides guidance for migrations and frontend framework integrations.
Which platforms support feature-sliced-design?
The skill supports Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.
