mandu-composition

Files (11)

• SKILL.md
• metadata.json
• _sections.md · rules/
• _template.md · rules/
• comp-arch-avoid-boolean-props.md · rules/
• comp-arch-compound-components.md · rules/
• comp-island-event.md · rules/
• comp-island-slot-split.md · rules/
• comp-pattern-children.md · rules/
• comp-state-context-interface.md · rules/
• comp-state-lift-state.md · rules/

SKILL.md (first lines)

# 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:

```bash
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:

```bash
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
```

From konamgil/mandu, MIT.

More from konamgil/mandu