fusengine/react-shadcn
plugins/react-expert/skills/react-shadcn/SKILL.md
shadcn/ui for React with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.
$ install --global
skillsauthnpx skillsauth add fusengine/agents react-shadcnInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 4, 2026, 11:40 PM56.2s52 files scanned
SKILL.md
- name:
- react-shadcn
- description:
- shadcn/ui for React with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.
- shadcn-ui:
- 3.8.0
- react:
- 19
- tailwindcss:
- 4
- user-invocable:
- true
- references:
- references/installation.md, references/configuration.md, references/theming.md, references/button.md, references/input.md, references/label.md, references/textarea.md, references/card.md, references/select.md, references/checkbox.md, references/switch.md, references/radio-group.md, references/slider.md, references/toggle.md, references/toggle-group.md, references/input-otp.md, references/dialog.md, references/alert-dialog.md, references/sheet.md, references/drawer.md, references/popover.md, references/tooltip.md, references/hover-card.md, references/context-menu.md, references/collapsible.md, references/toast.md, references/alert.md, references/skeleton.md, references/progress.md, references/spinner.md, references/table.md, references/tabs.md, references/accordion.md, references/badge.md, references/avatar.md, references/separator.md, references/scroll-area.md, references/aspect-ratio.md, references/resizable.md, references/carousel.md, references/chart.md, references/dropdown.md, references/command.md, references/breadcrumb.md, references/navigation-menu.md, references/menubar.md, references/sidebar.md, references/pagination.md, references/calendar.md, references/field-patterns.md, references/form-examples.md
- related-skills:
- react-19, react-forms, tailwindcss, solid-react
shadcn/ui for React
Beautiful, accessible components built on Radix UI with Tailwind CSS styling.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Analyze existing components and patterns
- fuse-ai-pilot:research-expert - Verify latest shadcn/ui docs via Context7/Exa
- mcp__shadcn__* - Search registry for component availability
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Building UI components for React applications (Vite, CRA)
- Need accessible, customizable form components (inputs, selects, checkboxes)
- Implementing dialogs, sheets, drawers, or overlay patterns
- Creating data tables with sorting, filtering, and pagination
- Building navigation menus, sidebars, or command palettes
- Need toast notifications or alert feedback components
Why shadcn/ui
| Feature | Benefit | |---------|---------| | Copy/paste model | Components copied to your project, full ownership | | Radix UI foundation | Accessibility built-in, unstyled primitives | | Tailwind CSS styling | Utility-first, easy customization | | TanStack Form ready | Modern form library with Field pattern | | Lucide icons | Consistent, customizable icon set |
Critical Rules
- NEVER create components manually - Always install with
bunx --bun shadcn@latest add - TanStack Form only - NOT React Hook Form for all form implementations
- Radix UI primitives - Components built on Radix (NOT Base UI)
- Lucide icons - Default icon library, NOT Remix icons or others
- Field pattern - Use Field, FieldLabel, FieldError for form fields
- SOLID paths - Components at
@/modules/cores/shadcn/components/ui/
Architecture
Component Foundation
- Radix UI - Headless, accessible primitives (Dialog, Select, Popover, Tabs)
- Tailwind CSS v4 - Styling via utility classes, CSS-first config
- class-variance-authority - Variant management for component styles
- clsx + tailwind-merge - Conditional class composition via
cn()utility
Project Structure
Components installed to @/modules/cores/shadcn/components/ui/ following SOLID architecture. Utils at @/modules/cores/lib/utils.ts with cn() helper function.
MCP Server Integration
Create .mcp.json at project root for Claude Code integration with shadcn registry.
Available MCP Tools
mcp__shadcn__search_items_in_registries- Search available componentsmcp__shadcn__view_items_in_registries- View component source codemcp__shadcn__get_item_examples_from_registries- Get usage examplesmcp__shadcn__get_add_command_for_items- Get installation commands
See installation.md for complete MCP setup.
Component Categories
| Category | Components | Primary Reference | |----------|------------|-------------------| | Setup | Init, configuration, theming, icons | installation.md | | Forms | Button, Input, Field, Select, Checkbox, Switch, Slider | field-patterns.md | | Overlay | Dialog, Sheet, Drawer, Popover, Tooltip, HoverCard | dialog.md | | Feedback | Alert, Toast (Sonner), Progress, Skeleton, Spinner | toast.md | | Data Display | Table, Badge, Avatar, Calendar, Chart, Carousel | table.md | | Navigation | Breadcrumb, DropdownMenu, Command, Sidebar, Tabs | sidebar.md | | Layout | Card, Accordion, Separator, ScrollArea, Resizable | card.md |
Best Practices
- Field components - Use new Field pattern for consistent form field structure
- Client Components - React apps are client-side by default
- Sonner for toasts - Modern toast notifications over legacy toast
- MCP tools first - Use
mcp__shadcn__*to explore before implementing - Theming via CSS variables - Customize colors in
index.css:root - Accessibility - Rely on Radix UI keyboard navigation and ARIA
Reference Guide
| Need | Reference | |------|-----------| | Initial setup | installation.md, configuration.md | | Form patterns | field-patterns.md, form-examples.md | | Theme customization | theming.md | | Data tables | table.md | | Modal dialogs | dialog.md, alert-dialog.md | | Navigation | sidebar.md, navigation-menu.md |
Related Skills
fusengine/seo-entity
development
VerifiedTrustedCommunity
Use when optimizing entity-based / semantic SEO 2026. Covers entity maps, Google Knowledge Graph resolution, salience scoring, passage-level ranking, about/sameAs/knowsAbout schema, Cloud Natural Language API validation.
13SKILL.mdUpdated Jun 4, 2026
fusengine/seo
development
VerifiedTrustedCommunity
Use when running SEO, GEO, schema, Core Web Vitals, sitemap, hreflang, E-E-A-T, AI Overviews, technical SEO, or structured data tasks. Covers full-site audits, single-page analysis, schema markup, content quality, AI search optimization, local SEO, sitemap/robots, internal linking, semantic clustering, and search experience.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-sxo
development
VerifiedTrustedCommunity
Use when optimizing search experience (SXO). Covers intent matching, user personas, user stories, page-type analysis, dwell time, scroll depth, pogo-sticking prevention.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-local
development
VerifiedTrustedCommunity
Use when optimizing local SEO. Covers Google Business Profile, NAP consistency, citations, reviews acquisition, Local Pack ranking, location pages, LocalBusiness schema.
13SKILL.mdUpdated May 17, 2026