Mandu Styling

Files (17)

• SKILL.md
• _sections.md
• _template.md
• metadata.json
• style-component-compound.md · rules/
• style-component-slots.md · rules/
• style-component-tokens.md · rules/
• style-island-animations.md · rules/
• style-island-scoping.md · rules/
• style-island-variants.md · rules/
• style-perf-critical.md · rules/
• style-perf-purge.md · rules/
• style-setup-modules.md · rules/
• style-setup-panda.md · rules/
• style-setup-tailwind.md · rules/
• style-tailwind-v4-gotchas.md · rules/
• style-theme-darkmode.md · rules/

SKILL.md (first lines)

# Mandu Styling Skill

Mandu Island 아키텍처에 최적화된 Tailwind CSS v4 스타일링 가이드입니다.

## Agent Workflow Contract

This skill is a Domain addendum. It must not replace `mandu-agent-workflow`.
Use it only after `mandu.agent.plan` selects styling, design, UI, hydration, or component domains.

Canonical workflow step: `plan -> apply -> verify`.

Preferred MCP tools:

| Step | Tools |
|------|-------|
| plan | `mandu.agent.plan`, `mandu.design.get` |
| apply | `mandu.agent.apply`, `mandu.design.patch` |
| verify | `mandu.agent.verify`, `mandu.design.check`, `mandu.lint` |
| repair | `mandu.agent.repair` |

Allowed file edits:

- CSS files named in the plan, especially `app/globals.css`
- Component className changes scoped to the target UI
- Theme tokens only after inspecting the project's design source

Verification command:

```bash
mandu agent verify --changed --json --write
```

Common failures:

- Installing or changing styling stacks before checking the existing project style
- Editing broad theme tokens for a local component issue
- Skipping design/lint verification after Tailwind v4 syntax changes

Repair path:

```bash
mandu agent repair --from .mandu/agent-verify.json --json
```

## 핵심 원칙

1. **Zero-Runtime**: 빌드 타임 CSS 생성 (SSR 호환)
2. **CSS-First**: JavaScript 설정 대신 CSS에서 테마 정의
3. **Island 격리**: 컴포넌트 간 스타일 충돌 방지
4. **Auto Integration**: Mandu가 Tailwind v4 자동 감지 및 빌드

## 권장 스택

```
Primary:    Tailwind CSS v4 + clsx/tailwind-merge
Alternative: CSS Modules (최소 의존성)
```

## Setup Examples

Use these examples only after `mandu.agent.plan` selects styling setup or migration.

### 1. 설치

```bash
bun add -d tailwindcss@^4.1 @tailwindcss/cli@^4.1
bun add clsx tailwind-merge
```

### 2. app/globals.css

```css
@import "tailwindcss";

@theme {
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  --radius-md: 0.5rem;
  --font-sans: 'Inter', system-ui, sans-serif;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}
```

### 3. Mandu 자동 통합

```
mandu dev 실행 시:
├─ @import "tailwindcss" 감지
├─ Tailwind CLI --watch 자동 시작
├─ 출력: .mandu/client/globals.css
├─ SSR에서 <link> 자동 주입
└─ CSS 변경 시 HMR 핫 리로드
```

## Island 스타일링

```tsx
// src/client/widgets/counter/Counter.island.tsx
"use client";

import { cn } from "@/shared/lib/utils";

export function CounterIsland({ variant = "default" }) {
  return (
    <button className={cn(
      "px-4 py-2 rounded-md font-medium transition-colors",
      variant === "default"
        ? "bg-primary text-primary-foreground hover:bg-primary/90"
        : "border border-primary text-primary hover:bg-primary/10"
    )}>
      Count: 0
    </button>
  );

From konamgil/mandu, MPL-2.0.

More from konamgil/mandu