@mandujs/mcp 0.38.12 → 0.39.0-beta.1

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

@@ -1,272 +0,0 @@
----
-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

@@ -1,167 +0,0 @@
----
-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

@@ -1,221 +0,0 @@
----
-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)