Apply shadcn/ui components to React pages and components. This skill should be used when styling specific pages or components with shadcn/ui in a React project that has custom theming. The user will specify which pages or components to style.
Applies shadcn/ui components to React pages and components with custom theme integration. Use when user requests styling specific pages or components (e.g., "Style Login.jsx") and provides a list of files to style.
/plugin marketplace add otoshek/Claude-Code-Toolkit/plugin install claude-code-toolkit@claude-code-toolkitThis skill is limited to using the following tools:
README.mdThis skill applies shadcn/ui components to React pages and components while integrating with the project's custom theme defined in frontend/src/index.css.
Use this skill when the user requests to:
The user will provide either:
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").
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.
For each page or component in the todo list, follow this process:
Mark the task as in_progress in the todo list
Read the existing file to understand its current structure and functionality
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)
Review the examples to understand:
Apply shadcn styling with custom theme integration:
frontend/src/index.css for colorsMark the task as completed in the todo list
Move to the next page or component
After styling all pages, verify that every task in the todo list is marked as completed.
Run npm run build to validate imports, dependencies, and syntax
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.
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 colorsUse 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.
card - Card, CardContent, CardDescription, CardHeader, CardTitleinput - Inputbutton - Buttontable - Table, TableBody, TableCell, TableHead, TableHeader, TableRownavigation-menu - Navigation menu componentslabel - Labelseparator - SeparatorThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.