Use when building web-specific UI components, forms, data tables, or rich menus for Vite/React. Triggers on "add component", "create form", "build table", "web UI", "shadcn", or any web frontend component work. Starts local pattern registry and enforces @my-patterns > @reui > @shadcn priority.
/plugin marketplace add cmtkdot/xanbzs-toolkit/plugin install cmtkdot-xanbzs-toolkit@cmtkdot/xanbzs-toolkitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/PATTERNS_GUIDE.mdBuild web-specific UI components using shadcn MCP tools with custom pattern registries.
Before ANY component work, run:
shadcn-patterns
This starts the local @my-patterns registry at http://localhost:3000. Without it, custom pattern searches fail silently.
| Priority | Registry | Patterns | Reason |
|---|---|---|---|
| š„ First | @my-patterns | 1,105+ | Project-specific, theme-integrated, WCAG compliant |
| š„ Second | @reui | Professional | Rich variants, modern patterns |
| š„ Third | @shadcn | Standard | Official fallback |
mcp-cli call shadcn/search_items_in_registries '{"query": "button", "registries": ["@my-patterns", "@reui", "@shadcn"]}'
Always include all three registries. Never search only @shadcn.
mcp-cli call shadcn/get_item_examples_from_registries '{"item": "@my-patterns/pattern-button-1", "includeCode": true}'
Review structure before installing. This prevents wasted installs.
pnpm dlx shadcn@latest add @my-patterns/pattern-button-1
mcp-cli call shadcn/get_audit_checklist '{"items": ["@my-patterns/pattern-button-1"]}'
Always run audit. Catches missing dependencies, import issues, TypeScript errors.
| Need | MCP Tool |
|---|---|
| Find components | shadcn/search_items_in_registries |
| View examples | shadcn/get_item_examples_from_registries |
| Get install command | shadcn/get_add_command_for_items |
| Verify install | shadcn/get_audit_checklist |
| List registries | shadcn/get_project_registries |
@shadcn registryshadcn-patterns firstAll of these mean: Start over, follow the workflow.
| Use shadcn MCP | Use Tamagui |
|---|---|
| Complex data tables | Simple cross-platform UI |
| Rich form components | Layout primitives (XStack/YStack) |
| Web-specific features | Mobile + web shared components |
| Advanced menus/dialogs | Basic buttons, cards |
@my-patterns returns empty?
ā Run shadcn-patterns first, verify curl http://localhost:3000/r/pattern-button-1.json
Registry not in project?
ā Check components.json has registry configured
.claude/references/shadcn-mcp/shadcn-mcp-workflow.mdreferences/PATTERNS_GUIDE.mddocs/tools/shadcn-mcp/REUI_LLMS.txtThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.