multiAI Summary Pending
ui-handler
Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.
231 stars
Installation
Claude Code / Cursor / Codex
$curl -o ~/.claude/skills/ui-handler/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/aayushbaniya2006/ui-handler/SKILL.md"
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-handler/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-handler Compares
| Feature / Agent | ui-handler | Standard Approach |
|---|---|---|
| Platform Support | multi | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.
Which AI agents support this skill?
This skill is compatible with multi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# UI Handler
## Instructions
### 1. Installing Standard Components (Atoms)
Use the **Shadcn MCP** for foundational UI elements (buttons, inputs, dialogs).
1. **Action**: Ask the Shadcn MCP to add the component.
> "Add the button and dialog components using Shadcn MCP."
2. **Manual Fallback**: `pnpm dlx shadcn@latest add {component}`
### 2. Generating Complex Sections (Blocks)
Use the **21st.dev Magic MCP** for high-level sections (Landing pages, Heros, Dashboards).
1. **Action**: Prompt the 21st.dev MCP with a description.
> "Generate a modern SaaS hero section with a dark gradient background and email capture form."
2. **Location**: Place generated files in `src/components/sections/` or `src/components/website/`.
3. **Integration**: Import and use in your `page.tsx`.
### 3. Theming & Styling
Use **Shadcn MCP** or edit `src/app/globals.css` directly.
- **Theme Updates**: Ask Shadcn MCP to apply a specific theme or color palette.
> "Update the app theme to use a 'zinc' neutral base with 'blue' primary color."
- **CSS Variables**: We use CSS variables (often OKLCH) in `src/app/globals.css`. Ensure any new styles use these variables (e.g., `bg-background`, `text-primary`).
### 4. Creating Layouts
1. **Identify**: Header, Sidebar, Content Area.
2. **Compose**: Use atoms from `@/components/ui` and sections from `@/components/sections`.
3. **Co-location**: If a component is unique to a page, put it in `_components/` next to the page.
## Reference
For detailed architecture and best practices, see [reference.md](reference.md).