skills.rest
konamgil
konamgilCOMMUNITY
Explore all skills by this author →
GitHub

Mandu UI

Integrate shadcn/ui and Radix UI components within Mandu Island architecture.

46|4|Updated Jan 21, 2026
Search Tags:#ui#accessibility#shadcn-ui#radix-ui#component-library#island
One-click install
npx skills add https://github.com/konamgil/mandu --skill mandu-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Mandu UI
Source: https://github.com/konamgil/mandu/tree/main/packages/mcp/src/resources/skills/mandu-ui
Command: npx skills add https://github.com/konamgil/mandu --skill mandu-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mandu UI provides a guided approach to integrating a reusable UI component library and enforcing accessibility patterns within Mandu Island architecture.

Core Features & Use Cases

  • UI Library Integration: Set up and customize shadcn/ui and Radix UI components to ensure consistent visuals and behavior.
  • Island-Compatible UI: Design components to work across server and client boundaries, with clear client islands for interactivity.
  • Accessibility-First: Implement WCAG-aligned patterns, focus management, ARIA semantics, and keyboard navigation.
  • Developer Experience: Offers quick-start commands, structured project organization, and example patterns for common UI needs.

Quick Start

Initialize the Mandu UI setup in your project and start building accessible, island-compatible components.

Frequently Asked Questions about Mandu UI

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate shadcn/ui components within an Island architecture?▼

To integrate shadcn/ui within an Island architecture, you apply headless primitives and server components while designating specific client islands for interactivity. This setup ensures consistent UI behavior across server and client boundaries.

What is the best way to implement accessibility patterns with Radix UI?▼

The best way to implement accessibility patterns with Radix UI is to apply WCAG-aligned guidelines, manage focus, define ARIA semantics, and enable keyboard navigation. This ensures components remain accessible across all interactive boundaries.

Can I use headless UI primitives in server components without breaking interactivity?▼

Yes, you can use headless UI primitives in server components by isolating interactivity within designated client islands. This architecture preserves server-side benefits while maintaining full interactive functionality and accessibility patterns.

How do I set up and customize a UI component library for Island-compatible client components?▼

You set up and customize a UI component library for Island-compatible client components by using provided quick-start commands, structured folder organization, and usage conventions. This ensures consistent visuals and behavior across your application.

Why does my UI component lose accessibility features when crossing server and client boundaries?▼

Components lose accessibility features across server and client boundaries when focus management, ARIA semantics, and keyboard navigation patterns are not correctly applied within the client island. Enforcing WCAG-aligned patterns ensures accessibility remains intact.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
pimcorepimcore
13

pimcore-studio-ui-react-components

Standardize Pimcore Studio UI React component structure with .styles.tsx files and interfaces.

Official
Advanced
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
konamgilkonamgil
46

mandu-hydration

Implement Mandu island hydration patterns for partial client-side interactivity.

Community
Advanced