+```
+
+### 3. Dark Mode Support
+```tsx
+// Use semantic color tokens
+
+```
+
+### 4. Loading States
+```tsx
+// Show skeleton during loading
+{isLoading ? (
+
+) : (
+
+)}
+```
+
+---
+
+## Integration with QwenClaw Rig
+
+### Using with Rig Agents
+
+```typescript
+import { RigClient } from "./rig";
+
+const rig = new RigClient({ host: "127.0.0.1", port: 8080 });
+
+// Create UI specialist agent
+const uiAgentId = await rig.createAgent({
+ name: "ui-designer",
+ preamble: `You are a UI expert specializing in shadcn/ui design patterns.
+
+ When generating UI components:
+ 1. Use shadcn/ui component patterns
+ 2. Follow accessibility guidelines
+ 3. Support dark mode
+ 4. Include responsive breakpoints
+ 5. Use Tailwind CSS for styling`,
+ provider: "qwen",
+ model: "qwen-plus",
+});
+
+// Generate UI
+const component = await rig.executePrompt(uiAgentId, `
+ Create a user profile card using shadcn/ui patterns.
+ Include avatar, name, role, and action buttons.
+`);
+```
+
+### Multi-Agent UI Workflow
+
+```typescript
+// Create UI council
+const councilId = await rig.createCouncil("UI Team", [
+ {
+ name: "designer",
+ preamble: "Expert in shadcn/ui design patterns and aesthetics",
+ },
+ {
+ name: "accessibility",
+ preamble: "Ensures WCAG compliance and accessibility best practices",
+ },
+ {
+ name: "developer",
+ preamble: "Implements clean, maintainable React code",
+ },
+]);
+
+// Generate complete UI
+const result = await rig.executeCouncil(councilId, `
+ Build a complete settings page with:
+ - Profile section
+ - Notifications preferences
+ - Security settings
+ - Theme toggle
+`);
+```
+
+---
+
+## Resources
+
+### Official
+- **Website**: https://ui.shadcn.com/
+- **GitHub**: https://github.com/shadcn/ui
+- **Documentation**: https://ui.shadcn.com/docs
+- **Components**: https://ui.shadcn.com/docs/components
+
+### Related
+- **Radix UI**: https://www.radix-ui.com/
+- **Tailwind CSS**: https://tailwindcss.com/
+- **Vercel**: https://vercel.com/
+
+---
+
+## Examples
+
+### Login Page
+```tsx
+export function LoginForm() {
+ return (
+
+
+ Welcome back
+
+ Enter your credentials to sign in
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Forgot password?
+
+
+
+ );
+}
+```
+
+### Dashboard Layout
+```tsx
+export function Dashboard() {
+ return (
+
+ {/* Sidebar */}
+
+
+ {/* Main content */}
+
+
+
+ {/* Stats */}
+
+
+
+ Total Users
+
+
+ 1,234
+
+
+ {/* More stat cards... */}
+
+
+ );
+}
+```
+
+---
+
+## Skill Metadata
+
+```yaml
+name: shadcn-ui-design
+version: 1.0.0
+category: design
+description: shadcn/ui design patterns and component generation
+author: shadcn (https://github.com/shadcn)
+license: MIT
+tags:
+ - ui
+ - design
+ - react
+ - tailwind
+ - components
+ - accessibility
+```
+
+---
+
+## Quick Reference
+
+### Button Variants
+- `default` - Primary action
+- `secondary` - Secondary action
+- `outline` - Tertiary action
+- `ghost` - Subtle action
+- `link` - Link-style action
+- `destructive` - Dangerous action
+
+### Input Sizes
+- `sm` - Small (h-9)
+- `default` - Medium (h-10)
+- `lg` - Large (h-11)
+
+### Dialog Triggers
+- `DialogTrigger` - Standard trigger
+- `asChild` - Use child as trigger
+
+### Toast Types
+- `default` - Standard notification
+- `destructive` - Error notification
+
+---
+
+**Skill ready for QwenClaw integration!** 🎨
diff --git a/skills/skills-index.json b/skills/skills-index.json
index cab1e50..8844f7a 100644
--- a/skills/skills-index.json
+++ b/skills/skills-index.json
@@ -1,7 +1,7 @@
{
- "version": "1.4.0",
+ "version": "1.4.1",
"lastUpdated": "2026-02-26",
- "totalSkills": 75,
+ "totalSkills": 76,
"sources": [
{
"name": "awesome-claude-skills",
@@ -37,6 +37,12 @@
"url": "https://spawner.vibeship.co/",
"skillsCount": 9,
"note": "Skill-based agent system with 50+ specialist agents (MCP integration)"
+ },
+ {
+ "name": "shadcn-ui-design",
+ "url": "https://github.com/shadcn/ui",
+ "skillsCount": 1,
+ "note": "shadcn/ui design patterns and component generation with React, Tailwind CSS, and Radix UI"
}
],
"skills": [
@@ -278,6 +284,13 @@
"source": "spawner.vibeship.co",
"integration": "MCP",
"skills": ["frontend-developer", "backend-developer", "devops-engineer", "ui-designer", "product-manager"]
+ },
+ {
+ "name": "shadcn-ui-design",
+ "category": "design",
+ "description": "shadcn/ui design patterns and component generation with React, Tailwind CSS, and Radix UI primitives",
+ "source": "shadcn/ui",
+ "features": ["50+ Components", "Accessible (WCAG)", "Dark Mode", "Responsive", "TypeScript", "Customizable"]
}
],
"categories": [