Agent skill · software engineering · ccheney
feature-slicing
Proactively apply when creating new features/components/pages or setting up frontend project structure. Triggers on FSD, feature slicing, Feature-Sliced Design, frontend architecture, layer structure, module boundaries, scalable frontend, slice organization, public API, barrel exports, import rules, Steiger. Use when restructuring React/Next.js/Vue/Remix projects, organizing frontend code, fixing import violations, deciding where code belongs (entity vs feature vs widget vs shared), or migrating legacy codebases. Feature-Sliced Design (FSD) architecture for frontend projects.
Why this skill is useful
Provides specific architectural patterns and import rules for structuring frontend projects that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-07. 58 stars on the source repository.
What this skill does
Feature-Sliced Design Architecture Frontend architecture methodology (spec v2.1) with a strict layer hierarchy and one import rule. FSD organizes code by business domain rather than technical role. Official Docs: feature-sliced.design GitHub: feature-sliced --- THE IMPORT RULE (Critical) A module in a slice may only import slices from layers strictly below. Never sideways or upward. This is what keeps slices replaceable and dependencies traceable — every violation you allow becomes an invisible coupling someone else trips over. Violation Example Fix ----------- --------- ----- Cross-slice (same layer) features/auth → features/user-profile Move shared code to a lower layer, or compose both in the page/widget above Upward import entities/user → features/auth Move the needed code down Shared importing up shared/ → entities/ Shared depends only on external packages Cross-entity entities/order → entities/product internals Use @x notation (entities layer only) Exception: app/ and shared/ are each "a layer and a slice at the same time" — they divide directly into segments, and their segments may freely import each other. --- Layer Hierarchy Layer Purpose Has Slices Required ------- --------- ------------ ---------- app/ Initialization, routing, providers, global styles No (segments only) Yes pages/ Route-based screens — the default home for most code Yes Yes widgets/ Large self-sufficient UI blocks reused across pages; may own their data fetching and logic Yes No features/ User interactions reused across pages (login, add-to-cart) Yes No entities/ Business domain models reused across pages (user, product) Yes No shared/ Reused infrastructure: UI kit, API client, route constants, utilities. No knowledge of domain slices — but it may be app-aware (your backend's client, your route paths) No (segments only) Yes The processes/ layer is deprecated — move its contents to features/ and app/. Minimal setup: app/, pages/, shared/. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ccheney/feature-slicing