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
Templates
