@mandujs/mcp 0.36.2 → 0.37.0

package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md

@@ -1,149 +1,149 @@
----
-title: Use Children for Composition Over Render Props
-impact: MEDIUM
-impactDescription: Simpler API, better composition
-tags: composition, children, render-props, pattern
----
-
-## Use Children for Composition Over Render Props
-
-**Impact: MEDIUM (Simpler API, better composition)**
-
-`renderX` props 대신 `children`을 사용하여 컴포지션하세요. 더 선언적이고 유연합니다.
-
-**Incorrect (render props):**
-
-```tsx
-// ❌ renderX props 패턴
-function Modal({
-  renderHeader,
-  renderBody,
-  renderFooter,
-  renderCloseButton,
-}: ModalProps) {
-  return (
-    <div className="modal">
-      <div className="modal-header">
-        {renderCloseButton?.()}
-        {renderHeader?.()}
-      </div>
-      <div className="modal-body">
-        {renderBody?.()}
-      </div>
-      <div className="modal-footer">
-        {renderFooter?.()}
-      </div>
-    </div>
-  );
-}
-
-// 사용 시 복잡함
-<Modal
-  renderHeader={() => <h2>Title</h2>}
-  renderBody={() => <p>Content</p>}
-  renderFooter={() => (
-    <>
-      <Button>Cancel</Button>
-      <Button>Save</Button>
-    </>
-  )}
-  renderCloseButton={() => <CloseButton />}
-/>
-```
-
-**Correct (children + compound):**
-
-```tsx
-// ✅ children과 컴파운드 패턴
-function Modal({ children }: { children: React.ReactNode }) {
-  return <div className="modal">{children}</div>;
-}
-
-function ModalHeader({ children }: { children: React.ReactNode }) {
-  return <div className="modal-header">{children}</div>;
-}
-
-function ModalBody({ children }: { children: React.ReactNode }) {
-  return <div className="modal-body">{children}</div>;
-}
-
-function ModalFooter({ children }: { children: React.ReactNode }) {
-  return <div className="modal-footer">{children}</div>;
-}
-
-function ModalClose({ onClose }: { onClose: () => void }) {
-  return <button onClick={onClose} className="modal-close">×</button>;
-}
-
-export { Modal, ModalHeader, ModalBody, ModalFooter, ModalClose };
-```
-
-**사용:**
-
-```tsx
-// 선언적이고 명확함
-<Modal>
-  <ModalHeader>
-    <ModalClose onClose={handleClose} />
-    <h2>Title</h2>
-  </ModalHeader>
-
-  <ModalBody>
-    <p>Content goes here</p>
-  </ModalBody>
-
-  <ModalFooter>
-    <Button onClick={handleClose}>Cancel</Button>
-    <Button onClick={handleSave}>Save</Button>
-  </ModalFooter>
-</Modal>
-```
-
-## 장점
-
-| render props | children |
-|--------------|----------|
-| 숨겨진 구조 | 명시적 구조 |
-| 함수 호출 문법 | JSX 문법 |
-| 순서가 props에 의존 | 순서를 소비자가 제어 |
-| 어떤 props가 있는지 봐야 함 | 자동완성 지원 |
-
-## Mandu Island에서의 적용
-
-```tsx
-// ❌ 피해야 할 패턴
-<FormIsland
-  renderInput={(value, onChange) => <Input value={value} onChange={onChange} />}
-  renderSubmit={(onSubmit) => <Button onClick={onSubmit}>Submit</Button>}
-  renderError={(error) => <ErrorMessage error={error} />}
-/>
-
-// ✅ 권장 패턴
-<Form.Provider>
-  <Form.Frame>
-    <Form.Input name="email" />
-    <Form.Input name="password" type="password" />
-    <Form.Error />
-    <Form.Submit>Sign In</Form.Submit>
-  </Form.Frame>
-</Form.Provider>
-```
-
-## 언제 Render Props를 사용하나?
-
-render props가 여전히 유용한 경우:
-- 부모가 데이터를 제공하고 자식이 렌더링 방법을 결정 (예: virtualized list)
-- 자식에게 상태를 노출해야 하는 headless 컴포넌트
-
-```tsx
-// Render props가 적합한 예: Virtualized List
-<VirtualList
-  items={items}
-  itemHeight={50}
-  renderItem={(item, index) => (
-    <div key={item.id}>{item.name}</div>
-  )}
-/>
-```
-
-Reference: [Compound Components](https://kentcdodds.com/blog/compound-components-with-react-hooks)
+---
+title: Use Children for Composition Over Render Props
+impact: MEDIUM
+impactDescription: Simpler API, better composition
+tags: composition, children, render-props, pattern
+---
+
+## Use Children for Composition Over Render Props
+
+**Impact: MEDIUM (Simpler API, better composition)**
+
+`renderX` props 대신 `children`을 사용하여 컴포지션하세요. 더 선언적이고 유연합니다.
+
+**Incorrect (render props):**
+
+```tsx
+// ❌ renderX props 패턴
+function Modal({
+  renderHeader,
+  renderBody,
+  renderFooter,
+  renderCloseButton,
+}: ModalProps) {
+  return (
+    <div className="modal">
+      <div className="modal-header">
+        {renderCloseButton?.()}
+        {renderHeader?.()}
+      </div>
+      <div className="modal-body">
+        {renderBody?.()}
+      </div>
+      <div className="modal-footer">
+        {renderFooter?.()}
+      </div>
+    </div>
+  );
+}
+
+// 사용 시 복잡함
+<Modal
+  renderHeader={() => <h2>Title</h2>}
+  renderBody={() => <p>Content</p>}
+  renderFooter={() => (
+    <>
+      <Button>Cancel</Button>
+      <Button>Save</Button>
+    </>
+  )}
+  renderCloseButton={() => <CloseButton />}
+/>
+```
+
+**Correct (children + compound):**
+
+```tsx
+// ✅ children과 컴파운드 패턴
+function Modal({ children }: { children: React.ReactNode }) {
+  return <div className="modal">{children}</div>;
+}
+
+function ModalHeader({ children }: { children: React.ReactNode }) {
+  return <div className="modal-header">{children}</div>;
+}
+
+function ModalBody({ children }: { children: React.ReactNode }) {
+  return <div className="modal-body">{children}</div>;
+}
+
+function ModalFooter({ children }: { children: React.ReactNode }) {
+  return <div className="modal-footer">{children}</div>;
+}
+
+function ModalClose({ onClose }: { onClose: () => void }) {
+  return <button onClick={onClose} className="modal-close">×</button>;
+}
+
+export { Modal, ModalHeader, ModalBody, ModalFooter, ModalClose };
+```
+
+**사용:**
+
+```tsx
+// 선언적이고 명확함
+<Modal>
+  <ModalHeader>
+    <ModalClose onClose={handleClose} />
+    <h2>Title</h2>
+  </ModalHeader>
+
+  <ModalBody>
+    <p>Content goes here</p>
+  </ModalBody>
+
+  <ModalFooter>
+    <Button onClick={handleClose}>Cancel</Button>
+    <Button onClick={handleSave}>Save</Button>
+  </ModalFooter>
+</Modal>
+```
+
+## 장점
+
+| render props | children |
+|--------------|----------|
+| 숨겨진 구조 | 명시적 구조 |
+| 함수 호출 문법 | JSX 문법 |
+| 순서가 props에 의존 | 순서를 소비자가 제어 |
+| 어떤 props가 있는지 봐야 함 | 자동완성 지원 |
+
+## Mandu Island에서의 적용
+
+```tsx
+// ❌ 피해야 할 패턴
+<FormIsland
+  renderInput={(value, onChange) => <Input value={value} onChange={onChange} />}
+  renderSubmit={(onSubmit) => <Button onClick={onSubmit}>Submit</Button>}
+  renderError={(error) => <ErrorMessage error={error} />}
+/>
+
+// ✅ 권장 패턴
+<Form.Provider>
+  <Form.Frame>
+    <Form.Input name="email" />
+    <Form.Input name="password" type="password" />
+    <Form.Error />
+    <Form.Submit>Sign In</Form.Submit>
+  </Form.Frame>
+</Form.Provider>
+```
+
+## 언제 Render Props를 사용하나?
+
+render props가 여전히 유용한 경우:
+- 부모가 데이터를 제공하고 자식이 렌더링 방법을 결정 (예: virtualized list)
+- 자식에게 상태를 노출해야 하는 headless 컴포넌트
+
+```tsx
+// Render props가 적합한 예: Virtualized List
+<VirtualList
+  items={items}
+  itemHeight={50}
+  renderItem={(item, index) => (
+    <div key={item.id}>{item.name}</div>
+  )}
+/>
+```
+
+Reference: [Compound Components](https://kentcdodds.com/blog/compound-components-with-react-hooks)

package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md

@@ -1,148 +1,148 @@
----
-title: Define Generic Context Interface for Dependency Injection
-impact: HIGH
-impactDescription: Enables dependency-injectable state across use-cases
-tags: composition, context, state, typescript, dependency-injection
----
-
-## Define Generic Context Interface for Dependency Injection
-
-**Impact: HIGH (Enables dependency-injectable state across use-cases)**
-
-컴포넌트 context를 위한 제네릭 인터페이스를 `state`, `actions`, `meta` 세 부분으로 정의하세요. 어떤 Provider든 이 인터페이스를 구현할 수 있어, 같은 UI 컴포넌트가 완전히 다른 상태 구현과 작동할 수 있습니다.
-
-**핵심 원칙:** Lift state, compose internals, make state dependency-injectable.
-
-**Incorrect (특정 상태 구현에 결합):**
-
-```tsx
-// ❌ 특정 훅에 강하게 결합
-function ComposerInput() {
-  const { input, setInput } = useChannelComposerState();
-  return <TextInput value={input} onChangeText={setInput} />;
-}
-```
-
-**Correct (제네릭 인터페이스로 의존성 주입):**
-
-```tsx
-// ✅ 어떤 Provider든 구현할 수 있는 제네릭 인터페이스
-interface ComposerState {
-  input: string;
-  attachments: Attachment[];
-  isSubmitting: boolean;
-}
-
-interface ComposerActions {
-  update: (updater: (state: ComposerState) => ComposerState) => void;
-  submit: () => void;
-  addAttachment: (file: File) => void;
-}
-
-interface ComposerMeta {
-  inputRef: React.RefObject<HTMLTextAreaElement>;
-  maxLength?: number;
-}
-
-interface ComposerContextValue {
-  state: ComposerState;
-  actions: ComposerActions;
-  meta: ComposerMeta;
-}
-
-const ComposerContext = createContext<ComposerContextValue | null>(null);
-```
-
-**UI 컴포넌트는 인터페이스만 소비:**
-
-```tsx
-function ComposerInput() {
-  const {
-    state,
-    actions: { update },
-    meta,
-  } = use(ComposerContext)!;
-
-  // 이 컴포넌트는 인터페이스를 구현한 어떤 Provider와도 작동
-  return (
-    <textarea
-      ref={meta.inputRef}
-      value={state.input}
-      maxLength={meta.maxLength}
-      onChange={(e) => update((s) => ({ ...s, input: e.target.value }))}
-    />
-  );
-}
-```
-
-**서로 다른 Provider가 같은 인터페이스 구현:**
-
-```tsx
-// Provider A: 임시 폼을 위한 로컬 상태
-function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const submit = useForwardMessage();
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update: setState, submit, addAttachment: ... },
-      meta: { inputRef },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-
-// Provider B: 채널을 위한 전역 동기화 상태
-function ChannelProvider({ channelId, children }: Props) {
-  const { state, update, submit } = useGlobalChannel(channelId);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update, submit, addAttachment: ... },
-      meta: { inputRef, maxLength: 2000 },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-```
-
-**같은 UI가 두 Provider와 모두 작동:**
-
-```tsx
-// ForwardMessageProvider와 작동 (로컬 상태)
-<ForwardMessageProvider>
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ForwardMessageProvider>
-
-// ChannelProvider와 작동 (전역 동기화 상태)
-<ChannelProvider channelId="abc">
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ChannelProvider>
-```
-
-## Mandu Island에서의 활용
-
-```tsx
-// Island 컴포넌트는 인터페이스만 알면 됨
-// slot에서 어떤 Provider를 사용하든 같은 Island 재사용 가능
-
-// spec/slots/forward.slot.ts → ForwardMessageProvider 사용
-// spec/slots/channel.slot.ts → ChannelProvider 사용
-// 둘 다 같은 Composer Island 컴포넌트 사용
-```
-
-UI는 재사용 가능한 조각들이고, 상태는 Provider가 주입합니다. Provider를 바꾸면 UI는 그대로!
-
-Reference: [Context Interface Pattern](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
+---
+title: Define Generic Context Interface for Dependency Injection
+impact: HIGH
+impactDescription: Enables dependency-injectable state across use-cases
+tags: composition, context, state, typescript, dependency-injection
+---
+
+## Define Generic Context Interface for Dependency Injection
+
+**Impact: HIGH (Enables dependency-injectable state across use-cases)**
+
+컴포넌트 context를 위한 제네릭 인터페이스를 `state`, `actions`, `meta` 세 부분으로 정의하세요. 어떤 Provider든 이 인터페이스를 구현할 수 있어, 같은 UI 컴포넌트가 완전히 다른 상태 구현과 작동할 수 있습니다.
+
+**핵심 원칙:** Lift state, compose internals, make state dependency-injectable.
+
+**Incorrect (특정 상태 구현에 결합):**
+
+```tsx
+// ❌ 특정 훅에 강하게 결합
+function ComposerInput() {
+  const { input, setInput } = useChannelComposerState();
+  return <TextInput value={input} onChangeText={setInput} />;
+}
+```
+
+**Correct (제네릭 인터페이스로 의존성 주입):**
+
+```tsx
+// ✅ 어떤 Provider든 구현할 수 있는 제네릭 인터페이스
+interface ComposerState {
+  input: string;
+  attachments: Attachment[];
+  isSubmitting: boolean;
+}
+
+interface ComposerActions {
+  update: (updater: (state: ComposerState) => ComposerState) => void;
+  submit: () => void;
+  addAttachment: (file: File) => void;
+}
+
+interface ComposerMeta {
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  maxLength?: number;
+}
+
+interface ComposerContextValue {
+  state: ComposerState;
+  actions: ComposerActions;
+  meta: ComposerMeta;
+}
+
+const ComposerContext = createContext<ComposerContextValue | null>(null);
+```
+
+**UI 컴포넌트는 인터페이스만 소비:**
+
+```tsx
+function ComposerInput() {
+  const {
+    state,
+    actions: { update },
+    meta,
+  } = use(ComposerContext)!;
+
+  // 이 컴포넌트는 인터페이스를 구현한 어떤 Provider와도 작동
+  return (
+    <textarea
+      ref={meta.inputRef}
+      value={state.input}
+      maxLength={meta.maxLength}
+      onChange={(e) => update((s) => ({ ...s, input: e.target.value }))}
+    />
+  );
+}
+```
+
+**서로 다른 Provider가 같은 인터페이스 구현:**
+
+```tsx
+// Provider A: 임시 폼을 위한 로컬 상태
+function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState(initialState);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const submit = useForwardMessage();
+
+  return (
+    <ComposerContext value={{
+      state,
+      actions: { update: setState, submit, addAttachment: ... },
+      meta: { inputRef },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+
+// Provider B: 채널을 위한 전역 동기화 상태
+function ChannelProvider({ channelId, children }: Props) {
+  const { state, update, submit } = useGlobalChannel(channelId);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  return (
+    <ComposerContext value={{
+      state,
+      actions: { update, submit, addAttachment: ... },
+      meta: { inputRef, maxLength: 2000 },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+```
+
+**같은 UI가 두 Provider와 모두 작동:**
+
+```tsx
+// ForwardMessageProvider와 작동 (로컬 상태)
+<ForwardMessageProvider>
+  <Composer.Frame>
+    <Composer.Input />
+    <Composer.Submit />
+  </Composer.Frame>
+</ForwardMessageProvider>
+
+// ChannelProvider와 작동 (전역 동기화 상태)
+<ChannelProvider channelId="abc">
+  <Composer.Frame>
+    <Composer.Input />
+    <Composer.Submit />
+  </Composer.Frame>
+</ChannelProvider>
+```
+
+## Mandu Island에서의 활용
+
+```tsx
+// Island 컴포넌트는 인터페이스만 알면 됨
+// slot에서 어떤 Provider를 사용하든 같은 Island 재사용 가능
+
+// spec/slots/forward.slot.ts → ForwardMessageProvider 사용
+// spec/slots/channel.slot.ts → ChannelProvider 사용
+// 둘 다 같은 Composer Island 컴포넌트 사용
+```
+
+UI는 재사용 가능한 조각들이고, 상태는 Provider가 주입합니다. Provider를 바꾸면 UI는 그대로!
+
+Reference: [Context Interface Pattern](https://kentcdodds.com/blog/how-to-use-react-context-effectively)