skills/smithery.ai/Create Shadcn Component

Create Shadcn Component

Installation
SKILL.md

Skill: Create Shadcn Component Extension

This skill guides the creation of composite or extended UI components in ATLAS. Unlike primitives (in components/ui), these are often specialized versions (e.g., a "SearchableUserSelect" or "StatusBadge") that combine logic with UI.

Execution Steps

1. Identify Component Type

Is it:

  • Pure UI: Just styling (e.g., a specific Card variant)? -> Place in components/ui/extension/ (create if needed).
  • Logic + UI: Connects to data? -> Place in components/[module]/ or components/common/.
  • Form Element: Input requiring validation? -> Must wrap React.forwardRef.

2. Component Template

Create the file [kebab-case-name].tsx. Use this standard pattern:

"use client"
Installs
–
First Seen
–
Create Shadcn Component from smithery.ai