Help us improve
Share bugs, ideas, or general feedback.
From rldyour-design
Строгая Feature-Sliced Design архитектура для frontend кода. Используй для: FSD, фронтенд архитектура, слои, pages/widgets/features/entities/shared, публичные API, импорты, размещение кода. EN triggers: FSD architecture, frontend layers, place code, slice public API, layer boundaries, where to put component, feature-sliced design.
npx claudepluginhub nddev-it-com/rldyour-claudecode --plugin rldyour-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/rldyour-design:fsd-frontend-architectureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Keep frontend design implementation structurally clean and scalable. Default to strict Feature-Sliced Design for React application code.
Guides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
Keep frontend design implementation structurally clean and scalable. Default to strict Feature-Sliced Design for React application code.
Use this skill without waiting for explicit invocation when the task involves:
app, pages, widgets, features, entities, or shared.Use it together with design-system-implementation whenever token or shared UI placement is involved.
Use these layers only:
app: routing, providers, root layouts, global styles, app-level initialization.pages: route-level screens and page-specific composition.widgets: large self-contained UI blocks or page sections that combine features/entities/shared.features: user actions that provide business value.entities: domain entities and their UI/model/api where appropriate.shared: reusable UI primitives, assets, tokens, config, API clients, libs without business logic.Do not use the deprecated processes layer. Although the official FSD docs still list it, this project treats it as deprecated and routes its responsibilities into app/pages/widgets depending on scope.
Files can import only from lower layers:
app can import from all lower layers.pages can import from widgets, features, entities, shared.widgets can import from features, entities, shared.features can import from entities, shared.entities can import from shared.shared imports only internal shared segments or external libraries.Slices on the same layer must not import each other's internals. Use public APIs.
Every slice and relevant segment must expose a public API, usually index.ts.
External imports must target public APIs, not internal files:
import { UserCard } from "@/entities/user".import { UserCard } from "@/entities/user/ui/UserCard".Use this placement by default:
shared/config/theme or the existing centralized theme location.shared/ui.shared/ui if generic, otherwise the owning widget/feature.shared/assets.pages/<page>/ui.widgets/<widget>/ui.features/<feature>/ui, features/<feature>/model, features/<feature>/api.entities/<entity>/ui, entities/<entity>/model, entities/<entity>/api.Never paste generated Figma, shadcn, or ReactBits code blindly.
Before committing generated or copied code:
For design implementation, report in Russian:
Placement: layer/slice/segment decisions.Public APIs: new or changed exports.Architecture constraints: import boundaries or compromises.Generated code adaptation: what was removed, tokenized, or moved.Validation: checks proving the placement works.processes слой.@/entities/user/ui/UserCard вместо @/entities/user).shared импортирует из features).shared/ui.