skills/fusengine/agents/shadcn-detection

shadcn-detection

SKILL.md

shadcn Detection

Agent Workflow (MANDATORY)

Before detection, use TeamCreate to spawn agents:

  1. fuse-ai-pilot:explore-codebase - Scan project structure
  2. 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

  1. ALWAYS run detection before any component work
  2. CHECK all 5 signals for maximum accuracy
  3. HANDLE mixed state as migration case, never ignore
  4. CACHE result for session duration, no re-detection needed
  5. 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
Weekly Installs
14
GitHub Stars
3
First Seen
Feb 28, 2026
Installed on
opencode14
gemini-cli14
codebuddy14
github-copilot14
codex14
kimi-cli14