All skills
ccheney avatar

/feature-slicing

@f71635f

Organize frontend code with Feature-Sliced Design (FSD). Use when adopting FSD, placing code in an existing FSD project, or fixing slice imports and public APIs; not for every new component or page.

Use this Skill: https://skilld.dev/gh/ccheney/robust-skills/feature-slicing

This session only. Nothing lands on disk.

SKILL.md

≈54 tokens always: the name and description. ≈665 when used: this file. ≈16k more on demand in 6 files.

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 @x APIs are the documented cross-entity exception.
  • app and shared have 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.

Source: SKILL.md on GitHub

1 warning15d5 checks · Risk SAFE
  • Gen Agent Trust Hub15d

    The skill provides comprehensive instructions and reference material for implementing Feature-Sliced Design (FSD) in frontend projects. It includes guidelines for layer organization, import rules, public APIs, and Next.js integration. The skill references official FSD documentation and tooling, such as the Steiger linter, and follows standard React/Next.js development patterns.

  • Socket15d

    No alerts

  • Snyk15d

    Risk: LOW · No issues

  • Runlayer7mo

    4/7 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at f71635f. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 weeks ago.

Activeupdated 3 weeks ago

README badge

README badge for ccheney/robust-skills/feature-slicing