Agent-Skills.md

Agent Skills: UI Handler

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

UncategorizedID: aiskillstore/marketplace/ui-handler

Repository

aiskillstore/marketplace
aiskillstore
23014

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aiskillstore/marketplace/tree/HEAD/skills/aayushbaniya2006/ui-handler

Skill Files

Browse the full folder contents for ui-handler.

Download Skill

Loading file tree…

skills/aayushbaniya2006/ui-handler/SKILL.md

Skill Metadata

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.

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.