skills.rest
loayalsaid1
loayalsaid1COMMUNITY
Explore all skills by this author →
𝕏@loayalsaid1GitHub

shadcn

Manage shadcn/ui components and projects with styling and composition best practices.

Updated Feb 15, 2026
Search Tags:#react#component library#shadcn/ui#tailwind css#frontend development#ui components
One-click install
npx skills add https://github.com/loayalsaid1/Axonelix --skill shadcn-loayalsaid1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/loayalsaid1/Axonelix/tree/main/.github/skills/shadcn
Command: npx skills add https://github.com/loayalsaid1/Axonelix --skill shadcn-loayalsaid1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of working with shadcn/ui components, ensuring consistency, correctness, and efficient development of user interfaces.

Core Features & Use Cases

  • Component Management: Add, search, fix, debug, style, and compose shadcn/ui components.
  • Project Context: Provides essential project configuration like aliases, RSC status, Tailwind version, and more.
  • Best Practices Enforcement: Guides users on styling, form structure, component composition, and icon usage according to shadcn/ui principles.
  • Use Case: When developing a new feature that requires a modal dialog, this Skill can help you find the correct Dialog component, understand its props, ensure it has a DialogTitle, and apply the project's styling conventions.

Quick Start

Use the shadcn skill to add the 'button' and 'card' components to your project.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and style shadcn/ui components in a React project?▼

To add and style shadcn/ui components, use this skill to manage component installation, apply Tailwind CSS styling rules, and enforce correct composition best practices in your React project.

What is the best way to debug shadcn/ui component composition issues?▼

The best way to debug shadcn/ui component composition is by applying the skill's project context and documentation to identify missing elements like DialogTitle and enforce correct component composition and styling conventions.

Does this skill work with projects using a custom components.json file?▼

Yes, this skill applies to any project with a components.json file, utilizing that configuration to manage component registries, aliases, RSC status, and Tailwind version for consistent UI development.

How do I ensure my shadcn/ui forms follow the correct structure and styling?▼

To ensure your shadcn/ui forms follow the correct structure, this skill enforces specific styling rules, form structures, and icon usage according to shadcn/ui principles during component composition.

Can I use this skill to search for specific UI components like a modal dialog?▼

Yes, you can use this skill to search for specific UI components like a modal dialog, find the correct Dialog component, understand its props, and verify required accessibility elements like DialogTitle.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

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

Community
Advanced
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate
LeoTechProLeoTechPro
1

shadcn-ui

Integrate and manage shadcn/ui components in React applications via CLI.

Community
Intermediate