Menü
UI component library integration and accessibility patterns
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Canonical Mandu agent workflow. Use first in Mandu projects before direct source edits so Codex, Claude Code, Gemini CLI, and other agents follow the same context -> plan -> apply -> verify -> repair loop.
React composition patterns for Mandu applications. Use when designing Island components, managing shared state, or building reusable component APIs. Triggers on compound components, context providers, boolean props, or component architecture tasks.
Production deployment patterns for Mandu applications
File-system based routing for Mandu. Use when creating pages, API routes, layouts, or dynamic routes. Triggers on tasks involving app/ folder, page.tsx, route.ts, layout.tsx, [id], [...slug], or URL patterns.
Architecture guard system for Mandu. Use when checking layer dependencies, enforcing architecture rules, or validating file locations. Triggers on tasks involving architecture, layers, dependencies, or guard commands.
Island Hydration pattern for Mandu. Use when creating interactive components, client-side state, or partial hydration. Triggers on tasks involving "use client", client.tsx, useState, useEffect, Island, or hydration.
Basierend auf der SOC-Berufsklassifikation
| name | Mandu UI |
| description | UI component library integration and accessibility patterns |
| metadata | {"version":"1.0.0","author":"mandu"} |
| globs | ["components/ui/**/*.tsx","app/**/client.tsx"] |
Mandu Island 아키텍처에 UI 컴포넌트 라이브러리를 통합하는 가이드입니다.
This skill is a Domain addendum. It must not replace mandu-agent-workflow.
Use it only after mandu.agent.plan selects UI, design, styling, component, or hydration domains.
Canonical workflow step: plan -> apply -> verify.
Preferred MCP tools:
| Step | Tools |
|---|---|
| plan | mandu.agent.plan, mandu.design.get, mandu.component.list |
| apply | mandu.agent.apply, mandu.component.add |
| verify | mandu.agent.verify, mandu.design.check, mandu.lint |
| repair | mandu.agent.repair |
Allowed file edits:
components/ui/**/*.tsxVerification command:
mandu agent verify --changed --json --write
Common failures:
Repair path:
mandu agent repair --from .mandu/agent-verify.json --json
Primitives: Radix UI (headless, accessible)
Components: shadcn/ui (copy-paste, customizable)
Icons: Lucide React
Utilities: clsx, tailwind-merge, cva
Use these examples only after mandu.agent.plan selects UI library setup.
bunx shadcn-ui@latest init
✔ Would you like to use TypeScript? yes
✔ Which style would you like to use? Default
✔ Which color would you like to use as base? Slate
✔ Where is your global CSS file? app/globals.css
✔ Do you want to use CSS variables? yes
✔ Where is your tailwind.config located? tailwind.config.ts
✔ Configure import alias for components? @/components
✔ Configure import alias for utils? @/lib/utils
# 개별 컴포넌트
bunx shadcn-ui@latest add button
bunx shadcn-ui@latest add card
bunx shadcn-ui@latest add dialog
# 여러 컴포넌트
bunx shadcn-ui@latest add button card dialog input
// app/user-settings/client.tsx
"use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
export function UserSettingsIsland() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Settings</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>User Settings</DialogTitle>
</DialogHeader>
{/* Settings form */}
</DialogContent>
</Dialog>
);
}
components/
├── ui/ # shadcn/ui 컴포넌트
│ ├── button.tsx
│ ├── card.tsx
│ ├── dialog.tsx
│ └── ...
└── islands/ # 커스텀 Island 컴포넌트
├── user-menu.tsx
└── ...
| Category | Description | Rules |
|---|---|---|
| Library | 라이브러리 설정 | 2 |
| Accessibility | 접근성 패턴 | 2 |
| Integration | Island 통합 | 2 |
→ 세부 규칙은 rules/ 폴더 참조