fsd-slice

Scaffolds Feature-Sliced Design slices with public API and segment structure in React projects.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill fsd-slice-gmolike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fsd-slice
Source: https://github.com/gmolike/Claude-Template/tree/main/.claude/skills/fsd-slice
Command: npx skills add https://github.com/gmolike/Claude-Template --skill fsd-slice-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a new feature, entity, or widget in a Feature-Sliced Design codebase requires consistent folder structure, correct layer placement, and disciplined public API boundaries. Doing this manually leads to inconsistent layouts, deep cross-slice imports, and violated layer rules. ## Core Features & Use Cases - Layer Selection Guidance: Helps decide whether new code belongs in entities/, features/, or widgets/ based on whether it is a business noun, a user-facing capability, or a layout composition. - Standard Slice Scaffolding: Creates the slice folder with index.ts as the public API plus model/, ui/, api/, and lib/ segments. - Boundary Enforcement Checklist: Verifies no imports from higher layers, no cross-slice deep imports, and a minimal public surface before the slice is done. - Use Case: When asked to "add a feature for user login", it scaffolds features/login/ with a public index.ts, TanStack Query options in api/, and business logic in model/. ## Quick Start Ask the assistant to create a new FSD slice, for example: "add a feature for editing the user profile".

Frequently Asked Questions about fsd-slice

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new feature slice in Feature-Sliced Design?

Create a folder under `features/` with an `index.ts` public API and `model/`, `ui/`, `api/`, and `lib/` segments. Keep business logic in `model/`, components in `ui/`, and only re-export what other slices may use from `index.ts`.

What is the difference between a feature, entity, and widget in FSD?

Entities are business nouns with their own data model like user or order. Features are user-facing capabilities like login or add-to-cart. Widgets compose features and entities into layout regions like headers or sidebars.

How do I enforce FSD layer boundaries in imports?

Other slices must import only from the slice's public `index.ts` via `@/<layer>/<slice-name>`, never from internal paths. A slice must not import from layers above it, and cross-slice deep imports are forbidden.

Where should TanStack Query code live in an FSD slice?

Request functions and TanStack Query options belong in the slice's `api/` segment. Business logic and types go in `model/`, while `ui/` stays thin with presentational and container components.

When should I use a widget instead of a feature in FSD?

Use a widget when composing multiple features or entities into a layout region such as a header or sidebar. If unsure between feature and widget, start with a feature since it covers single user-facing capabilities.