Skills

FSD Skills: have a coding agent layer by v2.1 instead of slicing features first

For people who want to organize front-end layers by Feature-Sliced Design v2.1. Default to pages-first; do not carve features or entities on the first move.

Official source · Feature-Sliced Skills

Install

npx skills add feature-sliced/skills

Who it's for

If you are reorganizing a front-end project's directories, or keep wondering whether a piece of code belongs in app, pages, features, entities, or shared, this Agent skill set fits better. It teaches a coding agent to apply Feature-Sliced Design (FSD) v2.1: layers, import rules, placement decisions, and common patterns. Methodology body:

https://fsd.how/

It assumes you already have a front-end repository and accept adding the skills to a coding agent with npx. If you only want to read the methodology and do not plan to let an agent change directories, start with the docs above. The page gives no client roster and does not write FSD as a plugin exclusive to one framework, so do not invent a framework binding.

First try in 3 minutes

The official install command is only this one:

npx skills add feature-sliced/skills

It writes skills into your Agent environment. First confirm this machine has npx and this is the coding agent you want to change, then execute.

After install, do a read-only check first; do not reorganize the repository at once. Have the agent compare the current front-end structure against FSD v2.1: what already sits in app/, pages/, shared/, and which import directions look suspicious. Success signal: it can talk about layers and import rules, and it shows a pages-first bias — look at these three layers first, instead of immediately creating features/ or entities/. If it starts moving files in batches, stop first.

SKILL.md is the entry. It requires the agent to read reference files only when the task needs them, to keep the initial context small. The first question should stay specific to "check structure / where does this code go", and avoid making it load every reference at once.

Use cases

Case 1: Set up or reorganize a front-end project structure. The official page lists this kind of task as a use moment. The agent should apply v2.1 layers and common patterns, but the bias is pages-first: start from app/, pages/, shared/, and only open features or entities when a stable shared responsibility already deserves a boundary. The excerpt gives no directory-template archive and no migration script. So the first reorganization should first produce a comparison note that lists the paths that will move; you confirm, then change files.

Case 2: Judge a code placement. Another use moment is deciding whether code belongs in app, pages, features, entities, or shared. Hand an existing module to the agent and only ask "by FSD v2.1, which layer, and do imports violate rules". It does not write auto-fix rules and does not write a comparison table against a particular router library. So acceptance only sees: a layer suggestion and an import reason; if it suggests carving a feature/entity immediately, it must also explain why that shared responsibility is already stable. Opening a new boundary without that explanation is outside this material.

Boundaries

These skills teach FSD v2.1, not an oral FSD of any year. Methodology details follow

https://fsd.how/

The page does not cover backend layering, and it does not authorize the agent to rename at scale without confirmation.

The install path is npx skills add feature-sliced/skills. Do not put two installers side by side. The entry is always SKILL.md; reference files are read on demand. You cannot name those reference files from this excerpt, so do not pretend you already know a complete inventory.

The first time, stop at structure check and placement judgment. Any move of directories, creation of features/entities, or change of import aliases must first have the agent list the files it will change and the reasons; you confirm, then continue.