@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md

@@ -1,113 +1,113 @@
----
-title: Use Mandu.island() with Setup Function
-impact: HIGH
-impactDescription: Proper Island structure
-tags: hydration, island, setup
----
-
-## Use Mandu.island() with Setup Function
-
-For complex Islands, use `Mandu.island()` API to separate state logic from rendering.
-
-**Incorrect (mixed concerns):**
-
-```tsx
-"use client";
-
-export default function TodoList({ initialTodos }) {
-  // State, handlers, and JSX all mixed together
-  const [todos, setTodos] = useState(initialTodos);
-  const [input, setInput] = useState("");
-
-  const add = () => {
-    setTodos([...todos, { id: Date.now(), text: input }]);
-    setInput("");
-  };
-
-  return (
-    <div>
-      <input value={input} onChange={e => setInput(e.target.value)} />
-      <button onClick={add}>Add</button>
-      {todos.map(t => <li key={t.id}>{t.text}</li>)}
-    </div>
-  );
-}
-```
-
-**Correct (Mandu.island pattern):**
-
-```tsx
-// spec/slots/todos.client.ts
-
-import { Mandu } from "@mandujs/core/client";
-import { useState, useCallback } from "react";
-
-interface TodosData {
-  todos: { id: number; text: string; done: boolean }[];
-}
-
-export default Mandu.island<TodosData>({
-  // Setup: Initialize client state from server data
-  setup: (serverData) => {
-    const [todos, setTodos] = useState(serverData.todos);
-    const [input, setInput] = useState("");
-
-    const addTodo = useCallback(() => {
-      if (!input.trim()) return;
-      setTodos(prev => [...prev, { id: Date.now(), text: input, done: false }]);
-      setInput("");
-    }, [input]);
-
-    const toggleTodo = useCallback((id: number) => {
-      setTodos(prev => prev.map(t =>
-        t.id === id ? { ...t, done: !t.done } : t
-      ));
-    }, []);
-
-    return { todos, input, setInput, addTodo, toggleTodo };
-  },
-
-  // Render: Pure rendering logic
-  render: ({ todos, input, setInput, addTodo, toggleTodo }) => (
-    <div>
-      <input
-        value={input}
-        onChange={e => setInput(e.target.value)}
-        placeholder="New todo..."
-      />
-      <button onClick={addTodo}>Add</button>
-      <ul>
-        {todos.map(todo => (
-          <li
-            key={todo.id}
-            onClick={() => toggleTodo(todo.id)}
-            style={{ textDecoration: todo.done ? "line-through" : "none" }}
-          >
-            {todo.done ? "✅" : "⬜"} {todo.text}
-          </li>
-        ))}
-      </ul>
-    </div>
-  ),
-
-  // Optional: Error boundary
-  errorBoundary: (error, reset) => (
-    <div>
-      <p>Error: {error.message}</p>
-      <button onClick={reset}>Retry</button>
-    </div>
-  ),
-
-  // Optional: Loading state
-  loading: () => <p>Loading todos...</p>,
-});
-```
-
-## Mandu.island() Options
-
-| Option | Required | Description |
-|--------|----------|-------------|
-| `setup` | Yes | Initialize state from server data |
-| `render` | Yes | Pure render function |
-| `errorBoundary` | No | Error UI component |
-| `loading` | No | Loading UI component |
+---
+title: Use Mandu.island() with Setup Function
+impact: HIGH
+impactDescription: Proper Island structure
+tags: hydration, island, setup
+---
+
+## Use Mandu.island() with Setup Function
+
+For complex Islands, use `Mandu.island()` API to separate state logic from rendering.
+
+**Incorrect (mixed concerns):**
+
+```tsx
+"use client";
+
+export default function TodoList({ initialTodos }) {
+  // State, handlers, and JSX all mixed together
+  const [todos, setTodos] = useState(initialTodos);
+  const [input, setInput] = useState("");
+
+  const add = () => {
+    setTodos([...todos, { id: Date.now(), text: input }]);
+    setInput("");
+  };
+
+  return (
+    <div>
+      <input value={input} onChange={e => setInput(e.target.value)} />
+      <button onClick={add}>Add</button>
+      {todos.map(t => <li key={t.id}>{t.text}</li>)}
+    </div>
+  );
+}
+```
+
+**Correct (Mandu.island pattern):**
+
+```tsx
+// spec/slots/todos.client.ts
+
+import { Mandu } from "@mandujs/core/client";
+import { useState, useCallback } from "react";
+
+interface TodosData {
+  todos: { id: number; text: string; done: boolean }[];
+}
+
+export default Mandu.island<TodosData>({
+  // Setup: Initialize client state from server data
+  setup: (serverData) => {
+    const [todos, setTodos] = useState(serverData.todos);
+    const [input, setInput] = useState("");
+
+    const addTodo = useCallback(() => {
+      if (!input.trim()) return;
+      setTodos(prev => [...prev, { id: Date.now(), text: input, done: false }]);
+      setInput("");
+    }, [input]);
+
+    const toggleTodo = useCallback((id: number) => {
+      setTodos(prev => prev.map(t =>
+        t.id === id ? { ...t, done: !t.done } : t
+      ));
+    }, []);
+
+    return { todos, input, setInput, addTodo, toggleTodo };
+  },
+
+  // Render: Pure rendering logic
+  render: ({ todos, input, setInput, addTodo, toggleTodo }) => (
+    <div>
+      <input
+        value={input}
+        onChange={e => setInput(e.target.value)}
+        placeholder="New todo..."
+      />
+      <button onClick={addTodo}>Add</button>
+      <ul>
+        {todos.map(todo => (
+          <li
+            key={todo.id}
+            onClick={() => toggleTodo(todo.id)}
+            style={{ textDecoration: todo.done ? "line-through" : "none" }}
+          >
+            {todo.done ? "✅" : "⬜"} {todo.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  ),
+
+  // Optional: Error boundary
+  errorBoundary: (error, reset) => (
+    <div>
+      <p>Error: {error.message}</p>
+      <button onClick={reset}>Retry</button>
+    </div>
+  ),
+
+  // Optional: Loading state
+  loading: () => <p>Loading todos...</p>,
+});
+```
+
+## Mandu.island() Options
+
+| Option | Required | Description |
+|--------|----------|-------------|
+| `setup` | Yes | Initialize state from server data |
+| `render` | Yes | Pure render function |
+| `errorBoundary` | No | Error UI component |
+| `loading` | No | Loading UI component |

package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md

@@ -1,68 +1,68 @@
----
-title: Use Visible Priority for Below-Fold Content
-impact: MEDIUM
-impactDescription: Optimizes initial page load
-tags: hydration, priority, performance
----
-
-## Use Visible Priority for Below-Fold Content
-
-Set hydration priority based on when the component needs to be interactive.
-
-## Hydration Priorities
-
-| Priority | Load Time | Use Case |
-|----------|-----------|----------|
-| `immediate` | Page load | Critical interactions (header nav, auth forms) |
-| `visible` | Viewport entry (default) | Below-fold content |
-| `idle` | Browser idle | Non-critical features (analytics widgets) |
-| `interaction` | User action | Click-to-activate components |
-
-## Examples
-
-### Immediate: Always-visible interactions
-
-```tsx
-// Header with navigation - needs to work immediately
-<Island priority="immediate">
-  <HeaderNav />
-</Island>
-```
-
-### Visible: Below-fold content (default)
-
-```tsx
-// Comments section - load when scrolled into view
-<Island priority="visible">
-  <CommentsSection postId={postId} />
-</Island>
-```
-
-### Idle: Background features
-
-```tsx
-// Chat widget - can wait until browser is idle
-<Island priority="idle">
-  <ChatWidget />
-</Island>
-```
-
-### Interaction: On-demand activation
-
-```tsx
-// Video player - only hydrate when user clicks play
-<Island priority="interaction">
-  <VideoPlayer videoId={videoId} />
-</Island>
-```
-
-## Performance Impact
-
-```
-immediate: +JavaScript bundle at page load
-visible:   +JavaScript when component enters viewport
-idle:      +JavaScript during browser idle time
-interaction: +JavaScript on first user interaction
-```
-
-**Rule of thumb**: Use `visible` (default) unless you have a specific reason to choose another priority.
+---
+title: Use Visible Priority for Below-Fold Content
+impact: MEDIUM
+impactDescription: Optimizes initial page load
+tags: hydration, priority, performance
+---
+
+## Use Visible Priority for Below-Fold Content
+
+Set hydration priority based on when the component needs to be interactive.
+
+## Hydration Priorities
+
+| Priority | Load Time | Use Case |
+|----------|-----------|----------|
+| `immediate` | Page load | Critical interactions (header nav, auth forms) |
+| `visible` | Viewport entry (default) | Below-fold content |
+| `idle` | Browser idle | Non-critical features (analytics widgets) |
+| `interaction` | User action | Click-to-activate components |
+
+## Examples
+
+### Immediate: Always-visible interactions
+
+```tsx
+// Header with navigation - needs to work immediately
+<Island priority="immediate">
+  <HeaderNav />
+</Island>
+```
+
+### Visible: Below-fold content (default)
+
+```tsx
+// Comments section - load when scrolled into view
+<Island priority="visible">
+  <CommentsSection postId={postId} />
+</Island>
+```
+
+### Idle: Background features
+
+```tsx
+// Chat widget - can wait until browser is idle
+<Island priority="idle">
+  <ChatWidget />
+</Island>
+```
+
+### Interaction: On-demand activation
+
+```tsx
+// Video player - only hydrate when user clicks play
+<Island priority="interaction">
+  <VideoPlayer videoId={videoId} />
+</Island>
+```
+
+## Performance Impact
+
+```
+immediate: +JavaScript bundle at page load
+visible:   +JavaScript when component enters viewport
+idle:      +JavaScript during browser idle time
+interaction: +JavaScript on first user interaction
+```
+
+**Rule of thumb**: Use `visible` (default) unless you have a specific reason to choose another priority.

package/src/resources/skills/mandu-performance/SKILL.md

@@ -1,85 +1,85 @@
----
-name: mandu-performance
-description: |
-  Performance optimization patterns for Mandu applications. Use when optimizing
-  slot handlers, Island components, bundle size, or Bun runtime. Triggers on
-  tasks involving async/await, Promise.all, lazy loading, caching, or performance.
-license: MIT
-metadata:
-  author: mandu
-  version: "1.0.0"
----
-
-# Mandu Performance
-
-Mandu 애플리케이션의 성능 최적화 가이드. 워터폴 제거, 번들 최적화, 캐싱 패턴, Bun 런타임 활용법을 다룹니다. Vercel의 React Best Practices를 Mandu 컨텍스트로 변환하여 적용합니다.
-
-## When to Apply
-
-Reference these guidelines when:
-- Optimizing slot handler response times
-- Reducing Island component bundle size
-- Implementing caching strategies
-- Working with async/await patterns
-- Leveraging Bun runtime features
-
-## Rule Categories by Priority
-
-| Priority | Category | Impact | Prefix |
-|----------|----------|--------|--------|
-| 1 | Async Optimization | CRITICAL | `perf-async-` |
-| 2 | Bundle Optimization | CRITICAL | `perf-bundle-` |
-| 3 | Caching Strategies | HIGH | `perf-cache-` |
-| 4 | Bun Runtime | HIGH | `perf-bun-` |
-| 5 | Rendering | MEDIUM | `perf-render-` |
-
-## Quick Reference
-
-### 1. Async Optimization (CRITICAL)
-
-- `perf-async-parallel` - Use Promise.all() for independent operations
-- `perf-async-defer-await` - Move await into branches where actually used
-- `perf-async-early-start` - Start promises early, await late
-
-### 2. Bundle Optimization (CRITICAL)
-
-- `perf-bundle-imports` - Import directly, avoid barrel files
-- `perf-bundle-island-lazy` - Lazy load Islands with dynamic import
-- `perf-bundle-preload` - Preload on hover/focus for perceived speed
-
-### 3. Caching Strategies (HIGH)
-
-- `perf-cache-slot` - Cache slot responses with appropriate TTL
-- `perf-cache-react` - Use React.cache() for request deduplication
-- `perf-cache-lru` - Use LRU cache for cross-request caching
-
-### 4. Bun Runtime (HIGH)
-
-- `perf-bun-serve` - Optimize Bun.serve() configuration
-- `perf-bun-file` - Use Bun.file() for efficient file operations
-- `perf-bun-sqlite` - Leverage bun:sqlite for fast database access
-
-### 5. Rendering (MEDIUM)
-
-- `perf-render-island-priority` - Set appropriate hydration priority
-- `perf-render-transitions` - Use startTransition for non-urgent updates
-
-## Performance Impact Summary
-
-| Optimization | Typical Improvement |
-|--------------|---------------------|
-| Promise.all() | 2-10× faster |
-| Direct imports | 15-70% faster dev boot |
-| Island lazy loading | 40-60% smaller initial bundle |
-| React.cache() | Eliminates duplicate queries |
-| Bun.file() | 10× faster than Node fs |
-
-## How to Use
-
-Read individual rule files for detailed explanations:
-
-```
-rules/perf-async-parallel.md
-rules/perf-bundle-imports.md
-rules/perf-bun-serve.md
-```
+---
+name: mandu-performance
+description: |
+  Performance optimization patterns for Mandu applications. Use when optimizing
+  slot handlers, Island components, bundle size, or Bun runtime. Triggers on
+  tasks involving async/await, Promise.all, lazy loading, caching, or performance.
+license: MIT
+metadata:
+  author: mandu
+  version: "1.0.0"
+---
+
+# Mandu Performance
+
+Mandu 애플리케이션의 성능 최적화 가이드. 워터폴 제거, 번들 최적화, 캐싱 패턴, Bun 런타임 활용법을 다룹니다. Vercel의 React Best Practices를 Mandu 컨텍스트로 변환하여 적용합니다.
+
+## When to Apply
+
+Reference these guidelines when:
+- Optimizing slot handler response times
+- Reducing Island component bundle size
+- Implementing caching strategies
+- Working with async/await patterns
+- Leveraging Bun runtime features
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Async Optimization | CRITICAL | `perf-async-` |
+| 2 | Bundle Optimization | CRITICAL | `perf-bundle-` |
+| 3 | Caching Strategies | HIGH | `perf-cache-` |
+| 4 | Bun Runtime | HIGH | `perf-bun-` |
+| 5 | Rendering | MEDIUM | `perf-render-` |
+
+## Quick Reference
+
+### 1. Async Optimization (CRITICAL)
+
+- `perf-async-parallel` - Use Promise.all() for independent operations
+- `perf-async-defer-await` - Move await into branches where actually used
+- `perf-async-early-start` - Start promises early, await late
+
+### 2. Bundle Optimization (CRITICAL)
+
+- `perf-bundle-imports` - Import directly, avoid barrel files
+- `perf-bundle-island-lazy` - Lazy load Islands with dynamic import
+- `perf-bundle-preload` - Preload on hover/focus for perceived speed
+
+### 3. Caching Strategies (HIGH)
+
+- `perf-cache-slot` - Cache slot responses with appropriate TTL
+- `perf-cache-react` - Use React.cache() for request deduplication
+- `perf-cache-lru` - Use LRU cache for cross-request caching
+
+### 4. Bun Runtime (HIGH)
+
+- `perf-bun-serve` - Optimize Bun.serve() configuration
+- `perf-bun-file` - Use Bun.file() for efficient file operations
+- `perf-bun-sqlite` - Leverage bun:sqlite for fast database access
+
+### 5. Rendering (MEDIUM)
+
+- `perf-render-island-priority` - Set appropriate hydration priority
+- `perf-render-transitions` - Use startTransition for non-urgent updates
+
+## Performance Impact Summary
+
+| Optimization | Typical Improvement |
+|--------------|---------------------|
+| Promise.all() | 2-10× faster |
+| Direct imports | 15-70% faster dev boot |
+| Island lazy loading | 40-60% smaller initial bundle |
+| React.cache() | Eliminates duplicate queries |
+| Bun.file() | 10× faster than Node fs |
+
+## How to Use
+
+Read individual rule files for detailed explanations:
+
+```
+rules/perf-async-parallel.md
+rules/perf-bundle-imports.md
+rules/perf-bun-serve.md
+```

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

@@ -1,14 +1,14 @@
-{
-  "version": "1.0.0",
-  "organization": "Mandu Framework",
-  "date": "February 2026",
-  "abstract": "Mandu 애플리케이션 성능 최적화 가이드. 워터폴 제거 (Promise.all), 번들 최적화 (직접 import, lazy loading), 캐싱 전략 (React.cache, LRU), Bun 런타임 활용 (Bun.serve, Bun.file)을 다룹니다. Vercel React Best Practices 기반으로 Mandu 컨텍스트에 맞게 변환되었습니다.",
-  "references": [
-    "https://vercel.com/blog/how-we-optimized-package-imports-in-next-js",
-    "https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast",
-    "https://bun.sh/docs/api/http",
-    "https://bun.sh/docs/api/file-io",
-    "https://react.dev/reference/react/cache"
-  ],
-  "tags": ["performance", "async", "bundle", "cache", "bun", "mandu"]
-}
+{
+  "version": "1.0.0",
+  "organization": "Mandu Framework",
+  "date": "February 2026",
+  "abstract": "Mandu 애플리케이션 성능 최적화 가이드. 워터폴 제거 (Promise.all), 번들 최적화 (직접 import, lazy loading), 캐싱 전략 (React.cache, LRU), Bun 런타임 활용 (Bun.serve, Bun.file)을 다룹니다. Vercel React Best Practices 기반으로 Mandu 컨텍스트에 맞게 변환되었습니다.",
+  "references": [
+    "https://vercel.com/blog/how-we-optimized-package-imports-in-next-js",
+    "https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast",
+    "https://bun.sh/docs/api/http",
+    "https://bun.sh/docs/api/file-io",
+    "https://react.dev/reference/react/cache"
+  ],
+  "tags": ["performance", "async", "bundle", "cache", "bun", "mandu"]
+}

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

@@ -1,31 +1,31 @@
-# 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. Async Optimization (perf-async)
-
-**Impact:** CRITICAL
-**Description:** 워터폴은 성능의 #1 킬러입니다. 순차적 await는 매번 전체 네트워크 지연을 추가합니다. 워터폴 제거가 가장 큰 성능 향상을 가져옵니다.
-
-## 2. Bundle Optimization (perf-bundle)
-
-**Impact:** CRITICAL
-**Description:** 초기 번들 크기 감소는 Time to Interactive와 Largest Contentful Paint를 개선합니다. Island lazy loading과 직접 import가 핵심입니다.
-
-## 3. Caching Strategies (perf-cache)
-
-**Impact:** HIGH
-**Description:** 적절한 캐싱은 불필요한 연산과 네트워크 요청을 제거합니다. React.cache()는 요청 내 중복 제거, LRU는 요청 간 캐싱에 사용합니다.
-
-## 4. Bun Runtime (perf-bun)
-
-**Impact:** HIGH
-**Description:** Bun의 네이티브 API (Bun.serve, Bun.file, bun:sqlite)는 Node.js 대비 현저히 빠릅니다. Mandu는 Bun 기반이므로 이를 최대한 활용해야 합니다.
-
-## 5. Rendering Performance (perf-render)
-
-**Impact:** MEDIUM
-**Description:** Island hydration 우선순위 설정과 startTransition 활용으로 사용자 체감 성능을 개선합니다.
+# 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. Async Optimization (perf-async)
+
+**Impact:** CRITICAL
+**Description:** 워터폴은 성능의 #1 킬러입니다. 순차적 await는 매번 전체 네트워크 지연을 추가합니다. 워터폴 제거가 가장 큰 성능 향상을 가져옵니다.
+
+## 2. Bundle Optimization (perf-bundle)
+
+**Impact:** CRITICAL
+**Description:** 초기 번들 크기 감소는 Time to Interactive와 Largest Contentful Paint를 개선합니다. Island lazy loading과 직접 import가 핵심입니다.
+
+## 3. Caching Strategies (perf-cache)
+
+**Impact:** HIGH
+**Description:** 적절한 캐싱은 불필요한 연산과 네트워크 요청을 제거합니다. React.cache()는 요청 내 중복 제거, LRU는 요청 간 캐싱에 사용합니다.
+
+## 4. Bun Runtime (perf-bun)
+
+**Impact:** HIGH
+**Description:** Bun의 네이티브 API (Bun.serve, Bun.file, bun:sqlite)는 Node.js 대비 현저히 빠릅니다. Mandu는 Bun 기반이므로 이를 최대한 활용해야 합니다.
+
+## 5. Rendering Performance (perf-render)
+
+**Impact:** MEDIUM
+**Description:** Island hydration 우선순위 설정과 startTransition 활용으로 사용자 체감 성능을 개선합니다.