@mandujs/mcp 0.36.2 → 0.37.0

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/)

package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md

@@ -1,164 +1,164 @@
----
-title: Structure Islands as Compound Components
-impact: HIGH
-impactDescription: Enables flexible composition without prop drilling
-tags: composition, compound, architecture, island
----
-
-## Structure Islands as Compound Components
-
-**Impact: HIGH (Enables flexible composition without prop drilling)**
-
-복잡한 Island를 컴파운드 컴포넌트로 구조화하세요. 각 서브컴포넌트는 props가 아닌 context로 공유 상태에 접근합니다.
-
-**Incorrect (모놀리식 컴포넌트):**
-
-```tsx
-// app/composer/client.tsx
-"use client";
-
-function ComposerIsland({
-  renderHeader,
-  renderFooter,
-  renderActions,
-  showAttachments,
-  showFormatting,
-  showEmojis,
-}: Props) {
-  const [input, setInput] = useState("");
-
-  return (
-    <form>
-      {renderHeader?.()}
-      <Input value={input} onChange={setInput} />
-      {showAttachments && <Attachments />}
-      {renderFooter ? (
-        renderFooter()
-      ) : (
-        <Footer>
-          {showFormatting && <Formatting />}
-          {showEmojis && <Emojis />}
-          {renderActions?.()}
-        </Footer>
-      )}
-    </form>
-  );
-}
-```
-
-**Correct (컴파운드 Island):**
-
-```tsx
-// app/composer/client.tsx
-"use client";
-
-import { createContext, use, useState, useCallback } from "react";
-
-// Context 정의
-interface ComposerContextValue {
-  state: { input: string; attachments: File[] };
-  actions: {
-    updateInput: (text: string) => void;
-    submit: () => void;
-  };
-}
-
-const ComposerContext = createContext<ComposerContextValue | null>(null);
-
-// Provider
-function ComposerProvider({ children, onSubmit }: ProviderProps) {
-  const [input, setInput] = useState("");
-  const [attachments, setAttachments] = useState<File[]>([]);
-
-  const submit = useCallback(() => {
-    onSubmit?.({ input, attachments });
-    setInput("");
-    setAttachments([]);
-  }, [input, attachments, onSubmit]);
-
-  return (
-    <ComposerContext value={{
-      state: { input, attachments },
-      actions: { updateInput: setInput, submit },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-
-// 서브컴포넌트들
-function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form onSubmit={(e) => e.preventDefault()}>{children}</form>;
-}
-
-function ComposerInput() {
-  const { state, actions } = use(ComposerContext)!;
-  return (
-    <textarea
-      value={state.input}
-      onChange={(e) => actions.updateInput(e.target.value)}
-      placeholder="Type a message..."
-    />
-  );
-}
-
-function ComposerSubmit() {
-  const { actions } = use(ComposerContext)!;
-  return <button onClick={actions.submit}>Send</button>;
-}
-
-function ComposerEmojis() {
-  const { actions } = use(ComposerContext)!;
-  return (
-    <EmojiPicker onSelect={(emoji) => {
-      actions.updateInput((prev) => prev + emoji);
-    }} />
-  );
-}
-
-// 컴파운드로 export
-export const Composer = {
-  Provider: ComposerProvider,
-  Frame: ComposerFrame,
-  Input: ComposerInput,
-  Submit: ComposerSubmit,
-  Emojis: ComposerEmojis,
-  Attachments: ComposerAttachments,
-  Formatting: ComposerFormatting,
-};
-```
-
-**사용법:**
-
-```tsx
-// app/chat/page.tsx
-import { Composer } from "../composer/client";
-
-export default function ChatPage() {
-  return (
-    <div>
-      <h1>Chat</h1>
-
-      {/* 필요한 조각만 조합 */}
-      <Composer.Provider onSubmit={handleSubmit}>
-        <Composer.Frame>
-          <Composer.Input />
-          <footer>
-            <Composer.Emojis />
-            <Composer.Submit />
-          </footer>
-        </Composer.Frame>
-      </Composer.Provider>
-    </div>
-  );
-}
-```
-
-## 장점
-
-- 소비자가 필요한 것만 명시적으로 조합
-- 숨겨진 조건문 없음
-- state/actions가 Provider에 의해 주입됨
-- 같은 컴포넌트 구조를 다양한 구현과 재사용 가능
-
-Reference: [Compound Components Pattern](https://www.patterns.dev/react/compound-pattern)
+---
+title: Structure Islands as Compound Components
+impact: HIGH
+impactDescription: Enables flexible composition without prop drilling
+tags: composition, compound, architecture, island
+---
+
+## Structure Islands as Compound Components
+
+**Impact: HIGH (Enables flexible composition without prop drilling)**
+
+복잡한 Island를 컴파운드 컴포넌트로 구조화하세요. 각 서브컴포넌트는 props가 아닌 context로 공유 상태에 접근합니다.
+
+**Incorrect (모놀리식 컴포넌트):**
+
+```tsx
+// app/composer/client.tsx
+"use client";
+
+function ComposerIsland({
+  renderHeader,
+  renderFooter,
+  renderActions,
+  showAttachments,
+  showFormatting,
+  showEmojis,
+}: Props) {
+  const [input, setInput] = useState("");
+
+  return (
+    <form>
+      {renderHeader?.()}
+      <Input value={input} onChange={setInput} />
+      {showAttachments && <Attachments />}
+      {renderFooter ? (
+        renderFooter()
+      ) : (
+        <Footer>
+          {showFormatting && <Formatting />}
+          {showEmojis && <Emojis />}
+          {renderActions?.()}
+        </Footer>
+      )}
+    </form>
+  );
+}
+```
+
+**Correct (컴파운드 Island):**
+
+```tsx
+// app/composer/client.tsx
+"use client";
+
+import { createContext, use, useState, useCallback } from "react";
+
+// Context 정의
+interface ComposerContextValue {
+  state: { input: string; attachments: File[] };
+  actions: {
+    updateInput: (text: string) => void;
+    submit: () => void;
+  };
+}
+
+const ComposerContext = createContext<ComposerContextValue | null>(null);
+
+// Provider
+function ComposerProvider({ children, onSubmit }: ProviderProps) {
+  const [input, setInput] = useState("");
+  const [attachments, setAttachments] = useState<File[]>([]);
+
+  const submit = useCallback(() => {
+    onSubmit?.({ input, attachments });
+    setInput("");
+    setAttachments([]);
+  }, [input, attachments, onSubmit]);
+
+  return (
+    <ComposerContext value={{
+      state: { input, attachments },
+      actions: { updateInput: setInput, submit },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+
+// 서브컴포넌트들
+function ComposerFrame({ children }: { children: React.ReactNode }) {
+  return <form onSubmit={(e) => e.preventDefault()}>{children}</form>;
+}
+
+function ComposerInput() {
+  const { state, actions } = use(ComposerContext)!;
+  return (
+    <textarea
+      value={state.input}
+      onChange={(e) => actions.updateInput(e.target.value)}
+      placeholder="Type a message..."
+    />
+  );
+}
+
+function ComposerSubmit() {
+  const { actions } = use(ComposerContext)!;
+  return <button onClick={actions.submit}>Send</button>;
+}
+
+function ComposerEmojis() {
+  const { actions } = use(ComposerContext)!;
+  return (
+    <EmojiPicker onSelect={(emoji) => {
+      actions.updateInput((prev) => prev + emoji);
+    }} />
+  );
+}
+
+// 컴파운드로 export
+export const Composer = {
+  Provider: ComposerProvider,
+  Frame: ComposerFrame,
+  Input: ComposerInput,
+  Submit: ComposerSubmit,
+  Emojis: ComposerEmojis,
+  Attachments: ComposerAttachments,
+  Formatting: ComposerFormatting,
+};
+```
+
+**사용법:**
+
+```tsx
+// app/chat/page.tsx
+import { Composer } from "../composer/client";
+
+export default function ChatPage() {
+  return (
+    <div>
+      <h1>Chat</h1>
+
+      {/* 필요한 조각만 조합 */}
+      <Composer.Provider onSubmit={handleSubmit}>
+        <Composer.Frame>
+          <Composer.Input />
+          <footer>
+            <Composer.Emojis />
+            <Composer.Submit />
+          </footer>
+        </Composer.Frame>
+      </Composer.Provider>
+    </div>
+  );
+}
+```
+
+## 장점
+
+- 소비자가 필요한 것만 명시적으로 조합
+- 숨겨진 조건문 없음
+- state/actions가 Provider에 의해 주입됨
+- 같은 컴포넌트 구조를 다양한 구현과 재사용 가능
+
+Reference: [Compound Components Pattern](https://www.patterns.dev/react/compound-pattern)