@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-composition/metadata.json

@@ -1,13 +1,13 @@
-{
-  "version": "1.0.0",
-  "organization": "Mandu Framework",
-  "date": "February 2026",
-  "abstract": "Mandu 애플리케이션을 위한 React 컴포지션 패턴 가이드. Island 컴파운드 컴포넌트, state/actions/meta 인터페이스, Provider 패턴, useIslandEvent를 통한 Island 간 통신, slot-client 분리 패턴을 다룹니다. Vercel Composition Patterns 기반으로 Mandu 컨텍스트에 맞게 변환되었습니다.",
-  "references": [
-    "https://react.dev/learn/passing-data-deeply-with-context",
-    "https://react.dev/learn/scaling-up-with-reducer-and-context",
-    "https://www.patterns.dev/react/compound-pattern",
-    "https://kentcdodds.com/blog/compound-components-with-react-hooks"
-  ],
-  "tags": ["composition", "compound", "context", "state", "island", "mandu"]
-}
+{
+  "version": "1.0.0",
+  "organization": "Mandu Framework",
+  "date": "February 2026",
+  "abstract": "Mandu 애플리케이션을 위한 React 컴포지션 패턴 가이드. Island 컴파운드 컴포넌트, state/actions/meta 인터페이스, Provider 패턴, useIslandEvent를 통한 Island 간 통신, slot-client 분리 패턴을 다룹니다. Vercel Composition Patterns 기반으로 Mandu 컨텍스트에 맞게 변환되었습니다.",
+  "references": [
+    "https://react.dev/learn/passing-data-deeply-with-context",
+    "https://react.dev/learn/scaling-up-with-reducer-and-context",
+    "https://www.patterns.dev/react/compound-pattern",
+    "https://kentcdodds.com/blog/compound-components-with-react-hooks"
+  ],
+  "tags": ["composition", "compound", "context", "state", "island", "mandu"]
+}

package/src/resources/skills/mandu-composition/rules/_sections.md

@@ -1,26 +1,26 @@
-# Sections
-
-This file defines all sections, their ordering, impact levels, and descriptions.
-The section ID (in parentheses) is the filename prefix used to group rules.
-
----
-
-## 1. Component Architecture (comp-arch)
-
-**Impact:** HIGH
-**Description:** Boolean props 대신 컴포지션 사용, 컴파운드 컴포넌트 구조화. 코드베이스가 확장됨에 따라 유지보수성에 큰 영향을 미칩니다.
-
-## 2. State Management (comp-state)
-
-**Impact:** HIGH
-**Description:** state/actions/meta 인터페이스 정의, Provider를 통한 의존성 주입. 같은 UI를 다양한 상태 구현과 함께 재사용할 수 있게 합니다.
-
-## 3. Island Patterns (comp-island)
-
-**Impact:** MEDIUM
-**Description:** Mandu Island 특화 패턴. 컴파운드 Island, Island 간 이벤트 통신, slot-client 분리를 다룹니다.
-
-## 4. Implementation Patterns (comp-pattern)
-
-**Impact:** MEDIUM
-**Description:** children 활용, Provider 경계 이해 등 구현 세부 사항. 올바른 패턴 적용으로 유연성을 확보합니다.
+# Sections
+
+This file defines all sections, their ordering, impact levels, and descriptions.
+The section ID (in parentheses) is the filename prefix used to group rules.
+
+---
+
+## 1. Component Architecture (comp-arch)
+
+**Impact:** HIGH
+**Description:** Boolean props 대신 컴포지션 사용, 컴파운드 컴포넌트 구조화. 코드베이스가 확장됨에 따라 유지보수성에 큰 영향을 미칩니다.
+
+## 2. State Management (comp-state)
+
+**Impact:** HIGH
+**Description:** state/actions/meta 인터페이스 정의, Provider를 통한 의존성 주입. 같은 UI를 다양한 상태 구현과 함께 재사용할 수 있게 합니다.
+
+## 3. Island Patterns (comp-island)
+
+**Impact:** MEDIUM
+**Description:** Mandu Island 특화 패턴. 컴파운드 Island, Island 간 이벤트 통신, slot-client 분리를 다룹니다.
+
+## 4. Implementation Patterns (comp-pattern)
+
+**Impact:** MEDIUM
+**Description:** children 활용, Provider 경계 이해 등 구현 세부 사항. 올바른 패턴 적용으로 유연성을 확보합니다.

package/src/resources/skills/mandu-composition/rules/_template.md

@@ -1,77 +1,77 @@
-# Rule Template
-
-Use this template when creating new rules for mandu-composition.
-
----
-
-```markdown
----
-title: Rule Title Here
-impact: HIGH | MEDIUM | LOW
-impactDescription: 영향 설명 (예: "enables flexible composition")
-tags: composition, tag1, tag2
----
-
-## Rule Title Here
-
-**Impact: {LEVEL} ({impactDescription})**
-
-규칙의 목적과 아키텍처적 영향을 설명합니다.
-
-**Incorrect (문제가 되는 패턴):**
-
-\`\`\`tsx
-// ❌ Boolean props로 기능 추가
-function Composer({
-  showAttachments,
-  showFormatting,
-  showEmojis,
-  isCompact,
-  isReadOnly,
-}: Props) {
-  return (
-    <form>
-      {!isReadOnly && <Input />}
-      {showAttachments && <Attachments />}
-      {showFormatting && <Formatting />}
-      {showEmojis && <Emojis />}
-    </form>
-  );
-}
-```
-
-**Correct (컴포지션 패턴):**
-
-\`\`\`tsx
-// ✅ 컴포지션으로 유연하게 구성
-<Composer.Provider state={state} actions={actions}>
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Footer>
-      <Composer.Emojis />
-      <Composer.Submit />
-    </Composer.Footer>
-  </Composer.Frame>
-</Composer.Provider>
-\`\`\`
-
-## Mandu Context
-
-Mandu Island에서 이 패턴을 적용하는 방법을 설명합니다.
-
-Reference: [관련 문서 링크](https://example.com)
-```
-
----
-
-## Naming Convention
-
-- 파일명: `comp-{category}-{rule-name}.md`
-- 예시: `comp-arch-compound-components.md`, `comp-state-context-interface.md`
-
-## Core Principle
-
-**Lift state, compose internals, make state dependency-injectable.**
-
-UI는 조합 가능한 조각들이고, 상태는 Provider가 주입합니다.
-Provider를 바꾸면 UI는 그대로 유지됩니다.
+# Rule Template
+
+Use this template when creating new rules for mandu-composition.
+
+---
+
+```markdown
+---
+title: Rule Title Here
+impact: HIGH | MEDIUM | LOW
+impactDescription: 영향 설명 (예: "enables flexible composition")
+tags: composition, tag1, tag2
+---
+
+## Rule Title Here
+
+**Impact: {LEVEL} ({impactDescription})**
+
+규칙의 목적과 아키텍처적 영향을 설명합니다.
+
+**Incorrect (문제가 되는 패턴):**
+
+\`\`\`tsx
+// ❌ Boolean props로 기능 추가
+function Composer({
+  showAttachments,
+  showFormatting,
+  showEmojis,
+  isCompact,
+  isReadOnly,
+}: Props) {
+  return (
+    <form>
+      {!isReadOnly && <Input />}
+      {showAttachments && <Attachments />}
+      {showFormatting && <Formatting />}
+      {showEmojis && <Emojis />}
+    </form>
+  );
+}
+```
+
+**Correct (컴포지션 패턴):**
+
+\`\`\`tsx
+// ✅ 컴포지션으로 유연하게 구성
+<Composer.Provider state={state} actions={actions}>
+  <Composer.Frame>
+    <Composer.Input />
+    <Composer.Footer>
+      <Composer.Emojis />
+      <Composer.Submit />
+    </Composer.Footer>
+  </Composer.Frame>
+</Composer.Provider>
+\`\`\`
+
+## Mandu Context
+
+Mandu Island에서 이 패턴을 적용하는 방법을 설명합니다.
+
+Reference: [관련 문서 링크](https://example.com)
+```
+
+---
+
+## Naming Convention
+
+- 파일명: `comp-{category}-{rule-name}.md`
+- 예시: `comp-arch-compound-components.md`, `comp-state-context-interface.md`
+
+## Core Principle
+
+**Lift state, compose internals, make state dependency-injectable.**
+
+UI는 조합 가능한 조각들이고, 상태는 Provider가 주입합니다.
+Provider를 바꾸면 UI는 그대로 유지됩니다.

package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md

@@ -1,146 +1,146 @@
----
-title: Use Composition Instead of Boolean Props
-impact: HIGH
-impactDescription: Prevents prop explosion and improves flexibility
-tags: composition, boolean, props, architecture
----
-
-## Use Composition Instead of Boolean Props
-
-**Impact: HIGH (Prevents prop explosion and improves flexibility)**
-
-동작을 커스터마이즈하기 위해 boolean props를 추가하지 마세요. 대신 컴포지션을 사용하세요.
-
-**Incorrect (boolean props 폭발):**
-
-```tsx
-// ❌ Boolean props가 계속 늘어남
-function Card({
-  title,
-  children,
-  showHeader,
-  showFooter,
-  showActions,
-  isCompact,
-  isHighlighted,
-  isBordered,
-  isClickable,
-  isLoading,
-}: CardProps) {
-  return (
-    <div className={cn(
-      "card",
-      isCompact && "card--compact",
-      isHighlighted && "card--highlighted",
-      isBordered && "card--bordered",
-      isClickable && "card--clickable",
-    )}>
-      {isLoading && <Spinner />}
-      {showHeader && <Header>{title}</Header>}
-      {children}
-      {showFooter && <Footer />}
-      {showActions && <Actions />}
-    </div>
-  );
-}
-
-// 사용 시 복잡한 props 조합
-<Card
-  title="Settings"
-  showHeader
-  showFooter
-  showActions
-  isCompact
-  isBordered
-  isClickable={false}
-  isLoading={loading}
->
-  {content}
-</Card>
-```
-
-**Correct (컴포지션 패턴):**
-
-```tsx
-// ✅ 기본 Card와 조합 가능한 서브컴포넌트
-function Card({ children, className }: CardProps) {
-  return <div className={cn("card", className)}>{children}</div>;
-}
-
-function CardHeader({ children }: { children: React.ReactNode }) {
-  return <div className="card-header">{children}</div>;
-}
-
-function CardFooter({ children }: { children: React.ReactNode }) {
-  return <div className="card-footer">{children}</div>;
-}
-
-function CardActions({ children }: { children: React.ReactNode }) {
-  return <div className="card-actions">{children}</div>;
-}
-
-// Variants는 명시적 컴포넌트로
-function CompactCard({ children }: CardProps) {
-  return <Card className="card--compact">{children}</Card>;
-}
-
-function HighlightedCard({ children }: CardProps) {
-  return <Card className="card--highlighted">{children}</Card>;
-}
-
-// Export
-export { Card, CardHeader, CardFooter, CardActions, CompactCard, HighlightedCard };
-```
-
-**사용법:**
-
-```tsx
-// 필요한 것만 명시적으로 조합
-<Card>
-  <CardHeader>Settings</CardHeader>
-  <SettingsContent />
-  <CardFooter>
-    <CardActions>
-      <SaveButton />
-      <CancelButton />
-    </CardActions>
-  </CardFooter>
-</Card>
-
-// Compact variant
-<CompactCard>
-  <QuickStats />
-</CompactCard>
-```
-
-## Mandu Island에서의 적용
-
-```tsx
-// app/dashboard/client.tsx
-"use client";
-
-// ❌ 피해야 할 패턴
-export function DashboardIsland({
-  showCharts,
-  showStats,
-  showAlerts,
-  isCompact,
-}: Props) { ... }
-
-// ✅ 권장 패턴
-export const Dashboard = {
-  Provider: DashboardProvider,
-  Charts: DashboardCharts,
-  Stats: DashboardStats,
-  Alerts: DashboardAlerts,
-  CompactLayout: DashboardCompactLayout,
-};
-```
-
-## 언제 Boolean Props가 괜찮은가?
-
-- 단일 시각적 상태 (disabled, loading)
-- 토글 가능한 단일 기능 (checked, open)
-- 컴포지션이 과도한 경우의 간단한 변형
-
-Reference: [Avoid Boolean Props](https://spicefactory.co/blog/2019/03/26/how-to-avoid-the-boolean-trap-when-designing-react-components/)
+---
+title: Use Composition Instead of Boolean Props
+impact: HIGH
+impactDescription: Prevents prop explosion and improves flexibility
+tags: composition, boolean, props, architecture
+---
+
+## Use Composition Instead of Boolean Props
+
+**Impact: HIGH (Prevents prop explosion and improves flexibility)**
+
+동작을 커스터마이즈하기 위해 boolean props를 추가하지 마세요. 대신 컴포지션을 사용하세요.
+
+**Incorrect (boolean props 폭발):**
+
+```tsx
+// ❌ Boolean props가 계속 늘어남
+function Card({
+  title,
+  children,
+  showHeader,
+  showFooter,
+  showActions,
+  isCompact,
+  isHighlighted,
+  isBordered,
+  isClickable,
+  isLoading,
+}: CardProps) {
+  return (
+    <div className={cn(
+      "card",
+      isCompact && "card--compact",
+      isHighlighted && "card--highlighted",
+      isBordered && "card--bordered",
+      isClickable && "card--clickable",
+    )}>
+      {isLoading && <Spinner />}
+      {showHeader && <Header>{title}</Header>}
+      {children}
+      {showFooter && <Footer />}
+      {showActions && <Actions />}
+    </div>
+  );
+}
+
+// 사용 시 복잡한 props 조합
+<Card
+  title="Settings"
+  showHeader
+  showFooter
+  showActions
+  isCompact
+  isBordered
+  isClickable={false}
+  isLoading={loading}
+>
+  {content}
+</Card>
+```
+
+**Correct (컴포지션 패턴):**
+
+```tsx
+// ✅ 기본 Card와 조합 가능한 서브컴포넌트
+function Card({ children, className }: CardProps) {
+  return <div className={cn("card", className)}>{children}</div>;
+}
+
+function CardHeader({ children }: { children: React.ReactNode }) {
+  return <div className="card-header">{children}</div>;
+}
+
+function CardFooter({ children }: { children: React.ReactNode }) {
+  return <div className="card-footer">{children}</div>;
+}
+
+function CardActions({ children }: { children: React.ReactNode }) {
+  return <div className="card-actions">{children}</div>;
+}
+
+// Variants는 명시적 컴포넌트로
+function CompactCard({ children }: CardProps) {
+  return <Card className="card--compact">{children}</Card>;
+}
+
+function HighlightedCard({ children }: CardProps) {
+  return <Card className="card--highlighted">{children}</Card>;
+}
+
+// Export
+export { Card, CardHeader, CardFooter, CardActions, CompactCard, HighlightedCard };
+```
+
+**사용법:**
+
+```tsx
+// 필요한 것만 명시적으로 조합
+<Card>
+  <CardHeader>Settings</CardHeader>
+  <SettingsContent />
+  <CardFooter>
+    <CardActions>
+      <SaveButton />
+      <CancelButton />
+    </CardActions>
+  </CardFooter>
+</Card>
+
+// Compact variant
+<CompactCard>
+  <QuickStats />
+</CompactCard>
+```
+
+## Mandu Island에서의 적용
+
+```tsx
+// app/dashboard/client.tsx
+"use client";
+
+// ❌ 피해야 할 패턴
+export function DashboardIsland({
+  showCharts,
+  showStats,
+  showAlerts,
+  isCompact,
+}: Props) { ... }
+
+// ✅ 권장 패턴
+export const Dashboard = {
+  Provider: DashboardProvider,
+  Charts: DashboardCharts,
+  Stats: DashboardStats,
+  Alerts: DashboardAlerts,
+  CompactLayout: DashboardCompactLayout,
+};
+```
+
+## 언제 Boolean Props가 괜찮은가?
+
+- 단일 시각적 상태 (disabled, loading)
+- 토글 가능한 단일 기능 (checked, open)
+- 컴포지션이 과도한 경우의 간단한 변형
+
+Reference: [Avoid Boolean Props](https://spicefactory.co/blog/2019/03/26/how-to-avoid-the-boolean-trap-when-designing-react-components/)