fusengine/shadcn-detection
plugins/shadcn-expert/skills/shadcn-detection/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents shadcn-detectionInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:53 AM213.1s5 files scanned
SKILL.md
- name:
- shadcn-detection
- description:
- 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.
- shadcn-ui:
- 2.x
- radix-ui:
- 1.x
- base-ui:
- 1.x
- user-invocable:
- true
- allowed-tools:
- Read, Glob, Grep, Bash
- references:
- references/radix-patterns.md, references/baseui-patterns.md, references/detection-algorithm.md, references/templates/detection-script.md
- related-skills:
- shadcn-components, shadcn-migration
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 |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026