Feature-Sliced Design
Feature-Sliced Design
Purpose
Feature-Sliced Design (FSD) is an architectural methodology for organizing frontend applications into a standardized, scalable structure. It provides clear separation of concerns through a layered hierarchy that prevents circular dependencies and promotes maintainability.
Why use FSD:
- Scalability: Grows naturally as your application expands
- Maintainability: Clear boundaries make refactoring safer
- Team collaboration: Consistent structure enables parallel development
- Onboarding: New developers understand architecture quickly
Custom 'views' layer:
This skill uses 'views' instead of the standard FSD 'pages' layer to avoid confusion with Next.js App Router's /app directory. The /app directory handles routing only (minimal logic), while /src/views contains your actual page business logic.
Next.js integration:
FSD works seamlessly with Next.js App Router by separating routing concerns (in /app) from business logic (in /src/views and other FSD layers). This keeps your routing configuration clean while maintaining FSD's architectural benefits.
When to Use
More from constellos/claude-code-plugins
ui wireframing
This skill should be used when the user asks to "create a wireframe", "design a layout", "plan UI structure", "sketch component layout", "create WIREFRAME.md", "mobile-first wireframe", or mentions ASCII wireframes, layout planning, or UI structure before implementation. Provides mobile-first ASCII wireframe methodology for visualizing layouts before code.
6supabase local development
This skill should be used when the user asks to "start supabase locally", "set up local supabase", "run supabase dev", "initialize supabase project", "configure local database", "start local postgres", "use supabase CLI", "generate database types", or needs guidance on local Supabase development, Docker setup, environment configuration, or database migrations.
6ui interaction
This skill should be used when the user asks to "add client interactivity", "implement form validation", "add event handlers", "use client state", "add Zod validation", "implement React hooks", "add local state", "make component interactive", "add form with validation", "use React Hook Form", or needs guidance on client-side events, form handling, optimistic updates, or when to add "use client" directive.
4ui design
This skill should be used when the user asks to "create a component", "build static UI", "design with TypeScript", "use compound components", "implement contract-first UI", "create React component", "build with Shadcn", or mentions TypeScript interfaces for components, compound component patterns, or Server Components. Provides contract-first static UI methodology with compound components.
4ui integration
This skill should be used when the user asks to "add server action", "implement Supabase query", "connect to backend", "add database integration", "implement RLS", "use server actions", "add data mutation", "implement CRUD operations", "revalidate path", "add authentication check", or needs guidance on server-side integration, defense-in-depth security, or type-safe database queries with Supabase.
4issue management
Use this skill when the user wants to "create issue", "update issue", "add labels", "assign issue", "close issue", "link issues", or manage GitHub issue metadata. Provides comprehensive GitHub issue CRUD operations with intelligent context awareness.
3