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