Shadcn detection
Skill fusengine/agents/plugins/shadcn-expert/skills/shadcn-detection
Redefining development through cognitive automation and collaborative agent systems.
npx -y skills add fusengine/agents --skill shadcn-detectionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Detect whether a project uses Radix UI or Base UI as shadcn/ui primitives. Analyzes package.json, components.json, imports, and data attributes to determine the primitive library in use. Use when: determining which primitive a project uses before any shadcn component work or migration.
SKILL.md
3.5 KB, as published. Nobody here has run it
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 |