Feature Sliced Design

This applies Feature-Sliced Design v2.1 methodology to your frontend codebase, organizing it into six layers from app down through pages, widgets, features, entities, and shared. The big shift in v2.1 is "pages first," keeping code in pages and widgets until you actually need to reuse it elsewhere, rather than prematurely extracting everything into features and entities. It enforces strict import rules so higher layers can't import from lower ones, and slices on the same layer stay independent except through explicit @x cross-imports for legitimate business relationships. Use it when setting up a new project structure or refactoring an existing one that's become hard to navigate. The methodology is opinionated but solves real problems around where code lives and how pieces connect.

skills.sh installs: 440
GitHub stars: 2
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aiko-atami/fsd --skill feature-sliced-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Feature-Sliced Design (FSD) Skill - v2.1.0

An architectural methodology skill for scaffolding and organizing frontend applications using Feature-Sliced Design principles.

Overview

Feature-Sliced Design v2.1 is a compilation of rules and conventions for organizing frontend code to make projects more understandable, maintainable, and stable in the face of changing business requirements.

Version 2.1 introduces the "Pages First" approach - keeping more code in pages and widgets rather than prematurely extracting it to features and entities.

Core Principles

The "Pages First" Approach (FSD v2.1)

The fundamental principle of FSD v2.1: Keep code where it's used until you need to reuse it.

Instead of immediately extracting everything into entities and features, start by keeping code in pages and widgets. Only move code to lower layers when you actually need to reuse it.