fusengine/shadcn-components
plugins/shadcn-expert/skills/shadcn-components/SKILL.md
Component patterns for shadcn/ui with both Radix UI and Base UI primitives. Covers API differences, mapping between primitives, and correct usage patterns. Use when: building or editing shadcn/ui components, mapping Radix vs Base UI APIs, or choosing composition patterns (asChild vs render).
$ install --global
skillsauthnpx skillsauth add fusengine/agents shadcn-componentsInstall 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: Jul 16, 2026, 2:55 AM329.6s4 files scanned
SKILL.md
- name:
- shadcn-components
- description:
- Component patterns for shadcn/ui with both Radix UI and Base UI primitives. Covers API differences, mapping between primitives, and correct usage patterns. Use when: building or editing shadcn/ui components, mapping Radix vs Base UI APIs, or choosing composition patterns (asChild vs render).
- shadcn-ui:
- 2.x
- radix-ui:
- 1.x
- base-ui:
- 1.x
- user-invocable:
- true
- allowed-tools:
- Read, Write, Edit, Glob, Grep, Task, mcp__shadcn__search_items_in_registries, mcp__shadcn__view_items_in_registries, mcp__shadcn__get_item_examples_from_registries, mcp__shadcn__get_add_command_for_items
- references:
- references/radix-components.md, references/baseui-components.md, references/templates/dialog-example.md
- related-skills:
- shadcn-detection, shadcn-registries
shadcn Components
Agent Workflow (MANDATORY)
Before component work, use TeamCreate to spawn agents:
- fuse-ai-pilot:explore-codebase - Find existing components
- fuse-ai-pilot:research-expert - Verify component APIs via Context7
- mcp__shadcn__search_items_in_registries - Search available components
After: Run fuse-ai-pilot:sniper for validation.
Overview
| Feature | Description | |---------|-------------| | Radix primitives | Default shadcn/ui since 2021 | | Base UI primitives | New option since late 2025 | | Component mapping | 1:1 mapping between both | | API differences | asChild vs render, naming |
Critical Rules
- ALWAYS detect primitive before component work (shadcn-detection)
- ALWAYS consult MCP before adding any component
- NEVER mix Radix and Base UI APIs in same component
- MATCH composition pattern to detected primitive
- USE registry source as truth, not manual code
Architecture
components/ui/
├── dialog.tsx # Adapted to detected primitive
├── select.tsx
├── accordion.tsx
└── ...
-> See dialog-example.md for complete component
MCP Usage (MANDATORY)
ALWAYS consult shadcn MCP before adding components:
mcp__shadcn__search_items_in_registries -> find component
mcp__shadcn__view_items_in_registries -> view source
mcp__shadcn__get_add_command_for_items -> get install command
Component Mapping Table
| Component | Radix Part | Base UI Part |
|-----------|-----------|--------------|
| Dialog | DialogContent | Dialog.Popup |
| Dialog | DialogOverlay | Dialog.Backdrop |
| Select | SelectContent | Select.Positioner + Select.Popup |
| Tooltip | TooltipContent | Tooltip.Positioner + Tooltip.Popup |
| Accordion | AccordionContent | Accordion.Panel |
| Popover | PopoverContent | Popover.Positioner + Popover.Popup |
| Menu | DropdownMenuContent | Menu.Positioner + Menu.Popup |
Composition Patterns
Radix: asChild
<Dialog.Trigger asChild>
<Button variant="outline">Open</Button>
</Dialog.Trigger>
Base UI: render
<Dialog.Trigger render={<Button variant="outline" />}>
Open
</Dialog.Trigger>
Reference Guide
Concepts
| Topic | Reference | When to Consult | |-------|-----------|-----------------| | Radix APIs | radix-components.md | Building with Radix primitives | | Base UI APIs | baseui-components.md | Building with Base UI primitives |
Templates
| Template | When to Use | |----------|-------------| | dialog-example.md | Creating Dialog components |
Best Practices
DO
- Detect primitive FIRST (use shadcn-detection)
- Consult MCP for component source before editing
- Follow existing naming conventions in project
- Use correct composition pattern for detected primitive
DON'T
- Mix asChild and render in same component
- Assume Radix without detection
- Manually write component internals (use MCP)
- Skip registry check before adding new components
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026