What is the Progressive FSD Hybrid approach?

It is an architectural strategy that starts with simple Next.js App Router conventions and introduces Feature-Sliced Design layers (Shared, Entities, Features, Widgets) only as the complexity of the UI or logic grows.

How does this skill prevent feature coupling?

By enforcing a strict unidirectional import rule where lower layers (like 'shared' or 'entities') are never allowed to import from higher layers (like 'features' or 'widgets').

Can this skill help with React Server Components?

Yes, it includes specific patterns for keeping App Router pages thin and utilizing Server Components for data fetching while composing client-side FSD components.

When should I move a component from a page folder to an FSD layer?

The skill provides a decision tree suggesting migration when a component is used across multiple pages, reaches a certain internal state complexity, or involves specific user actions with side effects.

Lingx Progressive FSD Architect

Name: Lingx Progressive FSD Architect
Author: VinniZP

byVinniZP

Developer Tools

Implements a scalable frontend architecture combining Next.js App Router with Feature-Sliced Design (FSD) principles.

About

The target-fe-architecture skill equips Claude with the specific architectural blueprints for the Lingx project, utilizing a 'Progressive FSD Hybrid' approach. This methodology balances the simplicity of the Next.js App Router with the rigorous organization of Feature-Sliced Design as complexity grows. It enforces a strict layer hierarchy—Shared, Entities, Features, and Widgets—to prevent component coupling and circular dependencies. This skill is ideal for developers building large-scale React applications who need to maintain clear boundaries between business logic and UI primitives while leveraging modern Server Component patterns.

Key Features

Provides a decision tree for optimal component placement based on complexity
Identifies and prevents architectural anti-patterns like cross-layer leakage
Offers patterns for complex real-time collaboration widgets
0 GitHub stars
Enforces strict hierarchical import rules across architectural layers
Standardizes Next.js App Router integration with FSD layers

Use Cases

Scaffolding new frontend features with proper file organization and layer placement
Refactoring legacy components from flat structures into domain-driven layers
Performing architectural code reviews to ensure compliance with FSD principles

About

Key Features

Provides a decision tree for optimal component placement based on complexity
Identifies and prevents architectural anti-patterns like cross-layer leakage
Offers patterns for complex real-time collaboration widgets
0 GitHub stars
Enforces strict hierarchical import rules across architectural layers
Standardizes Next.js App Router integration with FSD layers

Use Cases

Scaffolding new frontend features with proper file organization and layer placement
Refactoring legacy components from flat structures into domain-driven layers
Performing architectural code reviews to ensure compliance with FSD principles