skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

feature-arch

Enforce feature-based React architecture with unidirectional dependency flow and public API boundaries.

Updated Mar 26, 2026
Search Tags:#code review#state management#react#data fetching#module boundaries#import rules#feature architecture
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill feature-arch-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feature-arch
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/feature-arch
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill feature-arch-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you prevent tightly coupled React code by enforcing feature-based architecture, so teams can refactor and scale without breaking unrelated areas.

Core Features & Use Cases

  • Feature isolation guidance: Keep each feature self-contained so it can evolve independently and be deployed safely.
  • Safe dependency rules: Enforce shared → features → app, prevent cross-feature imports, and require exports only through each feature’s public API.
  • Architecture-aware implementation patterns: Apply best practices for component structure, server vs client state separation, query-key scoping, and event-based communication.
  • Use case examples: Use it when reorganizing a project’s src/ structure, reviewing PRs for boundary violations, or standardizing how features fetch data and compose UI.

Quick Start

Use the feature-arch skill to review your React feature folder layout and imports for violations of feature isolation, unidirectional flow, and public API boundaries.

Frequently Asked Questions about feature-arch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce feature-based architecture in React to prevent module coupling?▼

Feature-based architecture in React isolates modules by enforcing unidirectional dependency flow from shared to features to app, preventing cross-feature imports and requiring exports exclusively through each feature's public API boundaries.

What is the best way to review React feature folder layouts for boundary violations?▼

The best way to review React feature folder layouts is checking imports against unidirectional dependency rules, verifying no cross-feature coupling exists, and ensuring all feature interactions pass through designated public API exports.

How do I separate server and client state when organizing React feature modules?▼

Separating server and client state in React feature modules requires applying consistent query-key scoping for data fetching and isolating client state patterns within feature boundaries to maintain independent module evolution.

Can I use feature-arch for standardizing data fetching patterns across React features?▼

Yes, you can use feature-arch to standardize data fetching patterns across React features by applying architecture-aware implementation rules for query-key scoping, component structure composition, and consistent state management within isolated feature boundaries.

When should I restructure my React project's src directory using feature boundaries?▼

You should restructure your React project's src directory using feature boundaries when refactoring tightly coupled code, scaling features independently, or standardizing UI composition and data fetching patterns to prevent breaking unrelated areas.

Related Skills

Explore More Software Engineering Skills→
raphaelmansraphaelmans

improve-codebase-architecture

Analyze codebases to surface architectural friction and generate deepening RFCs.

Community
Advanced
minami110minami110
21

GDScript File Manager

Move, rename, or delete GDScript files with their .uid files.

Community
Basic
ThomashighbaughThomashighbaugh
1

project-structure

Organize React/Next.js/TypeScript codebases into feature folders under src.

Community
Intermediate
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

architecture-patterns

Implement Clean Architecture, Hexagonal Architecture, and Domain-Driven Design for backend systems.

Official
Intermediate