Agent skill
shadcn-detection
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/shadcn-detection
SKILL.md
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 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?