skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

shadcn-detection

Identify Radix UI or Base UI primitives from package.json and source code.

22|3|Updated Jan 10, 2026
Search Tags:#component library#shadcn/ui#frontend development#radix ui#base ui#primitive detection
One-click install
npx skills add https://github.com/fusengine/agents --skill shadcn-detection
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-detection
Source: https://github.com/fusengine/agents/tree/main/plugins/shadcn-expert/skills/shadcn-detection
Command: npx skills add https://github.com/fusengine/agents --skill shadcn-detection

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automatically determines whether a project uses Radix UI or Base UI as its underlying primitive library for shadcn/ui components, preventing integration issues.

Core Features & Use Cases

  • Primitive Identification: Analyzes package.json, components.json, import statements, and data attributes to accurately identify the primitive library.
  • Package Manager Detection: Detects the project's package manager (npm, yarn, pnpm, bun) for correct command execution.
  • Use Case: Before adding new shadcn/ui components to a React project, run this skill to confirm if you should expect Radix UI's asChild prop or Base UI's render prop, ensuring compatibility.

Quick Start

Run the shadcn-detection skill to identify the primitive library used in the current project.

Frequently Asked Questions about shadcn-detection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect if my shadcn/ui project uses Radix UI or Base UI primitives?▼

Detecting the shadcn/ui primitive library involves analyzing package.json dependencies, components.json configuration, source code import patterns, and HTML data attributes to identify whether Radix UI or Base UI is used.

Why does my shadcn/ui component expect an asChild prop instead of a render prop?▼

An asChild prop indicates Radix UI primitives, while a render prop indicates Base UI. Identifying the correct underlying primitive library prevents component integration issues when adding new shadcn/ui components.

How do I check which package manager my shadcn/ui project is using?▼

Checking the package manager involves analyzing project configuration to detect npm, yarn, pnpm, or bun, ensuring the correct execution runner is used for subsequent shadcn/ui CLI commands.

What is the best way to verify primitive compatibility before adding shadcn/ui components?▼

Verifying primitive compatibility requires analyzing components.json configuration and source code imports to confirm the underlying UI library, ensuring new shadcn/ui components match the existing primitive architecture.

What configuration files do I need to identify shadcn/ui primitive libraries?▼

Identifying shadcn/ui primitive libraries requires a package.json file for dependencies, a components.json configuration file, and accessible source code to analyze import patterns and HTML data attributes.

Related Skills

Explore More Software Engineering Skills→
kunmathkunmath
1

clerk-setup

Automate Clerk authentication setup for Next.js, Remix, Astro, or React SPA projects.

Community
Intermediate
kaiomaced0kaiomaced0

shadcn

Manage shadcn UI components and projects via CLI commands.

Community
Advanced
officebeatsofficebeats
8

shadcn-ui

Build accessible Tailwind CSS interfaces using shadcn/ui components.

Community
Intermediate
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced