Mandu Composition

Mandu 애플리케이션을 위한 React 컴포지션 패턴 가이드. Island 컴파운드 컴포넌트, 상태 관리 인터페이스, Provider 패턴, slot-client 분리를 다룹니다. Vercel의 Composition Patterns를 Mandu 컨텍스트로 변환하여 적용합니다.

Agent Workflow Contract

This skill is a Domain addendum. It must not replace mandu-agent-workflow. Use it only after mandu.agent.plan selects composition, UI, hydration, slot, or component domains.

Canonical workflow step: plan -> apply -> verify.

Preferred MCP tools:

Step	Tools
plan	mandu.agent.plan, mandu.design.get, mandu.island.list
apply	mandu.agent.apply
verify	mandu.agent.verify, mandu.design.check, mandu.slot.validate
repair	mandu.agent.repair

Allowed file edits:

• Island/client component files named in the plan
• Provider/state modules scoped to the target feature
• Slot-client boundaries only when the plan includes slot or hydration domains

Verification command:

mandu agent verify --changed --json --write

Common failures:

• Refactoring component APIs without checking island/client boundaries
• Adding shared state providers broader than the planned feature
• Mixing slot server logic into client composition files

Repair path:

mandu agent repair --from .mandu/agent-verify.json --json

When to Apply

Reference these guidelines when:

• Designing Island component architecture
• Managing shared state between Islands
• Building reusable component APIs
• Refactoring components with boolean prop proliferation
• Working with compound components or context providers

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Component Architecture	HIGH	comp-arch-
2	State Management	HIGH	comp-state-
3	Island Patterns	MEDIUM	comp-island-
4	Implementation Patterns	MEDIUM	comp-pattern-

Quick Reference

1. Component Architecture (HIGH)

• comp-arch-avoid-boolean-props - Use composition instead of boolean customization
• comp-arch-compound-components - Structure Islands as compound components
• comp-arch-explicit-variants - Create explicit variant components

2. State Management (HIGH)

• comp-state-context-interface - Define generic state/actions/meta interface
• comp-state-lift-state - Move state into provider for sibling access
• comp-state-decouple-impl - Provider is the only place knowing implementation

3. Island Patterns (MEDIUM)

• comp-island-compound - Compose Islands with shared context
• comp-island-event - Communicate between Islands with useIslandEvent
• comp-island-slot-split - Separate server logic (slot) from client (Island)

4. Implementation Patterns (MEDIUM)

• comp-pattern-children - Use children for composition over render props
• comp-pattern-provider-boundary - Understand provider boundary vs visual nesting

Core Principle

Lift state, compose internals, make state dependency-injectable.

┌─────────────────────────────────────────┐
│  Provider (state + actions + meta)      │
│  ┌───────────────────────────────────┐  │
│  │  Composer.Frame                   │  │
│  │  ┌─────────┐ ┌─────────────────┐  │  │
│  │  │ Input   │ │ Footer          │  │  │
│  │  └─────────┘ │ ┌─────┐ ┌─────┐ │  │  │
│  │              │ │Emoji│ │Send │ │  │  │
│  │              │ └─────┘ └─────┘ │  │  │
│  │              └─────────────────┘  │  │
│  └───────────────────────────────────┘  │
│  ┌───────────────┐  ← Outside Frame     │
│  │ Preview       │     but inside       │
│  └───────────────┘     Provider!        │
└─────────────────────────────────────────┘

How to Use

Read individual rule files for detailed explanations:

rules/comp-arch-compound-components.md
rules/comp-state-context-interface.md
rules/comp-island-event.md