shadcn-detection
shadcn Detection
Agent Workflow (MANDATORY)
Before detection, use TeamCreate to spawn agents:
- fuse-ai-pilot:explore-codebase - Scan project structure
- fuse-ai-pilot:research-expert - Verify latest primitive patterns
After: Use results to configure component workflow.
Overview
| Feature | Description |
|---|---|
| Package scan | Detect @radix-ui/* or @base-ui/react |
| Config check | Analyze components.json style field |
| Import analysis | Scan source for import patterns |
| Attribute scan | Check data-state vs data-[open] |
| Package manager | Detect bun/npm/pnpm/yarn via lockfile |
Critical Rules
- ALWAYS run detection before any component work
- CHECK all 5 signals for maximum accuracy
- HANDLE mixed state as migration case, never ignore
- CACHE result for session duration, no re-detection needed
- DETECT package manager via lockfile priority order
Architecture
project/
├── package.json # Step 1: deps scan
├── components.json # Step 2: style field
├── bun.lockb|pnpm-lock.yaml|yarn.lock|package-lock.json # Step 5: PM
└── src/|components/|app/ # Step 3-4: imports + attrs
→ See detection-script.md for complete example
5-Step Detection Algorithm
| Step | Signal | Weight |
|---|---|---|
| 1 | package.json deps (@radix-ui/*, @base-ui/react) |
40% |
| 2 | components.json style field |
20% |
| 3 | Import patterns in source files | 25% |
| 4 | Data attributes (data-state vs data-[open]) |
15% |
| 5 | Package manager (lockfile → bunx/npx/pnpm dlx/yarn dlx) |
- |
Decision Table
| Radix Score | Base UI Score | Result | Action |
|---|---|---|---|
| >50 | 0 | Radix | Use Radix patterns |
| 0 | >50 | Base UI | Use Base UI patterns |
| >0 | >0 | Mixed | Migration needed |
| 0 | 0 | None | Fresh setup |
Best Practices
DO
- Run detection BEFORE any component work
- Check all 5 signals for accuracy
- Handle "mixed" state as migration case
DON'T
- Assume Radix without checking
- Skip components.json analysis
- Ignore data-attribute signals
Reference Guide
Concepts
| Topic | Reference | When to Consult |
|---|---|---|
| Radix Patterns | radix-patterns.md | Identifying Radix UI signals |
| Base UI Patterns | baseui-patterns.md | Identifying Base UI signals |
| Algorithm | detection-algorithm.md | Understanding scoring logic |
Templates
| Template | When to Use |
|---|---|
| detection-script.md | Running detection on a project |
More from fusengine/agents
laravel-architecture
Design Laravel app architecture with services, repositories, actions, and clean code patterns. Use when structuring projects, creating services, implementing DI, or organizing code layers.
97laravel-blade
Create Blade templates with components, slots, layouts, and directives. Use when building views, reusable components, or templating.
88laravel-livewire
Livewire 3 reactive components - wire:model, actions, events, Volt, Folio. Use when building reactive UI without JavaScript.
86nextjs-i18n
Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters.
59solid-php
SOLID principles for Laravel 12 and PHP 8.5. Files < 100 lines, interfaces separated, PHPDoc mandatory. Auto-detects Laravel and FuseCore architecture.
51laravel-testing
Write tests with Pest 3/PHPUnit, feature tests, unit tests, mocking, fakes, and factories. Use when testing controllers, services, models, or implementing TDD.
50