@mandujs/mcp 0.12.1 → 0.13.0

package/src/resources/skills/mandu-styling/rules/style-setup-modules.md

@@ -1,162 +1,162 @@
----
-title: CSS Modules Setup
-impact: CRITICAL
-impactDescription: Zero-dependency styling with native Bun support
-tags: styling, css-modules, setup, native
----
-
-## CSS Modules Setup
-
-**Impact: CRITICAL (Zero-dependency styling with native Bun support)**
-
-외부 의존성 없이 스코프된 CSS가 필요할 때 CSS Modules를 사용하세요.
-
-**Bun 설정:**
-
-Bun은 CSS Modules를 네이티브로 지원합니다. 별도 설정 불필요.
-
-```typescript
-// bunfig.toml (선택적 최적화)
-[build]
-target = "browser"
-minify = true
-
-[build.loader]
-".module.css" = "css"
-```
-
-## 사용 예시
-
-```css
-/* app/button/button.module.css */
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.default {
-  background-color: var(--mandu-primary);
-  color: white;
-}
-
-.default:hover {
-  background-color: var(--mandu-primary-dark);
-}
-
-.outline {
-  border: 1px solid var(--mandu-primary);
-  color: var(--mandu-primary);
-}
-
-.outline:hover {
-  background-color: var(--mandu-primary-light);
-}
-
-.sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
-.md { height: 2.5rem; padding: 0 1rem; }
-.lg { height: 3rem; padding: 0 1.5rem; font-size: 1.125rem; }
-```
-
-```tsx
-// app/button/client.tsx
-"use client";
-
-import styles from "./button.module.css";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "outline";
-  size?: "sm" | "md" | "lg";
-}
-
-export function ButtonIsland({
-  variant = "default",
-  size = "md",
-  className,
-  ...props
-}: ButtonProps) {
-  const classes = [
-    styles.button,
-    styles[variant],
-    styles[size],
-    className,
-  ].filter(Boolean).join(" ");
-
-  return <button className={classes} {...props} />;
-}
-```
-
-## CSS Variables 활용
-
-```css
-/* app/globals.css */
-:root {
-  --mandu-primary: #3b82f6;
-  --mandu-primary-dark: #2563eb;
-  --mandu-primary-light: rgba(59, 130, 246, 0.1);
-  --mandu-secondary: #64748b;
-  --mandu-radius: 0.5rem;
-}
-
-.dark {
-  --mandu-primary: #60a5fa;
-  --mandu-primary-dark: #3b82f6;
-  --mandu-background: #0f172a;
-  --mandu-foreground: #f8fafc;
-}
-```
-
-## clsx 조합
-
-```bash
-bun add clsx
-```
-
-```tsx
-import clsx from "clsx";
-import styles from "./card.module.css";
-
-export function CardIsland({ highlighted }: { highlighted?: boolean }) {
-  return (
-    <div
-      className={clsx(styles.card, {
-        [styles.highlighted]: highlighted,
-      })}
-    >
-      Content
-    </div>
-  );
-}
-```
-
-## TypeScript 타입 정의
-
-```typescript
-// types/css.d.ts
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-```
-
-## 장단점
-
-**장점:**
-- 의존성 없음 (Bun 네이티브)
-- 스코프 자동 격리
-- 작은 번들 크기
-
-**단점:**
-- 유틸리티 클래스 없음
-- 반복 코드 발생 가능
-- Tailwind 생태계 미호환
-
-**추천 사용 케이스:**
-- 최소 의존성 프로젝트
-- 레거시 CSS 마이그레이션
-- 특정 컴포넌트 격리
-
-Reference: [Bun CSS Support](https://bun.sh/docs/bundler/loaders#css)
+---
+title: CSS Modules Setup
+impact: CRITICAL
+impactDescription: Zero-dependency styling with native Bun support
+tags: styling, css-modules, setup, native
+---
+
+## CSS Modules Setup
+
+**Impact: CRITICAL (Zero-dependency styling with native Bun support)**
+
+외부 의존성 없이 스코프된 CSS가 필요할 때 CSS Modules를 사용하세요.
+
+**Bun 설정:**
+
+Bun은 CSS Modules를 네이티브로 지원합니다. 별도 설정 불필요.
+
+```typescript
+// bunfig.toml (선택적 최적화)
+[build]
+target = "browser"
+minify = true
+
+[build.loader]
+".module.css" = "css"
+```
+
+## 사용 예시
+
+```css
+/* app/button/button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.default {
+  background-color: var(--mandu-primary);
+  color: white;
+}
+
+.default:hover {
+  background-color: var(--mandu-primary-dark);
+}
+
+.outline {
+  border: 1px solid var(--mandu-primary);
+  color: var(--mandu-primary);
+}
+
+.outline:hover {
+  background-color: var(--mandu-primary-light);
+}
+
+.sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
+.md { height: 2.5rem; padding: 0 1rem; }
+.lg { height: 3rem; padding: 0 1.5rem; font-size: 1.125rem; }
+```
+
+```tsx
+// app/button/client.tsx
+"use client";
+
+import styles from "./button.module.css";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline";
+  size?: "sm" | "md" | "lg";
+}
+
+export function ButtonIsland({
+  variant = "default",
+  size = "md",
+  className,
+  ...props
+}: ButtonProps) {
+  const classes = [
+    styles.button,
+    styles[variant],
+    styles[size],
+    className,
+  ].filter(Boolean).join(" ");
+
+  return <button className={classes} {...props} />;
+}
+```
+
+## CSS Variables 활용
+
+```css
+/* app/globals.css */
+:root {
+  --mandu-primary: #3b82f6;
+  --mandu-primary-dark: #2563eb;
+  --mandu-primary-light: rgba(59, 130, 246, 0.1);
+  --mandu-secondary: #64748b;
+  --mandu-radius: 0.5rem;
+}
+
+.dark {
+  --mandu-primary: #60a5fa;
+  --mandu-primary-dark: #3b82f6;
+  --mandu-background: #0f172a;
+  --mandu-foreground: #f8fafc;
+}
+```
+
+## clsx 조합
+
+```bash
+bun add clsx
+```
+
+```tsx
+import clsx from "clsx";
+import styles from "./card.module.css";
+
+export function CardIsland({ highlighted }: { highlighted?: boolean }) {
+  return (
+    <div
+      className={clsx(styles.card, {
+        [styles.highlighted]: highlighted,
+      })}
+    >
+      Content
+    </div>
+  );
+}
+```
+
+## TypeScript 타입 정의
+
+```typescript
+// types/css.d.ts
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+```
+
+## 장단점
+
+**장점:**
+- 의존성 없음 (Bun 네이티브)
+- 스코프 자동 격리
+- 작은 번들 크기
+
+**단점:**
+- 유틸리티 클래스 없음
+- 반복 코드 발생 가능
+- Tailwind 생태계 미호환
+
+**추천 사용 케이스:**
+- 최소 의존성 프로젝트
+- 레거시 CSS 마이그레이션
+- 특정 컴포넌트 격리
+
+Reference: [Bun CSS Support](https://bun.sh/docs/bundler/loaders#css)

package/src/resources/skills/mandu-styling/rules/style-setup-panda.md

@@ -1,164 +1,164 @@
----
-title: Panda CSS Setup
-impact: CRITICAL
-impactDescription: Type-safe alternative CSS framework
-tags: styling, panda, setup, type-safe
----
-
-## Panda CSS Setup
-
-**Impact: CRITICAL (Type-safe alternative CSS framework)**
-
-Type-safe CSS-in-JS가 필요할 때 Panda CSS를 사용하세요. Zero-runtime으로 Island와 완벽 호환됩니다.
-
-**설치:**
-
-```bash
-bun add -d @pandacss/dev
-bunx panda init
-```
-
-**panda.config.ts:**
-
-```typescript
-import { defineConfig } from "@pandacss/dev";
-
-export default defineConfig({
-  preflight: true,
-  include: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
-  exclude: [],
-
-  theme: {
-    extend: {
-      tokens: {
-        colors: {
-          mandu: {
-            primary: { value: "#3b82f6" },
-            secondary: { value: "#64748b" },
-            accent: { value: "#f59e0b" },
-          },
-        },
-        radii: {
-          mandu: { value: "0.5rem" },
-        },
-      },
-      semanticTokens: {
-        colors: {
-          background: {
-            value: { base: "{colors.white}", _dark: "{colors.zinc.900}" },
-          },
-          foreground: {
-            value: { base: "{colors.zinc.900}", _dark: "{colors.white}" },
-          },
-        },
-      },
-    },
-  },
-
-  outdir: "styled-system",
-});
-```
-
-**package.json 스크립트:**
-
-```json
-{
-  "scripts": {
-    "prepare": "panda codegen",
-    "dev": "panda --watch & bun run serve"
-  }
-}
-```
-
-## 사용 예시
-
-```tsx
-// app/button/client.tsx
-"use client";
-
-import { css, cva } from "@/styled-system/css";
-
-const button = cva({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "mandu",
-    fontWeight: "medium",
-    transition: "colors",
-    cursor: "pointer",
-  },
-  variants: {
-    variant: {
-      default: {
-        bg: "mandu.primary",
-        color: "white",
-        _hover: { bg: "mandu.primary/90" },
-      },
-      outline: {
-        border: "1px solid",
-        borderColor: "mandu.primary",
-        color: "mandu.primary",
-        _hover: { bg: "mandu.primary/10" },
-      },
-      ghost: {
-        _hover: { bg: "mandu.secondary/20" },
-      },
-    },
-    size: {
-      sm: { h: "8", px: "3", fontSize: "sm" },
-      md: { h: "10", px: "4" },
-      lg: { h: "12", px: "6", fontSize: "lg" },
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md",
-  },
-});
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "outline" | "ghost";
-  size?: "sm" | "md" | "lg";
-}
-
-export function ButtonIsland({ variant, size, className, ...props }: ButtonProps) {
-  return (
-    <button className={button({ variant, size })} {...props} />
-  );
-}
-```
-
-## Inline Styles
-
-```tsx
-import { css } from "@/styled-system/css";
-
-export function CardIsland() {
-  return (
-    <div
-      className={css({
-        p: "4",
-        rounded: "mandu",
-        bg: "background",
-        shadow: "md",
-        _hover: { shadow: "lg" },
-      })}
-    >
-      Content
-    </div>
-  );
-}
-```
-
-## Tailwind와의 비교
-
-| 기능 | Tailwind | Panda |
-|------|----------|-------|
-| Type-safe | ❌ | ✅ |
-| Zero-runtime | ✅ | ✅ |
-| 생태계 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
-| DX | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
-| 학습 곡선 | 낮음 | 중간 |
-
-Reference: [Panda CSS Documentation](https://panda-css.com/docs)
+---
+title: Panda CSS Setup
+impact: CRITICAL
+impactDescription: Type-safe alternative CSS framework
+tags: styling, panda, setup, type-safe
+---
+
+## Panda CSS Setup
+
+**Impact: CRITICAL (Type-safe alternative CSS framework)**
+
+Type-safe CSS-in-JS가 필요할 때 Panda CSS를 사용하세요. Zero-runtime으로 Island와 완벽 호환됩니다.
+
+**설치:**
+
+```bash
+bun add -d @pandacss/dev
+bunx panda init
+```
+
+**panda.config.ts:**
+
+```typescript
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  preflight: true,
+  include: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
+  exclude: [],
+
+  theme: {
+    extend: {
+      tokens: {
+        colors: {
+          mandu: {
+            primary: { value: "#3b82f6" },
+            secondary: { value: "#64748b" },
+            accent: { value: "#f59e0b" },
+          },
+        },
+        radii: {
+          mandu: { value: "0.5rem" },
+        },
+      },
+      semanticTokens: {
+        colors: {
+          background: {
+            value: { base: "{colors.white}", _dark: "{colors.zinc.900}" },
+          },
+          foreground: {
+            value: { base: "{colors.zinc.900}", _dark: "{colors.white}" },
+          },
+        },
+      },
+    },
+  },
+
+  outdir: "styled-system",
+});
+```
+
+**package.json 스크립트:**
+
+```json
+{
+  "scripts": {
+    "prepare": "panda codegen",
+    "dev": "panda --watch & bun run serve"
+  }
+}
+```
+
+## 사용 예시
+
+```tsx
+// app/button/client.tsx
+"use client";
+
+import { css, cva } from "@/styled-system/css";
+
+const button = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "mandu",
+    fontWeight: "medium",
+    transition: "colors",
+    cursor: "pointer",
+  },
+  variants: {
+    variant: {
+      default: {
+        bg: "mandu.primary",
+        color: "white",
+        _hover: { bg: "mandu.primary/90" },
+      },
+      outline: {
+        border: "1px solid",
+        borderColor: "mandu.primary",
+        color: "mandu.primary",
+        _hover: { bg: "mandu.primary/10" },
+      },
+      ghost: {
+        _hover: { bg: "mandu.secondary/20" },
+      },
+    },
+    size: {
+      sm: { h: "8", px: "3", fontSize: "sm" },
+      md: { h: "10", px: "4" },
+      lg: { h: "12", px: "6", fontSize: "lg" },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+}
+
+export function ButtonIsland({ variant, size, className, ...props }: ButtonProps) {
+  return (
+    <button className={button({ variant, size })} {...props} />
+  );
+}
+```
+
+## Inline Styles
+
+```tsx
+import { css } from "@/styled-system/css";
+
+export function CardIsland() {
+  return (
+    <div
+      className={css({
+        p: "4",
+        rounded: "mandu",
+        bg: "background",
+        shadow: "md",
+        _hover: { shadow: "lg" },
+      })}
+    >
+      Content
+    </div>
+  );
+}
+```
+
+## Tailwind와의 비교
+
+| 기능 | Tailwind | Panda |
+|------|----------|-------|
+| Type-safe | ❌ | ✅ |
+| Zero-runtime | ✅ | ✅ |
+| 생태계 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
+| DX | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
+| 학습 곡선 | 낮음 | 중간 |
+
+Reference: [Panda CSS Documentation](https://panda-css.com/docs)