mcpField
F
feature-slicing

feature-slicing

github.com/ccheneyDevelopment61239 installsUpdated 7w ago
Repository

About feature-slicing

A guide for frontend developers applying Feature-Sliced Design v2.1 to module boundaries. It prioritizes the existing project structure and defines import rules for slices and layers.

Key features

  1. 01Determine module layer ownership
  2. 02Follow FSD import contracts
  3. 03Design slice public APIs
  4. 04Preserve framework directories and boundaries
  5. 05Consult migration and implementation references

Use cases

  1. 01Decide where a new module belongs
  2. 02Review cross-layer imports
  3. 03Restructure existing code when requested

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ccheney/robust-skills --skill feature-slicing

After installing, type/feature-slicingin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
CHEATSHEET.md
IMPLEMENTATION.md
LAYERS.md
MIGRATION.md
NEXTJS.md
PUBLIC-API.md

Details

From the project README

Feature-Sliced Design

Apply FSD v2.1 to the requested module-boundary decision. The user's explicit instructions take precedence over this skill's guidelines; an ordinary frontend edit is not permission to migrate its architecture.

Work within the project

Use the affected files, imports, framework/router, and requested behavior as input. Determine whether the repository already uses FSD or the user is asking to adopt it. If neither is true, preserve the existing structure.

Prefer page-local ownership until shared use or a distinct responsibility justifies extraction:

LayerResponsibility
appInitialization, providers, routing
pagesScreens and their local UI, data, and logic
widgetsSelf-contained UI blocks
featuresReusable user interactions
entitiesShared business concepts
sharedInfrastructure and domain-independent utilities/UI

Use only the layers needed. Preserve framework-reserved directories and server/client boundaries, particularly in Next.js.

Maintain the import contract

  • A slice imports other slices from lower layers, not sideways or upward. Explicit @x APIs are the documented cross-entity exception.
  • app and shared have segments rather than slices; their segments can import one another.
  • Expose deliberate public APIs. Use internal relative imports to avoid importing a slice's own barrel; keep server-only exports out of client entrypoints.
  • Name FSD segments by purpose (ui, api, model, lib, config). Do not rename unrelated folders merely to match an example.

Deliver the requested placement, refactor, or review with the resulting import paths. For code changes, verify affected imports and use existing architecture checks when available. Install Steiger or rewrite path aliases only when the task calls for tooling setup.

References

Choose the reference that resolves the current decision.

TaskReference
Layer ownership and extractionLAYERS.md
Public APIs, barrels, cycles, @xPUBLIC-API.md
Concrete entity/feature/widget/page examplesIMPLEMENTATION.md
Next.js route directories and server/client exportsNEXTJS.md
Requested migration of existing codeMIGRATION.md
Import matrix or compact structure lookupCHEATSHEET.md

Use the official FSD documentation for specification questions. Adapt example libraries and aliases to the installed stack.

Comments

Markdown supported