Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/konamgil/mandu/mandu-compositionnpx skills add konamgil/mandu --skill mandu-compositiongit clone --depth 1 https://github.com/konamgil/manduWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/konamgil/mandu/mandu-composition)<a href="https://agentmods.dev/skills/konamgil/mandu/mandu-composition"><img src="https://agentmods.dev/badge/skills/konamgil/mandu/mandu-composition.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.01061 |
| Opus 5 | $0.00024 | $0.00531 |
| Sonnet 5 | $0.00010 | $0.00212 |
| Haiku 4.5 | $0.00005 | $0.00106 |
Grade A, and why
mandu-composition scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 132 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mandu Composition
Mandu 애플리케이션을 위한 React 컴포지션 패턴 가이드. Island 컴파운드 컴포넌트, 상태 관리 인터페이스, Provider 패턴, slot-client 분리를 다룹니다. Vercel의 Composition Patterns를 Mandu 컨텍스트로 변환하여 적용합니다.
Agent Workflow Contract
This skill is a Domain addendum. It must not replace mandu-agent-workflow.
Use it only after mandu.agent.plan selects composition, UI, hydration, slot, or component domains.
Canonical workflow step: plan -> apply -> verify.
Preferred MCP tools:
| Step | Tools |
|---|---|
| plan | mandu.agent.plan, mandu.design.get, mandu.island.list |
| apply | mandu.agent.apply |
| verify | mandu.agent.verify, mandu.design.check, mandu.slot.validate |
| repair | mandu.agent.repair |
Allowed file edits:
- Island/client component files named in the plan
- Provider/state modules scoped to the target feature
- Slot-client boundaries only when the plan includes slot or hydration domains
Verification command:
mandu agent verify --changed --json --write
Common failures:
- Refactoring component APIs without checking island/client boundaries
- Adding shared state providers broader than the planned feature
- Mixing slot server logic into client composition files
Repair path:
mandu agent repair --from .mandu/agent-verify.json --json
When to Apply
Reference these guidelines when:
- Designing Island component architecture
- Managing shared state between Islands
- Building reusable component APIs
- Refactoring components with boolean prop proliferation
- Working with compound components or context providers
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Architecture | HIGH | comp-arch- |
| 2 | State Management | HIGH | comp-state- |
| 3 | Island Patterns | MEDIUM | comp-island- |
| 4 | Implementation Patterns | MEDIUM | comp-pattern- |
Quick Reference
1. Component Architecture (HIGH)
comp-arch-avoid-boolean-props- Use composition instead of boolean customizationcomp-arch-compound-components- Structure Islands as compound componentscomp-arch-explicit-variants- Create explicit variant components
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- metadata.json 803 B
- rules/_sections.md 1.0 KB
- rules/_template.md 1.6 KB
- rules/comp-arch-avoid-boolean-props.md 3.2 KB
- rules/comp-arch-compound-components.md 3.8 KB
- rules/comp-island-event.md 3.8 KB
- rules/comp-island-slot-split.md 4.8 KB
- rules/comp-pattern-children.md 3.5 KB
- rules/comp-state-context-interface.md 4.0 KB
- rules/comp-state-lift-state.md 3.5 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 132 lines · 48 tokens per session scan A 307b687bb54f
mandu-composition is a skill published in the GitHub repository konamgil/mandu (46 stars, last pushed 9d ago), licensed MPL-2.0. It adds 48 tokens to every session and 1,061 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
opengeni-sites
Build, inspect, edit, validate, and publish OpenGeni Sites as ordinary Bun + React source projects compiled to one self-contained HTML artifact. Use for interactive pages, dashboards, visualizations, workflows, and focused apps that may call workspace tools through the typed Site bridge.
tauri-django-react
Agents should invoke this skill for Tauri + Django + React desktop apps, especially backend lifecycle, CORS/auth, frontend integration, mandatory light/dark theming, German/English i18n, build packaging, dual desktop/web deployment, Rust commands, and platform-specific gotchas.
diceui
Build complex, accessible UI components using DiceUI — combobox, tags-input, sortable, kanban, data-table, file-upload, color-picker, and 40+ more. Use when the user wants to add any DiceUI component, mentions @diceui packages, asks for complex interactive components like combobox, sortable lists, kanban boards…
veryfront
Build Veryfront apps. Use for real-time errors, route preview, HMR control, and scaffolding pages/APIs/components/AI tools.
next-application-structure
Establishes or reviews directory layout, server/client boundaries, routing, data-fetching strategy, and testing structure for Next.js 14+ App Router TypeScript applications. Invoked when the user asks to structure a Next app, set App Router conventions, or review architecture for React parity.
react-application-structure
Establishes or reviews the directory layout, feature boundaries, state design, routing approach, and data-fetching conventions for a React 18+ TypeScript application. Invoked when the user asks to structure a React app, set up a scalable architecture, or review React project organization.