@mandujs/mcp 0.12.2 → 0.13.0

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

@@ -1,72 +1,72 @@
-# Rule Template
-
-Use this template when creating new rules for mandu-hydration.
-
----
-
-```markdown
----
-title: Rule Title Here
-impact: CRITICAL | HIGH | MEDIUM | LOW
-impactDescription: 영향 설명
-tags: hydration, tag1, tag2
----
-
-## Rule Title Here
-
-**Impact: {LEVEL} ({impactDescription})**
-
-규칙의 목적과 중요성을 설명합니다.
-
-**Incorrect (문제점 설명):**
-
-\`\`\`tsx
-// 잘못된 예시
-import { useState } from "react";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);  // ❌ "use client" 없음
-  return <button>{count}</button>;
-}
-\`\`\`
-
-**Correct (올바른 방법):**
-
-\`\`\`tsx
-// 올바른 예시
-"use client";
-
-import { useState } from "react";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);  // ✅ 작동함
-  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
-}
-\`\`\`
-
-Reference: [관련 문서 링크](https://example.com)
-```
-
----
-
-## Naming Convention
-
-- 파일명: `{section}-{rule-name}.md`
-- 예시: `hydration-directive-use-client.md`, `hydration-island-setup.md`
-
-## Hydration Strategies Quick Reference
-
-| Strategy | JavaScript | Use Case |
-|----------|------------|----------|
-| `none` | 없음 | 순수 정적 페이지 |
-| `island` | 부분 | 정적 + 인터랙티브 혼합 (기본값) |
-| `full` | 전체 | SPA 스타일 페이지 |
-
-## Priority Quick Reference
-
-| Priority | Load Time | Use Case |
-|----------|-----------|----------|
-| `immediate` | 페이지 로드 | 중요한 인터랙션 |
-| `visible` | 뷰포트 진입 | 스크롤 아래 콘텐츠 (기본값) |
-| `idle` | 브라우저 유휴 | 비중요 기능 |
-| `interaction` | 사용자 액션 | 클릭해야 활성화 |
+# Rule Template
+
+Use this template when creating new rules for mandu-hydration.
+
+---
+
+```markdown
+---
+title: Rule Title Here
+impact: CRITICAL | HIGH | MEDIUM | LOW
+impactDescription: 영향 설명
+tags: hydration, tag1, tag2
+---
+
+## Rule Title Here
+
+**Impact: {LEVEL} ({impactDescription})**
+
+규칙의 목적과 중요성을 설명합니다.
+
+**Incorrect (문제점 설명):**
+
+\`\`\`tsx
+// 잘못된 예시
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);  // ❌ "use client" 없음
+  return <button>{count}</button>;
+}
+\`\`\`
+
+**Correct (올바른 방법):**
+
+\`\`\`tsx
+// 올바른 예시
+"use client";
+
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);  // ✅ 작동함
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+}
+\`\`\`
+
+Reference: [관련 문서 링크](https://example.com)
+```
+
+---
+
+## Naming Convention
+
+- 파일명: `{section}-{rule-name}.md`
+- 예시: `hydration-directive-use-client.md`, `hydration-island-setup.md`
+
+## Hydration Strategies Quick Reference
+
+| Strategy | JavaScript | Use Case |
+|----------|------------|----------|
+| `none` | 없음 | 순수 정적 페이지 |
+| `island` | 부분 | 정적 + 인터랙티브 혼합 (기본값) |
+| `full` | 전체 | SPA 스타일 페이지 |
+
+## Priority Quick Reference
+
+| Priority | Load Time | Use Case |
+|----------|-----------|----------|
+| `immediate` | 페이지 로드 | 중요한 인터랙션 |
+| `visible` | 뷰포트 진입 | 스크롤 아래 콘텐츠 (기본값) |
+| `idle` | 브라우저 유휴 | 비중요 기능 |
+| `interaction` | 사용자 액션 | 클릭해야 활성화 |

package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md

@@ -1,109 +1,109 @@
----
-title: Use useIslandEvent for Island Communication
-impact: MEDIUM
-impactDescription: Enables Island-to-Island data flow
-tags: hydration, event, communication
----
-
-## Use useIslandEvent for Island Communication
-
-Islands are isolated by default. Use `useIslandEvent` to communicate between them.
-
-**Incorrect (shared global state):**
-
-```tsx
-// ❌ Don't use global variables for Island communication
-let globalCount = 0;
-
-// Island A
-export function CounterIsland() {
-  const [count, setCount] = useState(globalCount);
-  // This won't sync with other Islands
-}
-```
-
-**Correct (useIslandEvent):**
-
-```tsx
-// Island A: Counter (emits updates)
-"use client";
-
-import { useState } from "react";
-import { useIslandEvent } from "@mandujs/core/client";
-
-export function CounterIsland() {
-  const [count, setCount] = useState(0);
-  const { emit } = useIslandEvent<{ count: number }>("counter-update");
-
-  const increment = () => {
-    const newCount = count + 1;
-    setCount(newCount);
-    emit({ count: newCount });  // Notify other Islands
-  };
-
-  return <button onClick={increment}>Count: {count}</button>;
-}
-```
-
-```tsx
-// Island B: Display (receives updates)
-"use client";
-
-import { useState } from "react";
-import { useIslandEvent } from "@mandujs/core/client";
-
-export function DisplayIsland() {
-  const [lastCount, setLastCount] = useState(0);
-
-  useIslandEvent<{ count: number }>("counter-update", (data) => {
-    setLastCount(data.count);  // React to counter updates
-  });
-
-  return <p>Last count received: {lastCount}</p>;
-}
-```
-
-## API Reference
-
-```typescript
-// Emit events
-const { emit } = useIslandEvent<T>(eventName);
-emit(data);
-
-// Listen to events
-useIslandEvent<T>(eventName, (data) => {
-  // Handle received data
-});
-
-// Both emit and listen
-const { emit } = useIslandEvent<T>(eventName, (data) => {
-  // Handle received data
-});
-emit(otherData);
-```
-
-## Common Patterns
-
-### Cart Updates
-
-```tsx
-// Product Island
-emit({ action: "add", productId: 123 });
-
-// Cart Island
-useIslandEvent("cart-update", ({ action, productId }) => {
-  if (action === "add") addToCart(productId);
-});
-```
-
-### Form Validation
-
-```tsx
-// Form Field Island
-emit({ field: "email", valid: true, value: "user@example.com" });
-
-// Submit Button Island
-useIslandEvent("field-change", ({ field, valid }) => {
-  updateFieldStatus(field, valid);
-});
-```
+---
+title: Use useIslandEvent for Island Communication
+impact: MEDIUM
+impactDescription: Enables Island-to-Island data flow
+tags: hydration, event, communication
+---
+
+## Use useIslandEvent for Island Communication
+
+Islands are isolated by default. Use `useIslandEvent` to communicate between them.
+
+**Incorrect (shared global state):**
+
+```tsx
+// ❌ Don't use global variables for Island communication
+let globalCount = 0;
+
+// Island A
+export function CounterIsland() {
+  const [count, setCount] = useState(globalCount);
+  // This won't sync with other Islands
+}
+```
+
+**Correct (useIslandEvent):**
+
+```tsx
+// Island A: Counter (emits updates)
+"use client";
+
+import { useState } from "react";
+import { useIslandEvent } from "@mandujs/core/client";
+
+export function CounterIsland() {
+  const [count, setCount] = useState(0);
+  const { emit } = useIslandEvent<{ count: number }>("counter-update");
+
+  const increment = () => {
+    const newCount = count + 1;
+    setCount(newCount);
+    emit({ count: newCount });  // Notify other Islands
+  };
+
+  return <button onClick={increment}>Count: {count}</button>;
+}
+```
+
+```tsx
+// Island B: Display (receives updates)
+"use client";
+
+import { useState } from "react";
+import { useIslandEvent } from "@mandujs/core/client";
+
+export function DisplayIsland() {
+  const [lastCount, setLastCount] = useState(0);
+
+  useIslandEvent<{ count: number }>("counter-update", (data) => {
+    setLastCount(data.count);  // React to counter updates
+  });
+
+  return <p>Last count received: {lastCount}</p>;
+}
+```
+
+## API Reference
+
+```typescript
+// Emit events
+const { emit } = useIslandEvent<T>(eventName);
+emit(data);
+
+// Listen to events
+useIslandEvent<T>(eventName, (data) => {
+  // Handle received data
+});
+
+// Both emit and listen
+const { emit } = useIslandEvent<T>(eventName, (data) => {
+  // Handle received data
+});
+emit(otherData);
+```
+
+## Common Patterns
+
+### Cart Updates
+
+```tsx
+// Product Island
+emit({ action: "add", productId: 123 });
+
+// Cart Island
+useIslandEvent("cart-update", ({ action, productId }) => {
+  if (action === "add") addToCart(productId);
+});
+```
+
+### Form Validation
+
+```tsx
+// Form Field Island
+emit({ field: "email", valid: true, value: "user@example.com" });
+
+// Submit Button Island
+useIslandEvent("field-change", ({ field, valid }) => {
+  updateFieldStatus(field, valid);
+});
+```

package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md

@@ -1,55 +1,55 @@
----
-title: Add "use client" Directive for Client Components
-impact: CRITICAL
-impactDescription: Required for client-side interactivity
-tags: hydration, client, directive
----
-
-## Add "use client" Directive for Client Components
-
-Client components must have `"use client"` directive at the top of the file.
-
-**Incorrect (missing directive):**
-
-```tsx
-// app/counter/client.tsx
-
-import { useState } from "react";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);  // ❌ Will error
-  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
-}
-```
-
-**Correct (with directive):**
-
-```tsx
-// app/counter/client.tsx
-
-"use client";
-
-import { useState } from "react";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);  // ✅ Works
-  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
-}
-```
-
-## When to Use "use client"
-
-Use the directive when your component:
-- Uses React hooks (useState, useEffect, useRef, etc.)
-- Has event handlers (onClick, onChange, etc.)
-- Uses browser-only APIs (window, document, localStorage)
-- Needs client-side interactivity
-
-## File Naming Convention
-
-```
-app/
-├── counter/
-│   ├── page.tsx      # Server component (no directive needed)
-│   └── client.tsx    # Client component ("use client" required)
-```
+---
+title: Add "use client" Directive for Client Components
+impact: CRITICAL
+impactDescription: Required for client-side interactivity
+tags: hydration, client, directive
+---
+
+## Add "use client" Directive for Client Components
+
+Client components must have `"use client"` directive at the top of the file.
+
+**Incorrect (missing directive):**
+
+```tsx
+// app/counter/client.tsx
+
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);  // ❌ Will error
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+}
+```
+
+**Correct (with directive):**
+
+```tsx
+// app/counter/client.tsx
+
+"use client";
+
+import { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);  // ✅ Works
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+}
+```
+
+## When to Use "use client"
+
+Use the directive when your component:
+- Uses React hooks (useState, useEffect, useRef, etc.)
+- Has event handlers (onClick, onChange, etc.)
+- Uses browser-only APIs (window, document, localStorage)
+- Needs client-side interactivity
+
+## File Naming Convention
+
+```
+app/
+├── counter/
+│   ├── page.tsx      # Server component (no directive needed)
+│   └── client.tsx    # Client component ("use client" required)
+```