@mandujs/mcp 0.38.12 → 0.39.0-beta.1

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

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

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