Feature Slicing

This is a comprehensive FSD (Feature-Sliced Design) implementation guide that enforces strict layer hierarchy and import rules for frontend projects. You'd use this when setting up React, Next.js, or Vue architectures that need to scale beyond the typical "components and utils" folders. The core rule is simple: layers can only import downward (app → pages → widgets → features → entities → shared), never sideways or up. It includes practical decision trees for choosing between features and entities, public API patterns via index.ts files, and specific fixes for common violations like cross-slice imports. The anti-patterns section is especially useful since it catches the mistakes most teams make when trying to organize large codebases.

skills.sh installs: 242
GitHub stars: 62
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ccheney/robust-skills --skill feature-slicing --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

Layer	Responsibility
`app`	Initialization, providers, routing
`pages`	Screens and their local UI, data, and logic
`widgets`	Self-contained UI blocks
`features`	Reusable user interactions
`entities`	Shared business concepts
`shared`	Infrastructure and domain-independent utilities/UI