Can it add components from community registries?

Yes, it can search and add components from various registries and will automatically help refactor import aliases to match your project's directory structure.

How does it handle custom styling?

It enforces the use of semantic Tailwind tokens (like bg-primary) and utility classes, discouraging raw hex values to ensure theme consistency and dark mode support.

Does this skill handle different package managers?

Yes, it automatically detects and uses the correct runner—npm, pnpm, or bun—based on your project's specific packageManager configuration.

Can it help with React Server Components (RSC)?

Yes, it monitors the isRSC field in your project context to correctly apply 'use client' directives to components using state or browser APIs.

Does it support accessibility features?

Absolutely. It enforces critical accessibility rules such as requiring DialogTitle for screen readers and using proper data-invalid attributes for form validation.

shadcn/ui Manager

Name: shadcn/ui Manager
Author: ElementsAI-Dev

byElementsAI-Dev

•

デザインツール

Automates the management, styling, and composition of shadcn/ui components while enforcing design system best practices.

This skill acts as an intelligent assistant for building and maintaining modern React interfaces using shadcn/ui. It provides full lifecycle support for components—from initialization and search to debugging and complex composition—ensuring that all UI code adheres to strict accessibility, styling, and architectural rules. By analyzing the project's components.json and environment context, it streamlines the integration of UI registries, handles semantic coloring with Tailwind CSS, and ensures accessible form structures, allowing developers to focus on application logic while maintaining high-quality design standards.

主な機能

01Project Context Awareness: Detects import aliases, React Server Components (RSC) settings, and framework-specific configurations for accurate code generation.

02Component Lifecycle Management: Effortlessly add, search, and update shadcn components using the project's specific package manager.

03Smart UI Composition: Provides expert guidance on nesting components, using asChild patterns, and utilizing existing primitives instead of custom markup.

04Design System Enforcement: Automatically applies semantic coloring, Tailwind best practices, and standardized layout patterns like gap over space-y.

05Automated Accessibility: Enforces ARIA attributes, screen-reader labels, and mandatory titles for overlays like Dialogs and Sheets.

062 GitHub stars

ユースケース

01Initializing new projects with specific shadcn presets and custom Tailwind configurations.

02Rapidly building accessible complex forms and dashboard layouts using standardized component patterns.

03Refactoring legacy UI code to follow modern shadcn/ui best practices and semantic styling.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add elementsai-dev/cognialauncher shadcn

For use in Claude.ai and ChatGPT

主な機能

01Project Context Awareness: Detects import aliases, React Server Components (RSC) settings, and framework-specific configurations for accurate code generation.

02Component Lifecycle Management: Effortlessly add, search, and update shadcn components using the project's specific package manager.

03Smart UI Composition: Provides expert guidance on nesting components, using asChild patterns, and utilizing existing primitives instead of custom markup.

04Design System Enforcement: Automatically applies semantic coloring, Tailwind best practices, and standardized layout patterns like gap over space-y.

05Automated Accessibility: Enforces ARIA attributes, screen-reader labels, and mandatory titles for overlays like Dialogs and Sheets.

062 GitHub stars

ユースケース

01Initializing new projects with specific shadcn presets and custom Tailwind configurations.

02Rapidly building accessible complex forms and dashboard layouts using standardized component patterns.

03Refactoring legacy UI code to follow modern shadcn/ui best practices and semantic styling.