Claude-skill-registry apply-shadcn

Overview

This skill applies shadcn/ui components to React pages and components while integrating with the project's custom theme defined in

frontend/src/index.css

.

When to Use This Skill

Use this skill when the user requests to:

• Style specific pages with shadcn/ui components
• Apply shadcn/ui to a list of components
• Add shadcn/ui styling to authentication pages, navigation, or other UI elements

The user will provide either:

• A list of page/component names to style (e.g., "Style Login.jsx, SignUp.jsx, and NavBar.jsx")
• A category of pages to style (e.g., "Style all authentication pages")

Workflow

Step 1: Create a Todo List

Create a todo list with one task per page or component that needs styling. Each task should be named after the file being styled (e.g., "Style Login.jsx", "Style NavBar.jsx").

Step 2: Install Required shadcn Components

Before styling any pages, ensure the necessary shadcn components are installed. Common components needed:

npx shadcn@latest add card input button table label separator navigation-menu

Adjust the component list based on what the pages require.

Step 3: Style Each Page or Component

For each page or component in the todo list, follow this process:

1. Mark the task as in_progress in the todo list

2. Read the existing file to understand its current structure and functionality

3. Use the MCP tool to get component examples: Call

   mcp__shadcn__get_item_examples_from_registries

   to retrieve usage examples for the shadcn components needed (e.g., Card, Input, Button, Table)

4. Review the examples to understand:

   • Proper component structure and composition
   • Correct props and patterns
   • Layout best practices

5. Apply shadcn styling with custom theme integration:

   • Replace existing HTML elements with shadcn components
   • Integrate custom CSS variables from

     frontend/src/index.css

     for colors
   • Maintain existing functionality and logic
   • Follow the theme integration guidelines below

6. Mark the task as completed in the todo list

7. Move to the next page or component

Step 4: Verify All Tasks Complete

After styling all pages, verify that every task in the todo list is marked as completed.

Step 5: Verify Setup

Run

npm run build

to validate imports, dependencies, and syntax

Theme Integration Guidelines

CRITICAL: The project uses custom CSS variables defined in

frontend/src/index.css

. When styling components that need custom colors, use these variables instead of shadcn's default theme classes.

Custom CSS Variables

Available custom variables from

frontend/src/index.css

:

• --color-primary-{50-950}

  - Primary color scale

• --color-secondary-{50-950}

  - Secondary color scale

• --color-accent-{50-950}

  - Accent color scale

• --color-success-{50-900}

  - Success colors

• --color-error-{50-900}

  - Error colors

Example: Styling Primary Buttons

Use custom CSS variables with Tailwind's arbitrary value syntax:

<Button
  className="w-full bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] text-white"
>
  Button Text
</Button>

Why use custom variables: The custom theme uses specific color values (e.g., purple hue at 250) that differ from shadcn's default theme. Using

bg-[var(--color-primary-600)]

ensures styled pages match the rest of the application.

Common shadcn Components Used

• card

  - Card, CardContent, CardDescription, CardHeader, CardTitle

• input

  - Input

• button

  - Button

• table

  - Table, TableBody, TableCell, TableHead, TableHeader, TableRow

• navigation-menu

  - Navigation menu components

• label

  - Label

• separator

  - Separator

Notes

• Always use the MCP tool before editing to understand proper component usage
• Preserve existing component functionality and logic
• Integrate custom theme variables for consistent styling
• Work through the todo list systematically, one page at a time
• Mark each task as completed immediately after finishing it