From rwsdk
This skill should be used when the user wants to "add a shadcn component", "update shadcn components", "install shadcn", "fix shadcn", "setup shadcn in rwsdk", or manage shadcn/ui components in a RedwoodSDK project. Trigger on any mention of shadcn/ui combined with RedwoodSDK, including adding new components, updating existing components, troubleshooting component rendering issues, configuring components.json, ensuring RSC compliance for shadcn components, preserving custom modifications during updates, or setting up the shadcn MCP server. Also trigger when the user asks about "use client" directives for interactive shadcn components, Radix UI issues, or component backup/restore workflows. This skill detects custom components automatically and provides safe update workflows with backup/restore.
npx claudepluginhub softee-p/redwoodsdk-toolkit --plugin rwsdkThis skill uses the workspace's default tool permissions.
General-purpose skill for managing shadcn/ui components in ANY RedwoodSDK project with React Server Components (RSC). This skill detects custom components, handles updates while preserving customizations, and enforces RSC compliance patterns from RedwoodSDK documentation.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
General-purpose skill for managing shadcn/ui components in ANY RedwoodSDK project with React Server Components (RSC). This skill detects custom components, handles updates while preserving customizations, and enforces RSC compliance patterns from RedwoodSDK documentation.
Key capabilities:
Requirements:
rwsdk-docs skill (fetches latest shadcn guide from RedwoodSDK docs)This skill provides a safe workflow for ANY RedwoodSDK project:
rwsdk-docs skillCRITICAL: Before starting any component work, check if the shadcn MCP server is available.
Check for MCP server availability:
// Check if MCP tools are available:
// - mcp__shadcn__*
If NOT available:
If available or user declines:
pnpx shadcn@latest)Use the rwsdk-docs skill to fetch the latest shadcn/ui documentation for RedwoodSDK:
Ask rwsdk-docs skill for:
- Latest shadcn/ui setup guide for RedwoodSDK
- RSC (React Server Components) best practices
- Component usage patterns
- Common pitfalls and solutions
This ensures you have the most up-to-date information from the RedwoodSDK documentation.
Before any component work, analyze the user's specific project:
Read components.json to understand:
@/app/components/ui)"rsc": true for RedwoodSDK)List all shadcn components in the project's UI directory:
# Find all .tsx files in the UI components directory
ls src/app/components/ui/*.tsx # Adjust path based on components.json aliases
Scan each component file for customization indicators:
Fully Custom Components (never update via CLI):
Modified Components (backup before updating):
data-* attributes (e.g., data-slot, data-variant)Standard Components (safe to update):
Detection Script:
# For each component in src/app/components/ui/:
# 1. Check if component name exists in shadcn registry
# 2. Search for custom data-* attributes
# 3. Look for custom styling patterns
# 4. Check for non-standard exports
Output a summary for the user:
[INFO] Component Analysis:
Custom Components (never update via CLI):
- [Component Name] - [Reason: composition/custom logic]
Modified Components (backup before updating):
- [Component Name] - [Modifications: data-attributes/styling]
Standard Components (safe to update):
- [List of components]
Document findings in ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/references/customizations.md (create if doesn't exist).
For components with no customizations:
Using shadcn CLI:
# Detect package manager
PKG_MGR=$(
if [ -f "pnpm-lock.yaml" ]; then echo "pnpx"
elif [ -f "yarn.lock" ]; then echo "yarn dlx"
elif [ -f "package-lock.json" ]; then echo "npx"
else echo "npx"; fi
)
# Single component
$PKG_MGR shadcn@latest add input --overwrite
# Multiple components
$PKG_MGR shadcn@latest add input alert label --overwrite
Using shadcn MCP (if available):
Use MCP tool: mcp__shadcn__add_component
Parameters: component="input", overwrite=true
For projects with custom/modified components, use the automated workflow:
1. Backup custom/modified components:
bash ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/scripts/backup-components.sh
2. Update standard components:
# Via CLI or MCP as detected in Phase 0
$PKG_MGR shadcn@latest add [component-list] --overwrite
3. Restore custom/modified components:
bash ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/scripts/restore-components.sh
4. Validate:
# Detect package manager
PKG_MGR=$(
if [ -f "pnpm-lock.yaml" ]; then echo "pnpm"
elif [ -f "yarn.lock" ]; then echo "yarn"
elif [ -f "package-lock.json" ]; then echo "npm"
else echo "npm"; fi
)
# Type check
$PKG_MGR run types
# Build
$PKG_MGR run build
Run the safe-update script (detects package manager, backs up, updates, restores, validates):
bash ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/scripts/safe-update.sh
1. Check RedwoodSDK docs (via rwsdk-docs skill) for component-specific guidance
2. Add component:
Using shadcn CLI:
$PKG_MGR shadcn@latest add [component-name]
Using shadcn MCP (if available):
Use MCP tool: mcp__shadcn__add_component
Parameters: component="[component-name]"
3. Verify RSC compliance:
Check the newly added component for proper RSC usage:
// Only add "use client" if the component needs:
// - useState, useEffect, or other React hooks
// - Event handlers (onClick, onChange)
// - Browser APIs (window, document)
Server component pattern (preferred):
// No "use client" directive
import { Button } from "@/app/components/ui/button";
export function MyPage() {
return <Button>Click me</Button>;
}
Client component pattern (when needed):
"use client";
import { useState } from "react";
import { Dialog, DialogContent } from "@/app/components/ui/dialog";
export function MyDialog() {
const [open, setOpen] = useState(false);
return <Dialog open={open} onOpenChange={setOpen}>...</Dialog>;
}
With server functions:
"use client";
import { Button } from "@/app/components/ui/button";
import { myServerAction } from "./actions";
export function Form() {
return (
<form action={myServerAction}>
<Button type="submit">Save</Button>
</form>
);
}
4. Test the component:
# Type check
$PKG_MGR run types
# Build
$PKG_MGR run build
# Visual test
$PKG_MGR run dev
5. Document if customized:
If you add customizations, update ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/references/customizations.md with:
Verify proper configuration for RedwoodSDK:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york", // Or your preferred style
"rsc": true, // CRITICAL: Must be true for RSC support
"tsx": true,
"tailwind": {
"config": "",
"css": "src/app/styles.css", // Verify path
"baseColor": "neutral", // Or your preferred color
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/app/components",
"utils": "@/lib/utils",
"ui": "@/app/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide" // Or your preferred icon library
}
Critical setting: "rsc": true enables React Server Components support.
Verify paths match your project structure. Common variations:
src/app/components/ui OR src/components/uisrc/app/styles.css OR src/styles/globals.cssAfter any component operation, run:
# Detect package manager
PKG_MGR=$(
if [ -f "pnpm-lock.yaml" ]; then echo "pnpm"
elif [ -f "yarn.lock" ]; then echo "yarn"
elif [ -f "package-lock.json" ]; then echo "npm"
else echo "npm"; fi
)
# Generate types (if script exists)
if grep -q '"generate"' package.json; then
$PKG_MGR run generate
fi
# Type check
if grep -q '"types"' package.json; then
$PKG_MGR run types
fi
# Build
$PKG_MGR run build
Create a project-specific testing plan based on where components are used:
1. Identify key pages that use shadcn components:
# Search for component imports across the project
grep -r "from \"@/app/components/ui" src/ --include="*.tsx" --include="*.ts"
2. Test each page:
3. Common areas to test (adapt to your project):
"Component not working after update":
.shadcn-backup/ and compare differences$PKG_MGR run types"Type errors after adding component":
$PKG_MGR run generate (updates Cloudflare/framework types)"rsc": true in components.json"Component needs client interactivity but breaks as server component":
"use client" directive at the top of your component file"shadcn MCP not working":
"Custom components lost after update":
.shadcn-backup/ directoryrwsdk-docs skill${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/references/customizations.mdUse rwsdk-docs skill for latest best practices, but generally:
All scripts located in ${CLAUDE_PLUGIN_ROOT}/skills/rwsdk-shadcn-update/scripts/:
.shadcn-backup/.shadcn-backup/All scripts:
Customizing scripts for your project:
.shadcn-backup/ directory (gitignored by default)In this skill:
External resources (use rwsdk-docs skill):
shadcn/ui official:
This skill is designed to be general-purpose and can be shared publicly:
rwsdk-docs skillTo use in another project:
rwsdk-docs skill is availableContributing:
rwsdk-docs skill for framework-specific info