agentsclimarketplace
Sign in

Ui handler

Skill bg-szy/TOP-SKILLS/skills/marketplace/ui-handler

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

Install
npx -y skills add bg-szy/TOP-SKILLS --skill ui-handler

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

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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: 2 files

17.6 KB alongside SKILL.md

Keep looking

Skills are one crate of 326,758. 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.