feature-slicing
Helps structure frontend code into domain-based slices with strict dependency rules.
Install
mkdir -p .claude/skills/feature-slicing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19541" && unzip -o skill.zip -d .claude/skills/feature-slicing && rm skill.zipInstalls to .claude/skills/feature-slicing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Enforce layer hierarchy and import rules
- →Organize code by business domain
- →Validate architecture using Steiger
- →Define public APIs for slices
- →Structure frontend projects into app, pages, widgets, features, entities, and shared layers
How it works
It applies the Feature-Sliced Design methodology by restricting imports to strictly lower layers and organizing code into domain-specific slices.
Inputs & outputs
When to use feature-slicing
- →Structure a new frontend project with FSD
- →Refactor legacy code into business domain slices
- →Enforce layer dependency rules in code
- →Organize frontend components and modules
About this skill
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 |
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
@xAPIs are the documented cross-entity exception. appandsharedhave 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.
| Task | Reference |
|---|---|
| Layer ownership and extraction | LAYERS.md |
Public APIs, barrels, cycles, @x | PUBLIC-API.md |
| Concrete entity/feature/widget/page examples | IMPLEMENTATION.md |
| Next.js route directories and server/client exports | NEXTJS.md |
| Requested migration of existing code | MIGRATION.md |
| Import matrix or compact structure lookup | CHEATSHEET.md |
Use the official FSD documentation for specification questions. Adapt example libraries and aliases to the installed stack.
When not to use it
- →Adding layers for completeness in small apps
- →Using essence-based segment names like components or utils
Prerequisites
Limitations
- →Modules cannot import sideways or upward
- →Shared layer depends only on external packages
How it compares
Unlike generic folder structures, it enforces a strict hierarchy where modules can only import from layers below them to prevent coupling.
Compared to similar skills
feature-slicing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| feature-slicing (this skill) | 0 | 3mo | Review | Advanced |
| nuxt | 0 | 7mo | No flags | Intermediate |
| ai-model-web | 1 | 4mo | Review | Intermediate |
| moai-domain-frontend | 1 | 5mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nuxt
onmax
Always-on Nuxt disambiguation layer for this project. Use it to choose the right Nuxt pack first, then switch to Vue or module guidance only when Nuxt no longer owns the abstraction.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
perf-web-optimization
tech-leads-club
Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.
rdc-setup
reactive
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
astro
Anhvu1107
ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.