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
code
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 |