agentsclimarketplace

Ui handler

Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/aayushbaniya2006/ui-handler

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install
npx -y skills add ComeOnOliver/skillshub --skill ui-handler

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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

SKILL.md

1.8 KB, 412 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it

11.4 KB alongside SKILL.md

GitHub clipped this repository’s file list, so this is at least 2 files and may be more.

Keep looking

Skills are one crate of 326,970. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.