@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-styling/rules/style-component-slots.md

@@ -0,0 +1,255 @@
+---
+title: Slot-based Style Customization
+impact: HIGH
+impactDescription: Flexible style overrides for reusable components
+tags: styling, slots, customization, override
+---
+
+## Slot-based Style Customization
+
+**Impact: HIGH (Flexible style overrides for reusable components)**
+
+컴포넌트의 특정 부분만 스타일을 오버라이드할 수 있는 slot 패턴입니다.
+
+## classNames prop 패턴
+
+```tsx
+// app/input/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface InputClassNames {
+  root?: string;
+  label?: string;
+  input?: string;
+  helper?: string;
+  error?: string;
+}
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  helper?: string;
+  error?: string;
+  classNames?: InputClassNames;
+}
+
+export function InputIsland({
+  label,
+  helper,
+  error,
+  classNames,
+  className,
+  ...props
+}: InputProps) {
+  return (
+    <div className={cn("space-y-2", classNames?.root)}>
+      {label && (
+        <label
+          className={cn(
+            "text-sm font-medium leading-none",
+            classNames?.label
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          error && "border-destructive focus-visible:ring-destructive",
+          classNames?.input,
+          className
+        )}
+        {...props}
+      />
+
+      {helper && !error && (
+        <p className={cn("text-sm text-muted-foreground", classNames?.helper)}>
+          {helper}
+        </p>
+      )}
+
+      {error && (
+        <p className={cn("text-sm text-destructive", classNames?.error)}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+## 사용 예시
+
+```tsx
+<InputIsland
+  label="Email"
+  placeholder="you@example.com"
+  classNames={{
+    root: "max-w-md",
+    label: "text-blue-600",
+    input: "border-2",
+    helper: "italic",
+  }}
+/>
+```
+
+## styles prop 패턴
+
+```tsx
+// app/card/client.tsx
+"use client";
+
+interface CardStyles {
+  root?: React.CSSProperties;
+  header?: React.CSSProperties;
+  content?: React.CSSProperties;
+  footer?: React.CSSProperties;
+}
+
+interface CardProps {
+  styles?: CardStyles;
+  // ...
+}
+
+export function CardIsland({ styles, children }: CardProps) {
+  return (
+    <div className="rounded-lg border" style={styles?.root}>
+      {children}
+    </div>
+  );
+}
+```
+
+## slotProps 패턴 (고급)
+
+```tsx
+// app/modal/client.tsx
+"use client";
+
+interface SlotProps<T extends React.ElementType = "div"> {
+  component?: T;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface ModalSlotProps {
+  root?: SlotProps;
+  overlay?: SlotProps;
+  content?: SlotProps<"div" | "form">;
+  header?: SlotProps;
+  body?: SlotProps;
+  footer?: SlotProps;
+}
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  slotProps?: ModalSlotProps;
+  children: React.ReactNode;
+}
+
+export function ModalIsland({ open, onClose, slotProps, children }: ModalProps) {
+  if (!open) return null;
+
+  const OverlayComponent = slotProps?.overlay?.component || "div";
+  const ContentComponent = slotProps?.content?.component || "div";
+
+  return (
+    <div
+      className={cn("fixed inset-0 z-50", slotProps?.root?.className)}
+      style={slotProps?.root?.style}
+    >
+      <OverlayComponent
+        className={cn(
+          "fixed inset-0 bg-black/50",
+          slotProps?.overlay?.className
+        )}
+        style={slotProps?.overlay?.style}
+        onClick={onClose}
+      />
+
+      <ContentComponent
+        className={cn(
+          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-full max-w-lg rounded-lg bg-background p-6 shadow-lg",
+          slotProps?.content?.className
+        )}
+        style={slotProps?.content?.style}
+      >
+        {children}
+      </ContentComponent>
+    </div>
+  );
+}
+```
+
+## 사용 예시 (고급)
+
+```tsx
+<ModalIsland
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  slotProps={{
+    overlay: {
+      className: "backdrop-blur-sm",
+    },
+    content: {
+      component: "form",
+      className: "max-w-2xl",
+      style: { maxHeight: "80vh" },
+    },
+  }}
+>
+  <form onSubmit={handleSubmit}>...</form>
+</ModalIsland>
+```
+
+## Tailwind merge로 안전한 오버라이드
+
+```tsx
+// cn 함수가 충돌을 해결
+<button
+  className={cn(
+    "px-4 py-2 bg-blue-500",  // 기본
+    className                   // 오버라이드: "px-6" → px-6 적용
+  )}
+/>
+```
+
+## 우선순위 명확화
+
+```tsx
+// 1. 기본 스타일 (lowest)
+// 2. variant 스타일
+// 3. classNames prop
+// 4. className prop (highest)
+
+export function Button({
+  variant,
+  classNames,
+  className,
+  ...props
+}) {
+  return (
+    <button
+      className={cn(
+        // 1. Base
+        "inline-flex items-center",
+        // 2. Variant
+        buttonVariants({ variant }),
+        // 3. classNames slot
+        classNames?.button,
+        // 4. className (최우선)
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+Reference: [Material UI sx prop](https://mui.com/system/getting-started/the-sx-prop/)

package/src/resources/skills/mandu-styling/rules/style-component-tokens.md

@@ -0,0 +1,205 @@
+---
+title: Design Tokens
+impact: HIGH
+impactDescription: Consistent design system foundation
+tags: styling, tokens, design-system, variables
+---
+
+## Design Tokens
+
+**Impact: HIGH (Consistent design system foundation)**
+
+디자인 토큰을 사용하여 일관된 스타일 시스템을 구축하세요.
+
+## CSS Variables 기반 토큰
+
+```css
+/* app/globals.css */
+@layer base {
+  :root {
+    /* Colors - HSL format for opacity support */
+    --mandu-background: 0 0% 100%;
+    --mandu-foreground: 222.2 84% 4.9%;
+
+    --mandu-card: 0 0% 100%;
+    --mandu-card-foreground: 222.2 84% 4.9%;
+
+    --mandu-primary: 221.2 83.2% 53.3%;
+    --mandu-primary-foreground: 210 40% 98%;
+
+    --mandu-secondary: 210 40% 96.1%;
+    --mandu-secondary-foreground: 222.2 47.4% 11.2%;
+
+    --mandu-muted: 210 40% 96.1%;
+    --mandu-muted-foreground: 215.4 16.3% 46.9%;
+
+    --mandu-accent: 210 40% 96.1%;
+    --mandu-accent-foreground: 222.2 47.4% 11.2%;
+
+    --mandu-destructive: 0 84.2% 60.2%;
+    --mandu-destructive-foreground: 210 40% 98%;
+
+    --mandu-border: 214.3 31.8% 91.4%;
+    --mandu-input: 214.3 31.8% 91.4%;
+    --mandu-ring: 221.2 83.2% 53.3%;
+
+    /* Spacing */
+    --mandu-spacing-xs: 0.25rem;
+    --mandu-spacing-sm: 0.5rem;
+    --mandu-spacing-md: 1rem;
+    --mandu-spacing-lg: 1.5rem;
+    --mandu-spacing-xl: 2rem;
+
+    /* Typography */
+    --mandu-font-sans: ui-sans-serif, system-ui, sans-serif;
+    --mandu-font-mono: ui-monospace, monospace;
+
+    --mandu-text-xs: 0.75rem;
+    --mandu-text-sm: 0.875rem;
+    --mandu-text-base: 1rem;
+    --mandu-text-lg: 1.125rem;
+    --mandu-text-xl: 1.25rem;
+
+    /* Borders */
+    --mandu-radius-sm: 0.25rem;
+    --mandu-radius-md: 0.5rem;
+    --mandu-radius-lg: 0.75rem;
+    --mandu-radius-full: 9999px;
+
+    /* Shadows */
+    --mandu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --mandu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --mandu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+    /* Transitions */
+    --mandu-transition-fast: 150ms;
+    --mandu-transition-normal: 200ms;
+    --mandu-transition-slow: 300ms;
+  }
+
+  .dark {
+    --mandu-background: 222.2 84% 4.9%;
+    --mandu-foreground: 210 40% 98%;
+
+    --mandu-card: 222.2 84% 4.9%;
+    --mandu-card-foreground: 210 40% 98%;
+
+    --mandu-primary: 217.2 91.2% 59.8%;
+    --mandu-primary-foreground: 222.2 47.4% 11.2%;
+
+    --mandu-secondary: 217.2 32.6% 17.5%;
+    --mandu-secondary-foreground: 210 40% 98%;
+
+    --mandu-muted: 217.2 32.6% 17.5%;
+    --mandu-muted-foreground: 215 20.2% 65.1%;
+
+    --mandu-accent: 217.2 32.6% 17.5%;
+    --mandu-accent-foreground: 210 40% 98%;
+
+    --mandu-destructive: 0 62.8% 30.6%;
+    --mandu-destructive-foreground: 210 40% 98%;
+
+    --mandu-border: 217.2 32.6% 17.5%;
+    --mandu-input: 217.2 32.6% 17.5%;
+    --mandu-ring: 224.3 76.3% 48%;
+  }
+}
+```
+
+## Tailwind 토큰 연결
+
+```typescript
+// tailwind.config.ts
+export default {
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--mandu-background))",
+        foreground: "hsl(var(--mandu-foreground))",
+        card: {
+          DEFAULT: "hsl(var(--mandu-card))",
+          foreground: "hsl(var(--mandu-card-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--mandu-primary))",
+          foreground: "hsl(var(--mandu-primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--mandu-secondary))",
+          foreground: "hsl(var(--mandu-secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--mandu-muted))",
+          foreground: "hsl(var(--mandu-muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--mandu-accent))",
+          foreground: "hsl(var(--mandu-accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--mandu-destructive))",
+          foreground: "hsl(var(--mandu-destructive-foreground))",
+        },
+        border: "hsl(var(--mandu-border))",
+        input: "hsl(var(--mandu-input))",
+        ring: "hsl(var(--mandu-ring))",
+      },
+      borderRadius: {
+        sm: "var(--mandu-radius-sm)",
+        md: "var(--mandu-radius-md)",
+        lg: "var(--mandu-radius-lg)",
+      },
+      fontFamily: {
+        sans: ["var(--mandu-font-sans)"],
+        mono: ["var(--mandu-font-mono)"],
+      },
+    },
+  },
+};
+```
+
+## 토큰 사용 예시
+
+```tsx
+// 자동으로 다크모드 지원
+<div className="bg-background text-foreground">
+  <button className="bg-primary text-primary-foreground rounded-md">
+    Button
+  </button>
+</div>
+
+// HSL로 opacity 조절 가능
+<div className="bg-primary/50">
+  50% opacity primary
+</div>
+```
+
+## 토큰 타입 정의 (TypeScript)
+
+```typescript
+// types/tokens.ts
+export interface DesignTokens {
+  colors: {
+    background: string;
+    foreground: string;
+    primary: string;
+    secondary: string;
+    // ...
+  };
+  spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  radii: {
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+  };
+}
+```
+
+Reference: [Design Tokens W3C](https://www.w3.org/community/design-tokens/)