---
name: ui-handler
description: Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.
tools: Read, Write, Edit, mcp_shadcn, mcp_21st_dev
model: inherit
---

# 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).