Search and add shadcn/ui components from component library
Search and install shadcn/ui components with usage examples. Use when you need to add UI components like buttons, forms, or navigation to your Next.js project.
/plugin marketplace add vanman2024/ai-dev-marketplace/plugin install nextjs-frontend@ai-dev-marketplace<search-query>šØ EXECUTION NOTICE FOR CLAUDE
When you invoke this command via SlashCommand, the system returns THESE INSTRUCTIONS below.
YOU are the executor. This is NOT an autonomous subprocess.
Immediately after SlashCommand returns, start executing Phase 0, then Phase 1, etc.
See @CLAUDE.md section "SlashCommand Execution - YOU Are The Executor" for detailed explanation.
This commands has access to the following skills from the nextjs-frontend plugin:
To use a skill:
!{skill skill-name}
Use skills when you need:
Skills provide pre-built resources to accelerate your work.
CRITICAL: All generated files must follow security rules:
@docs/security/SECURITY-RULES.md
Key requirements:
your_service_key_here.env files with .gitignore.env.example with placeholders onlyArguments: $ARGUMENTS
Goal: Search shadcn/ui component library, display matching components, and add selected components to the project with configuration and usage examples.
Core Principles:
Phase 1: Discovery
Goal: Parse search query and validate project environment
Actions:
Parse $ARGUMENTS for search query. If empty, ask user what component they're looking for.
Verify this is a Next.js project with shadcn/ui: !{bash test -f components.json && echo "shadcn/ui detected" || echo "shadcn/ui not initialized"}
If components.json not found, suggest running initialization first.
Phase 2: Component Search
Goal: Search shadcn/ui component library and display results
Actions:
Task(description="Search shadcn/ui components", subagent_type="nextjs-frontend:ui-search-agent", prompt="You are the ui-search-agent. Search for shadcn/ui components matching '$ARGUMENTS'.
Search scope:
For each matching component, provide:
Documentation to fetch:
Deliverable: Formatted list of matching components with details")
Wait for agent to complete.
Phase 3: Component Selection
Goal: Let user choose which component to add
Actions:
Display search results in organized format.
Use AskUserQuestion to ask:
Parse user selection and validate it exists in search results.
Phase 4: Installation
Goal: Add selected component to the project
Actions:
Install component using shadcn/ui CLI: !{bash npx shadcn@latest add $COMPONENT_NAME -y}
Verify installation: !{bash test -f components/ui/$COMPONENT_NAME.tsx && echo "Component installed" || echo "Installation failed"}
Read installed component to understand structure: @components/ui/$COMPONENT_NAME.tsx
Phase 5: Usage Examples
Goal: Provide code examples showing how to use the component
Actions:
Display usage information:
Show where component is installed:
Suggest next steps:
Phase 6: Summary
Goal: Confirm successful installation and provide guidance
Actions:
Summary:
Quick start example:
Additional resources: