npm - @mandujs/mcp - Versions diffs - 0.9.19 → 0.9.21 - Mend

@mandujs/mcp 0.9.19 → 0.9.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/src/resources/skills/mandu-styling/rules/style-perf-critical.md ADDED Viewed

@@ -0,0 +1,209 @@
+---
+title: Critical CSS Extraction
+impact: MEDIUM
+impactDescription: Improves First Contentful Paint
+tags: styling, performance, critical, fcp
+---
+## Critical CSS Extraction
+**Impact: MEDIUM (Improves First Contentful Paint)**
+초기 렌더링에 필요한 CSS만 인라인으로 포함하여 FCP를 개선하세요.
+## Tailwind의 자동 최적화
+Tailwind CSS는 JIT 컴파일로 사용된 클래스만 생성합니다.
+```typescript
+// tailwind.config.ts
+export default {
+  content: [
+    "./app/**/*.{ts,tsx}",  // 실제 사용되는 파일만 스캔
+  ],
+  // ...
+};
+```
+## Above-the-fold CSS 분리
+```tsx
+// app/layout.tsx
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        {/* Critical CSS: 인라인 */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              /* Above-the-fold 스타일만 */
+              body { margin: 0; font-family: system-ui; }
+              .header { height: 64px; background: white; }
+              .hero { min-height: 50vh; }
+            `,
+          }}
+        />
+        {/* Non-critical CSS: 비동기 로드 */}
+        <link
+          rel="preload"
+          href="/styles/main.css"
+          as="style"
+          onLoad="this.onload=null;this.rel='stylesheet'"
+        />
+        <noscript>
+          <link rel="stylesheet" href="/styles/main.css" />
+        </noscript>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+## Lightning CSS 통합
+```bash
+bun add -d lightningcss
+```
+```typescript
+// scripts/build-css.ts
+import { transform, browserslistToTargets } from "lightningcss";
+import browserslist from "browserslist";
+const targets = browserslistToTargets(browserslist(">= 0.25%"));
+const css = await Bun.file("app/globals.css").text();
+const { code } = transform({
+  filename: "globals.css",
+  code: Buffer.from(css),
+  minify: true,
+  targets,
+  // Critical CSS 추출
+  analyzeDependencies: true,
+});
+await Bun.write("dist/styles.css", code);
+```
+## PostCSS 설정
+```javascript
+// postcss.config.js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production"
+      ? {
+          cssnano: {
+            preset: [
+              "default",
+              {
+                discardComments: { removeAll: true },
+              },
+            ],
+          },
+        }
+      : {}),
+  },
+};
+```
+## CSS Layer 우선순위
+```css
+/* globals.css */
+@layer reset, base, components, utilities;
+/* Critical: reset과 base만 인라인 */
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+/* Non-critical: 별도 파일 */
+@layer components {
+  /* ... */
+}
+@layer utilities {
+  /* ... */
+}
+```
+## Font 최적화
+```tsx
+// 폰트 preload로 FOIT/FOUT 방지
+<link
+  rel="preload"
+  href="/fonts/inter-var.woff2"
+  as="font"
+  type="font/woff2"
+  crossOrigin="anonymous"
+/>
+// 폰트 display 설정
+<style>
+  {`
+    @font-face {
+      font-family: 'Inter';
+      src: url('/fonts/inter-var.woff2') format('woff2');
+      font-display: swap;
+    }
+  `}
+</style>
+```
+## 성능 측정
+```typescript
+// 빌드 후 CSS 크기 확인
+import { gzipSync } from "bun";
+const css = await Bun.file("dist/styles.css").text();
+const gzipped = gzipSync(Buffer.from(css));
+console.log("CSS size:", css.length, "bytes");
+console.log("Gzipped:", gzipped.length, "bytes");
+// 목표: < 14KB (TCP 첫 라운드트립)
+```
+## Inline Critical + Lazy Load 패턴
+```tsx
+// components/StyleLoader.tsx
+"use client";
+import { useEffect } from "react";
+export function StyleLoader({ href }: { href: string }) {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    document.head.appendChild(link);
+  }, [href]);
+  return null;
+}
+// 사용
+<StyleLoader href="/styles/non-critical.css" />
+```
+Reference: [web.dev Critical CSS](https://web.dev/articles/extract-critical-css)

package/src/resources/skills/mandu-styling/rules/style-perf-purge.md ADDED Viewed

@@ -0,0 +1,192 @@
+---
+title: CSS Purge and Tree Shaking
+impact: MEDIUM
+impactDescription: Removes unused CSS for smaller bundles
+tags: styling, performance, purge, tree-shaking
+---
+## CSS Purge and Tree Shaking
+**Impact: MEDIUM (Removes unused CSS for smaller bundles)**
+미사용 CSS를 제거하여 번들 크기를 최소화하세요.
+## Tailwind 자동 Purge
+Tailwind v3+는 JIT 컴파일로 사용된 클래스만 생성합니다.
+```typescript
+// tailwind.config.ts
+export default {
+  // content 경로가 정확해야 함
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  // ...
+};
+```
+## Safelist 관리
+```typescript
+// tailwind.config.ts
+export default {
+  content: ["./app/**/*.{ts,tsx}"],
+  // 동적으로 생성되는 클래스는 safelist에 추가
+  safelist: [
+    // 정적 패턴
+    "bg-red-500",
+    "bg-green-500",
+    "bg-blue-500",
+    // 정규식 패턴
+    {
+      pattern: /bg-(red|green|blue)-(100|500|900)/,
+    },
+    // 변형 포함
+    {
+      pattern: /text-(red|green|blue)-500/,
+      variants: ["hover", "dark"],
+    },
+  ],
+};
+```
+## 동적 클래스 문제 방지
+```tsx
+// ❌ Tailwind가 감지 못함
+const color = "blue";
+<div className={`bg-${color}-500`} />
+// ✅ 전체 클래스명 사용
+const colorClasses = {
+  blue: "bg-blue-500",
+  red: "bg-red-500",
+  green: "bg-green-500",
+};
+<div className={colorClasses[color]} />
+// ✅ cva 사용
+const badge = cva("px-2 py-1 rounded", {
+  variants: {
+    color: {
+      blue: "bg-blue-500",
+      red: "bg-red-500",
+      green: "bg-green-500",
+    },
+  },
+});
+```
+## PurgeCSS 수동 설정
+Tailwind 외 CSS 파일용:
+```bash
+bun add -d purgecss
+```
+```javascript
+// purgecss.config.js
+export default {
+  content: ["./app/**/*.tsx", "./components/**/*.tsx"],
+  css: ["./styles/legacy.css"],
+  output: "./dist/styles/",
+  // 유지할 선택자
+  safelist: {
+    standard: [/^data-/],
+    deep: [/^modal/],
+    greedy: [/tooltip/],
+  },
+  // 커스텀 추출기
+  extractors: [
+    {
+      extractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+      extensions: ["tsx", "ts"],
+    },
+  ],
+};
+```
+```bash
+bunx purgecss --config purgecss.config.js
+```
+## CSS Modules 최적화
+CSS Modules는 자동으로 스코프되지만, 미사용 클래스는 제거되지 않음:
+```bash
+bun add -d postcss-modules
+```
+```javascript
+// postcss.config.js
+export default {
+  plugins: {
+    "postcss-modules": {
+      generateScopedName: "[name]__[local]___[hash:base64:5]",
+      // 미사용 export 경고
+      getJSON: (cssFileName, json) => {
+        // 사용되지 않은 클래스 로깅
+        console.log(`CSS Modules in ${cssFileName}:`, Object.keys(json));
+      },
+    },
+  },
+};
+```
+## 번들 분석
+```bash
+# CSS 번들 크기 분석
+bun add -d source-map-explorer
+# 분석 실행
+bunx source-map-explorer dist/styles.css --html report.html
+```
+## 빌드 스크립트
+```typescript
+// scripts/analyze-css.ts
+import { Glob } from "bun";
+const cssGlob = new Glob("dist/**/*.css");
+let totalSize = 0;
+for await (const file of cssGlob.scan()) {
+  const stat = await Bun.file(file).size;
+  console.log(`${file}: ${(stat / 1024).toFixed(2)} KB`);
+  totalSize += stat;
+}
+console.log(`\nTotal CSS: ${(totalSize / 1024).toFixed(2)} KB`);
+// 경고 임계값
+if (totalSize > 50 * 1024) {
+  console.warn("⚠️ CSS bundle exceeds 50KB");
+}
+```
+## CI에서 크기 체크
+```yaml
+# .github/workflows/ci.yml
+- name: Check CSS size
+  run: |
+    SIZE=$(stat -f%z dist/styles.css 2>/dev/null || stat -c%s dist/styles.css)
+    if [ $SIZE -gt 51200 ]; then
+      echo "CSS size ($SIZE bytes) exceeds 50KB limit"
+      exit 1
+    fi
+```
+Reference: [Tailwind Optimizing for Production](https://tailwindcss.com/docs/optimizing-for-production)

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

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

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

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