ui-handler

Provide reusable Shadcn MCP components and 21st.dev layout patterns for React/Next.js projects.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/alisonbessa/bluemoon --skill ui-handler
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-handler
Source: https://github.com/alisonbessa/bluemoon/tree/main/.claude/skills/ui-handler
Command: npx skills add https://github.com/alisonbessa/bluemoon --skill ui-handler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines UI development by providing standardized components and patterns (Shadcn MCP atoms/theme and 21st.dev blocks) to ensure consistency across projects.

Core Features & Use Cases

  • Reuse standard atoms (buttons, inputs, dialogs) via Shadcn MCP.
  • Build complex sections (landing pages, dashboards) with 21st.dev MCP.
  • Apply to new pages, layouts, and landing pages to maintain a cohesive UI and theming.

Quick Start

Create a landing page section with a dark theme and a sign-up form.

Frequently Asked Questions about ui-handler

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain UI consistency when building React components and landing pages?

Reusable UI components ensure consistency by applying standardized Shadcn MCP atoms and 21st.dev blocks, enforcing cohesive theming, structured layouts, and unified design tokens across React and Next.js applications.

What is the best way to build a landing page with a dark theme and sign-up form?

Building a landing page with a dark theme involves leveraging 21st.dev MCP blocks for complex sections and Shadcn MCP for form inputs, applying CSS variables to manage design tokens and ensure cohesive theming.

Can I use Shadcn MCP components for buttons and dialogs in a Next.js project?

Yes, you can use Shadcn MCP in a Next.js project to implement standard UI atoms like buttons, inputs, and dialogs, ensuring structured layouts and consistent component placement throughout your application.

Do I need specific tooling to apply design tokens and CSS variables for theming?

Yes, applying design tokens and CSS variables for theming requires integration with Shadcn MCP and 21st.dev tooling to properly guide component placement and maintain cohesive styling across your project.

When should I not use 21st.dev blocks for UI layout patterns?

You should avoid using 21st.dev blocks for UI layout patterns if your project lacks React or Next.js dependencies, as the tooling requires integration with these specific frameworks to function correctly.