Feature-Sliced Design: Agent Skills

Agent skills that teach AI coding agents Feature-Sliced Design (FSD) v2.1 architectural methodology.

Installation

npx skills add feature-sliced/skills

Available Skills

feature-sliced-design

Apply FSD v2.1 principles when structuring frontend projects. The agent learns layer hierarchy, import rules, the decision framework for code placement, and common patterns.

Use when:

• Setting up or reorganizing a frontend project structure
• Deciding where to place code (pages vs. features vs. entities vs. shared)
• Placing static assets (images, icons, fonts, PDFs) in the right slice or layer
• Grouping closely related slices for navigation as the project grows
• Resolving cross-import issues or evaluating the @x pattern
• Deciding whether to create or remove an entity, or whether to skip the entities layer entirely
• Migrating from FSD v2.0 or a non-FSD codebase
• Integrating FSD with Next.js (App Router or Pages Router), Nuxt, Vite, or Astro
• Implementing auth, API request handling, or state management (Redux, TanStack Query) within FSD

Examples:

Set up FSD project structure with Next.js App Router

Where should I put this auth logic?

These two entities need to import from each other. How do I fix this?

Where should I put hero images for my landing page?

Skill Structure

feature-sliced-design/
  SKILL.md                         Core rules and decision framework
  references/
    layer-structure.md             Detailed folder structures per layer (incl. slice groups)
    asset-handling.md              Where to place images, icons, fonts, and other static assets
    cross-import-patterns.md       Cross-import resolution: 4 strategies for features/widgets, @x for entities
    excessive-entities.md          Keeping the entities layer clean: when to skip, what to extract
    migration-guide.md             v2.0→v2.1 and non-FSD migration
    framework-integration.md       Next.js (App Router & Pages Router), Nuxt, Vite/CRA, Astro setup
    practical-examples.md          Auth, types, API, Redux, TanStack Query (React Query)

The agent reads only SKILL.md by default. Reference files are loaded on demand based on the task.

Contributing

When adding or modifying reference files, keep these constraints in mind:

• SKILL.md body ≤ 500 lines
• Each reference file: 200–500 lines
• SKILL.md + any single reference ≤ 1,000 lines combined
• If a reference exceeds 500 lines, split it and update the conditional loading section at the bottom of SKILL.md

References

• fsd.how: FSD official documentation
• Steiger: Official FSD linter
• skills.sh: Agent skills directory

License

MIT