How does the skill handle the difference between Radix and Base UI?

It uses a mapping table to translate component parts (e.g., DialogContent to Dialog.Popup) and applies the correct composition pattern, such as 'asChild' for Radix or 'render' for Base UI.

Can I use this to find existing components in my project?

Yes, the mandatory workflow includes an exploration phase where the agent uses the fuse-ai-pilot to scan your codebase for existing component implementations.

Why are MCP tools mandatory for this skill?

MCP tools allow the agent to query live shadcn registries to fetch the most up-to-date component code and installation commands, preventing errors caused by manual code entry.

Does this skill support the latest versions of shadcn/ui?

Yes, it is designed for shadcn-ui 2.x and supports both Radix UI 1.x and Base UI 1.x primitives.

Shadcn UI Expert Components

Name: Shadcn UI Expert Components
Author: fusengine

byfusengine

•

设计工具

Orchestrates the implementation and migration of shadcn/ui components using Radix and Base UI primitives with automated registry integration.

This skill empowers Claude to build, manage, and modernize shadcn/ui components by intelligently navigating the architectural differences between Radix UI and Base UI primitives. It automates the detection of project-specific configurations, ensures strict API consistency—such as mapping 'asChild' to 'render' patterns—and leverages specialized MCP tools to fetch the latest component source code directly from official registries. By enforcing mandatory agent workflows for research and validation, it ensures that every UI component is production-grade, accessible, and aligned with the latest shadcn/ui standards.

主要功能

01Agent-led workflow for codebase exploration, research, and technical validation

02Strict enforcement of composition patterns including asChild and render props

03Cross-primitive mapping for core components like Dialog, Select, and Popover

044 GitHub stars

05Automated primitive detection to distinguish between Radix and Base UI environments

06Real-time registry integration via MCP tools for fetching official source code

使用场景

01Migrating an existing shadcn/ui project from Radix UI to the newer Base UI primitives

02Implementing new accessible UI components that strictly follow official registry patterns

03Auditing design systems to ensure consistent naming conventions and API usage across the codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents shadcn-components

For use in Claude.ai and ChatGPT

Download Skill