Does it only look at package.json?

No, it uses a multi-signal approach including components.json styles, source code import patterns, and HTML data attributes for maximum accuracy.

Why is detection necessary before adding components?

Shadcn/ui can use different primitives like Radix or Base UI; detection ensures new components use the correct patterns, styles, and attributes for your specific setup.

How does it handle projects with both Radix and Base UI?

It identifies a 'Mixed' state and flags it as a migration case, allowing you to choose the target primitive rather than guessing.

Can it identify my package manager?

Yes, it analyzes lockfiles (bun, pnpm, yarn, npm) to ensure commands like 'npx' or 'pnpm dlx' are used correctly according to your environment.

Shadcn UI Primitive Detection

Name: Shadcn UI Primitive Detection
Author: fusengine

byfusengine

•

设计工具

Identifies the underlying primitive library (Radix UI or Base UI) within shadcn/ui projects to ensure framework-specific compatibility.

This skill automates the discovery phase of frontend development by analyzing a codebase to determine if it utilizes Radix UI or Base UI as its shadcn/ui foundation. By scanning package dependencies, configuration files, import patterns, and HTML data attributes, it provides a weighted accuracy score to identify the current stack, detect mixed migration states, and identify the project's package manager. This ensures that subsequent component generations or modifications align perfectly with the existing architecture, preventing style conflicts and breaking changes.

主要功能

01Weighted 5-step detection algorithm for high-accuracy stack identification

02Detection of data-attribute patterns like data-state versus data-open

03Automatic package manager identification via lockfile priority

044 GitHub stars

05Intelligent handling of mixed states to facilitate UI library migrations

06Deep analysis of package.json, components.json, and source code imports

使用场景

01Standardizing project discovery for agents working on complex React frontends

02Verifying the correct primitives before generating new shadcn/ui components

03Identifying legacy Radix UI implementations during a migration to Base UI

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents shadcn-detection

For use in Claude.ai and ChatGPT

Download Skill