@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-styling/rules/style-island-animations.md

@@ -0,0 +1,272 @@
+---
+title: Island Animations
+impact: HIGH
+impactDescription: Client-side animations for interactive Islands
+tags: styling, island, animations, transitions
+---
+
+## Island Animations
+
+**Impact: HIGH (Client-side animations for interactive Islands)**
+
+Island 컴포넌트에서 부드러운 애니메이션을 구현하세요.
+
+## Tailwind 애니메이션
+
+```typescript
+// tailwind.config.ts
+export default {
+  theme: {
+    extend: {
+      animation: {
+        "fade-in": "fadeIn 0.2s ease-out",
+        "fade-out": "fadeOut 0.2s ease-out",
+        "slide-in": "slideIn 0.3s ease-out",
+        "slide-out": "slideOut 0.3s ease-out",
+        "scale-in": "scaleIn 0.2s ease-out",
+        "spin-slow": "spin 3s linear infinite",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        fadeOut: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+        slideIn: {
+          "0%": { transform: "translateY(-10px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+        slideOut: {
+          "0%": { transform: "translateY(0)", opacity: "1" },
+          "100%": { transform: "translateY(-10px)", opacity: "0" },
+        },
+        scaleIn: {
+          "0%": { transform: "scale(0.95)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+      },
+    },
+  },
+};
+```
+
+## 조건부 애니메이션
+
+```tsx
+// app/dropdown/client.tsx
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+export function DropdownIsland() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+
+      <div
+        className={cn(
+          "absolute top-full mt-2 w-48 rounded-md bg-white shadow-lg",
+          "transition-all duration-200",
+          isOpen
+            ? "animate-fade-in opacity-100 translate-y-0"
+            : "opacity-0 -translate-y-2 pointer-events-none"
+        )}
+      >
+        <ul className="py-2">
+          <li className="px-4 py-2 hover:bg-gray-100">Option 1</li>
+          <li className="px-4 py-2 hover:bg-gray-100">Option 2</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+```
+
+## CSS Transition 패턴
+
+```tsx
+// app/accordion/client.tsx
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+export function AccordionIsland({ title, children }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="border-b">
+      <button
+        className="flex w-full items-center justify-between py-4"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span>{title}</span>
+        <span
+          className={cn(
+            "transition-transform duration-200",
+            isOpen && "rotate-180"
+          )}
+        >
+          ▼
+        </span>
+      </button>
+
+      <div
+        style={{ height }}
+        className="overflow-hidden transition-[height] duration-200 ease-out"
+      >
+        <div ref={contentRef} className="pb-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Loading States
+
+```tsx
+// app/button/client.tsx
+"use client";
+
+export function LoadingButtonIsland({ loading, children, ...props }) {
+  return (
+    <button
+      disabled={loading}
+      className={cn(
+        "relative inline-flex items-center justify-center",
+        loading && "cursor-wait"
+      )}
+      {...props}
+    >
+      {loading && (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <svg
+            className="h-5 w-5 animate-spin text-current"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+        </span>
+      )}
+      <span className={cn(loading && "invisible")}>{children}</span>
+    </button>
+  );
+}
+```
+
+## Skeleton Loading
+
+```tsx
+// components/skeleton.tsx
+export function Skeleton({ className, ...props }) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-gray-200 dark:bg-gray-700",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+// 사용
+<div className="space-y-2">
+  <Skeleton className="h-4 w-3/4" />
+  <Skeleton className="h-4 w-1/2" />
+</div>
+```
+
+## Page Transitions (View Transitions API)
+
+```tsx
+// app/layout.tsx
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>
+        <div className="[view-transition-name:main]">
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}
+```
+
+```css
+/* globals.css */
+@media (prefers-reduced-motion: no-preference) {
+  ::view-transition-old(main),
+  ::view-transition-new(main) {
+    animation-duration: 0.3s;
+  }
+
+  ::view-transition-old(main) {
+    animation-name: fadeOut;
+  }
+
+  ::view-transition-new(main) {
+    animation-name: fadeIn;
+  }
+}
+```
+
+## 접근성: Reduced Motion
+
+```tsx
+// hooks/useReducedMotion.ts
+export function useReducedMotion() {
+  const [prefersReduced, setPrefersReduced] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReduced(mq.matches);
+
+    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  return prefersReduced;
+}
+
+// 사용
+const reducedMotion = useReducedMotion();
+
+<div className={cn(
+  !reducedMotion && "animate-fade-in"
+)}>
+```
+
+Reference: [Tailwind Animation](https://tailwindcss.com/docs/animation)

package/src/resources/skills/mandu-styling/rules/style-island-scoping.md

@@ -0,0 +1,167 @@
+---
+title: Island Style Scoping
+impact: HIGH
+impactDescription: Prevents style conflicts between independent Islands
+tags: styling, island, scoping, isolation
+---
+
+## Island Style Scoping
+
+**Impact: HIGH (Prevents style conflicts between independent Islands)**
+
+Island는 독립적으로 hydrate되므로 스타일 충돌을 방지해야 합니다.
+
+**문제 상황:**
+
+```tsx
+// ❌ 전역 클래스 충돌 가능
+<div className="card">...</div>  // Island A
+<div className="card">...</div>  // Island B - 다른 스타일 의도
+```
+
+## 해결 방법 1: data-island 속성
+
+```tsx
+// app/counter/client.tsx
+"use client";
+
+export function CounterIsland() {
+  return (
+    <div
+      data-island="counter"
+      className="p-4 rounded-lg bg-blue-500"
+    >
+      <button className="[&[data-island=counter]_&]:text-white">
+        Count
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+/* Tailwind 커스텀 variant */
+[data-island="counter"] {
+  /* Island 특화 스타일 */
+}
+```
+
+## 해결 방법 2: CSS Modules (권장)
+
+```tsx
+// app/counter/client.tsx
+"use client";
+
+import styles from "./counter.module.css";
+
+export function CounterIsland() {
+  return (
+    <div className={styles.container}>
+      <button className={styles.button}>Count</button>
+    </div>
+  );
+}
+```
+
+```css
+/* app/counter/counter.module.css */
+.container {
+  @apply p-4 rounded-lg bg-blue-500;
+}
+
+.button {
+  @apply text-white font-medium;
+}
+```
+
+## 해결 방법 3: Tailwind Prefix
+
+```typescript
+// tailwind.config.ts
+export default {
+  prefix: "",  // 전역은 prefix 없음
+  // 또는 Island별 prefix
+};
+```
+
+```tsx
+// 컴포넌트별 네임스페이스
+const ns = "counter";
+
+export function CounterIsland() {
+  return (
+    <div className={`${ns}-container p-4`}>
+      <button className={`${ns}-btn`}>Count</button>
+    </div>
+  );
+}
+```
+
+## 해결 방법 4: CSS Layers
+
+```css
+/* app/globals.css */
+@layer components {
+  .island-counter {
+    @apply p-4 rounded-lg;
+  }
+}
+
+@layer islands.counter {
+  .container {
+    @apply bg-blue-500;
+  }
+}
+
+@layer islands.form {
+  .container {
+    @apply bg-green-500;
+  }
+}
+```
+
+## Best Practice: Compound + Module 조합
+
+```tsx
+// app/card/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+import styles from "./card.module.css";
+
+export const Card = {
+  Root: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.root, className)} {...props} />
+  ),
+  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.header, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.content, className)} {...props} />
+  ),
+};
+```
+
+```css
+/* app/card/card.module.css */
+.root {
+  @apply rounded-lg border bg-white shadow-sm;
+}
+
+.header {
+  @apply px-6 py-4 border-b;
+}
+
+.content {
+  @apply px-6 py-4;
+}
+```
+
+## 스타일 충돌 체크리스트
+
+- [ ] 전역 클래스명 사용 금지 (`.card`, `.button` 등)
+- [ ] CSS Modules 또는 data-island 속성 사용
+- [ ] cn() 함수로 클래스 병합 시 순서 주의
+- [ ] 다크모드 변수는 :root에 정의
+
+Reference: [Tailwind CSS Scoping](https://tailwindcss.com/docs/adding-custom-styles)

package/src/resources/skills/mandu-styling/rules/style-island-variants.md

@@ -0,0 +1,221 @@
+---
+title: Island Style Variants
+impact: HIGH
+impactDescription: Conditional styling patterns for Island components
+tags: styling, island, variants, cva
+---
+
+## Island Style Variants
+
+**Impact: HIGH (Conditional styling patterns for Island components)**
+
+Island 컴포넌트의 조건부 스타일링을 체계적으로 관리하세요.
+
+**class-variance-authority (cva) 설치:**
+
+```bash
+bun add class-variance-authority
+```
+
+## cva 기본 패턴
+
+```tsx
+// app/button/client.tsx
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  // Base styles
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-mandu-primary text-white hover:bg-mandu-primary/90",
+        destructive: "bg-red-500 text-white hover:bg-red-500/90",
+        outline: "border border-input bg-background hover:bg-accent",
+        secondary: "bg-mandu-secondary text-white hover:bg-mandu-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-mandu-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export function ButtonIsland({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
+  );
+}
+
+// Export for reuse
+export { buttonVariants };
+```
+
+## 복합 Variants
+
+```tsx
+const cardVariants = cva("rounded-lg border", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      elevated: "bg-white shadow-lg",
+      outlined: "bg-transparent",
+    },
+    padding: {
+      none: "",
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+    interactive: {
+      true: "cursor-pointer hover:shadow-md transition-shadow",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "elevated",
+      interactive: true,
+      className: "hover:shadow-xl",
+    },
+    {
+      variant: "outlined",
+      interactive: true,
+      className: "hover:border-mandu-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    padding: "md",
+    interactive: false,
+  },
+});
+```
+
+## Boolean Variants
+
+```tsx
+const inputVariants = cva(
+  "flex h-10 w-full rounded-md border px-3 py-2 text-sm",
+  {
+    variants: {
+      hasError: {
+        true: "border-red-500 focus:ring-red-500",
+        false: "border-gray-300 focus:ring-mandu-primary",
+      },
+      isDisabled: {
+        true: "bg-gray-100 cursor-not-allowed opacity-50",
+        false: "bg-white",
+      },
+    },
+    defaultVariants: {
+      hasError: false,
+      isDisabled: false,
+    },
+  }
+);
+
+export function InputIsland({ error, disabled, ...props }: InputProps) {
+  return (
+    <input
+      className={inputVariants({
+        hasError: !!error,
+        isDisabled: disabled,
+      })}
+      disabled={disabled}
+      {...props}
+    />
+  );
+}
+```
+
+## Responsive Variants
+
+```tsx
+// 반응형은 Tailwind 클래스로 처리
+export function CardIsland({ className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        cardVariants({ variant: "default", padding: "md" }),
+        // 반응형 오버라이드
+        "md:p-8 lg:p-10",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## Slot Pattern과 조합
+
+```tsx
+// app/alert/client.tsx
+"use client";
+
+import { cva } from "class-variance-authority";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        info: "border-blue-200 bg-blue-50 text-blue-900",
+        success: "border-green-200 bg-green-50 text-green-900",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900",
+        error: "border-red-200 bg-red-50 text-red-900",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const iconVariants = cva("h-5 w-5", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      info: "text-blue-600",
+      success: "text-green-600",
+      warning: "text-yellow-600",
+      error: "text-red-600",
+    },
+  },
+});
+
+export const Alert = {
+  Root: ({ variant, className, ...props }) => (
+    <div className={cn(alertVariants({ variant }), className)} {...props} />
+  ),
+  Icon: ({ variant, className, ...props }) => (
+    <span className={cn(iconVariants({ variant }), className)} {...props} />
+  ),
+  Title: ({ className, ...props }) => (
+    <h5 className={cn("font-medium leading-none", className)} {...props} />
+  ),
+  Description: ({ className, ...props }) => (
+    <div className={cn("text-sm opacity-90", className)} {...props} />
+  ),
+};
+```
+
+Reference: [class-variance-authority](https://cva.style/docs)