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

0•

Developer Tools

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

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

01Provides a decision tree for optimal component placement based on complexity

02Identifies and prevents architectural anti-patterns like cross-layer leakage

03Offers patterns for complex real-time collaboration widgets

040 GitHub stars

05Enforces strict hierarchical import rules across architectural layers

06Standardizes Next.js App Router integration with FSD layers

Use Cases

01Scaffolding new frontend features with proper file organization and layer placement

02Refactoring legacy components from flat structures into domain-driven layers

03Performing architectural code reviews to ensure compliance with FSD principles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vinnizp/lingx target-fe-architecture

For use in Claude.ai and ChatGPT

Download Skill