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

Run the validator before opening a pull request:

node .github/scripts/validate-skills.mjs

It enforces the skill package rules this repository follows, based on the guidance in vercel-labs/agent-skills AGENTS.md:

  • The SKILL.md body stays under 500 lines to keep the initial skill context lightweight. Frontmatter is excluded from the count.
  • Every references/<file>.md path mentioned in SKILL.md resolves to an existing file

References

License

MIT