feature-sliced-design
The feature-sliced-design skill provides architectural guidance for applying the Feature-Sliced Design (FSD) v2.1 methodology to frontend projects. It includes rules for project structure, layer organization, import boundaries, and decision-making frameworks for code placement.
Is feature-sliced-design safe to install?
Review the source first: our audit of feature-sliced-design's source files found 2 shell commands, 2 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill suggests running shell commands for linting and makes network requests to documentation URLs.
How we audit skills: our security review methodology.
Who is this skill for?
Frontend developers and architects implementing or migrating to the Feature-Sliced Design methodology.
What can you do with it?
- Organizing project structure with FSD layers
- Deciding where to place code and static assets
- Defining public APIs and import boundaries
- Resolving cross-imports between slices
- Migrating from FSD v2.0 or non-FSD codebases
- Integrating FSD with frameworks like Next.js, Nuxt, Vite, and Astro
- Implementing patterns for authentication, API handling, and state management
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable architectural rules and a decision framework consistent with the FSD v2.1 methodology.
What does the skill file contain?
# Feature-Sliced Design (FSD) v2.1 > **Source**: [fsd.how](https://fsd.how) | Strictness can be adjusted based on > project scale and team context. --- ## 1. Core Philosophy & Layer Overview FSD v2.1 core principle: **"Start simple, extract when needed."** Place code in `pages/` first. Duplication across pages is acceptable and does not automatically require extraction to a lower layer. Extract only when the same code is currently being used in multiple places (not hypothetically), the usages do not always change together, and the boundary has a focused responsibility. **Not all layers a...
Frequently asked questions
What is the core principle of FSD v2.1?
The core principle is to start simple and extract code only when needed.
Are all six FSD layers required for every project?
No. Most projects can start with only shared, pages, and app layers.
How should I handle cross-imports between slices on the same layer?
Cross-imports are forbidden. Use strategies like slice merging, pushing logic to entities, composition from an upper layer, or accessing through a public API.
Where should I place CRUD operations?
Place CRUD operations in the shared/api/ segment.
How do I validate my project structure against FSD rules?
Use the Steiger linter by installing @feature-sliced/steiger and running the npx steiger src command.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
simple
221.4KDevelopers and project managers who need a fast, lightweight decision-making process for feature design or component creation
A structured brainstorming framework for architectural and creative tasks that guides users from discovery to decision-making through a defined process flow.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
make-interfaces-feel-better
37.7KFrontend developers and designers using AI agents to review UI code or implement design system improvements
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.