Mandu Styling

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:

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:

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. 설치

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

2. app/globals.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);
}