client-component-architecture

Name: client-component-architecture
Availability: InStock
Author: JuChan

Enforce a three-tier React component architecture with Page, Feature, and Hook layers.

Updated Aug 27, 2026

Search Tags:#architecture #frontend #react #components #hooks #guidelines #code-review

Ready to run

npx skills add https://github.com/juchanhwang/missionary --skill client-component-architecture

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: client-component-architecture
Source: https://github.com/juchanhwang/missionary/tree/main/.claude/skills/client-component-architecture
Command: npx skills add https://github.com/juchanhwang/missionary --skill client-component-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React 애플리케이션의 UI를 페이지-레이아웃 셸(Page, Compositor), 자기 완결적 Feature 컴포넌트, 로직 추상화 계층인 Hook으로 구성하는 3계층 아키텍처를 강제하고 가이드합니다. 이 구조를 통해 설계 일관성, 코드 리뷰 효율성, 재사용성을 높이고 신규 팀원이 빠르게 온보드되도록 돕습니다.

Core Features & Use Cases

Page는 Compositor 역할을 맡아 레이아웃과 비동기 경계만 담당하고, 데이터 패칭이나 비즈니스 로직은 피합니다.
Feature Component는 자체 Hook으로 데이터와 상태를 소유하여 독립적으로 테스트·이동·삭제가 가능합니다.
Hook Layer는 데이터 패칭(useGet*), UI 상태(use*) 및 사이드 이펙트(use*Action)로 역할별로 분리됩니다.
Use Case: 새로운 페이지를 도입할 때 Page-일관성 유지, 각 Feature의 재사용성, 팀 간 협업 효율을 확보합니다.

Quick Start

Adopt the three-tier React architecture by designating a Page as the Compositor, self-contained Feature components, and a Hook layer for logic.

Frequently Asked Questions about client-component-architecture

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

FAQPage Schema

How do I structure React components to separate business logic from UI layout?▼

Use a three-tier React component architecture where Page acts as a Compositor for layout and async boundaries, Feature components own their UI state, and Hook layers isolate data fetching and side effects. This ensures clear separation of concerns.

What is the best way to organize React hooks for data fetching and state management?▼

Organize React hooks by splitting roles into useGet* for data fetching, use* for UI state, and use*Action for side effects. This dedicated hook layer isolates logic and ensures predictable UI development.

How do I enforce consistent React architecture during code reviews?▼

Enforce React architecture during code reviews by verifying Page components avoid business logic, Feature components are self-contained and testable, and hooks follow the useGet*, use*, and use*Action role conventions.

Why should a React Page component avoid data fetching and business logic?▼

A React Page component should avoid business logic because it serves strictly as a Compositor for layout and asynchronous boundaries. Delegating logic to Feature components and Hooks maintains design consistency and improves code reusability.

Does the three-tier React component architecture work for large scalable applications?▼

Yes, the three-tier React component architecture supports large scalable applications by isolating self-contained Feature components and separating Hook roles. This structure maintains team collaboration, testability, and predictable UI development at scale.