v1.4.1: Add shadcn/ui Design Skill
This commit is contained in:
admin
466
skills/shadcn-ui-design/SKILL.md
Normal file
466
skills/shadcn-ui-design/SKILL.md
Normal file
@@ -0,0 +1,466 @@
|
||||
# shadcn/ui Design Skill for QwenClaw
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides **shadcn/ui design patterns and component knowledge** to QwenClaw, enabling it to generate beautiful, accessible, and production-ready UI components using the shadcn/ui design system.
|
||||
|
||||
**Source:** https://github.com/shadcn/ui
|
||||
|
||||
---
|
||||
|
||||
## What is shadcn/ui?
|
||||
|
||||
**shadcn/ui** is a set of beautifully designed, customizable UI components built with:
|
||||
- **React** - Component framework
|
||||
- **Tailwind CSS** - Styling
|
||||
- **Radix UI** - Accessible primitives
|
||||
- **TypeScript** - Type safety
|
||||
|
||||
### Key Principles
|
||||
- **Open Code** - Copy/paste components into your project
|
||||
- **Customizable** - Full control over styles and behavior
|
||||
- **Accessible** - WCAG compliant components
|
||||
- **Modern** - Built with latest React patterns
|
||||
|
||||
---
|
||||
|
||||
## Components Available
|
||||
|
||||
### Forms & Input
|
||||
- **Form** - Form container with validation
|
||||
- **Input** - Text input fields
|
||||
- **Textarea** - Multi-line text input
|
||||
- **Checkbox** - Checkbox with labels
|
||||
- **Radio Group** - Radio button groups
|
||||
- **Select** - Dropdown selection
|
||||
- **Switch** - Toggle switch
|
||||
- **Slider** - Range slider
|
||||
- **Label** - Form labels
|
||||
|
||||
### Navigation
|
||||
- **Button** - Button variants (default, secondary, outline, ghost, link)
|
||||
- **Link** - Styled links
|
||||
- **Tabs** - Tab navigation
|
||||
- **Dropdown Menu** - Context menus
|
||||
- **Navigation Menu** - Main navigation
|
||||
- **Pagination** - Pagination controls
|
||||
- **Breadcrumb** - Breadcrumb navigation
|
||||
|
||||
### Feedback
|
||||
- **Alert** - Status messages
|
||||
- **Toast** - Toast notifications
|
||||
- **Progress** - Progress indicators
|
||||
- **Skeleton** - Loading skeletons
|
||||
- **Spinner** - Loading spinners
|
||||
- **Badge** - Status badges
|
||||
|
||||
### Data Display
|
||||
- **Card** - Card containers
|
||||
- **Table** - Data tables
|
||||
- **Avatar** - User avatars
|
||||
- **Calendar** - Date picker
|
||||
- **Command** - Command palette (cmd+k)
|
||||
|
||||
### Overlays
|
||||
- **Dialog** - Modal dialogs
|
||||
- **Sheet** - Side sheets
|
||||
- **Popover** - Popover overlays
|
||||
- **Tooltip** - Hover tooltips
|
||||
- **Hover Card** - Hover previews
|
||||
|
||||
### Layout
|
||||
- **Separator** - Visual dividers
|
||||
- **Scroll Area** - Custom scrollbars
|
||||
- **Resizable** - Resizable panels
|
||||
- **Aspect Ratio** - Maintain aspect ratios
|
||||
|
||||
---
|
||||
|
||||
## Usage in QwenClaw
|
||||
|
||||
### Basic Component Generation
|
||||
|
||||
```
|
||||
Use shadcn/ui skill to create a login form with:
|
||||
- Email input
|
||||
- Password input
|
||||
- Remember me checkbox
|
||||
- Submit button
|
||||
- Forgot password link
|
||||
```
|
||||
|
||||
### Complex UI Generation
|
||||
|
||||
```
|
||||
Use shadcn/ui patterns to build a dashboard with:
|
||||
- Sidebar navigation
|
||||
- Header with user menu
|
||||
- Stats cards
|
||||
- Recent activity table
|
||||
- Theme toggle
|
||||
```
|
||||
|
||||
### Component Customization
|
||||
|
||||
```
|
||||
Generate a shadcn/ui button with:
|
||||
- Primary variant
|
||||
- Large size
|
||||
- Custom color: blue-600
|
||||
- Icon: ArrowRight
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Colors
|
||||
```
|
||||
Background: bg-background
|
||||
Foreground: text-foreground
|
||||
Primary: bg-primary / text-primary
|
||||
Secondary: bg-secondary / text-secondary
|
||||
Muted: bg-muted / text-muted
|
||||
Accent: bg-accent / text-accent
|
||||
Destructive: bg-destructive / text-destructive
|
||||
```
|
||||
|
||||
### Typography
|
||||
```
|
||||
font-sans - Inter font family
|
||||
text-xs/sm/base/lg/xl/2xl - Font sizes
|
||||
font-normal/medium/semibold/bold - Font weights
|
||||
```
|
||||
|
||||
### Spacing
|
||||
```
|
||||
p-4 - Padding
|
||||
m-4 - Margin
|
||||
gap-4 - Gap
|
||||
w-full - Width
|
||||
h-full - Height
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
```
|
||||
rounded - Default (0.5rem)
|
||||
rounded-md - Medium (0.375rem)
|
||||
rounded-lg - Large (0.5rem)
|
||||
rounded-xl - Extra large (0.75rem)
|
||||
rounded-full - Full circle
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Form Pattern
|
||||
```tsx
|
||||
<form className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="Enter email" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full">Submit</Button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Card Pattern
|
||||
```tsx
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Content here
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
Footer actions
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Dialog Pattern
|
||||
```tsx
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Title</DialogTitle>
|
||||
<DialogDescription>Description</DialogDescription>
|
||||
</DialogHeader>
|
||||
Content
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Guidelines
|
||||
|
||||
### Always Include
|
||||
- `aria-label` for icon buttons
|
||||
- `htmlFor` on labels
|
||||
- `role` attributes where needed
|
||||
- Keyboard navigation support
|
||||
- Focus management
|
||||
- Screen reader announcements
|
||||
|
||||
### Color Contrast
|
||||
- Minimum 4.5:1 for normal text
|
||||
- Minimum 3:1 for large text
|
||||
- Don't rely on color alone
|
||||
|
||||
### Keyboard Support
|
||||
- Tab navigation
|
||||
- Enter/Space for buttons
|
||||
- Escape for dialogs
|
||||
- Arrow keys for menus
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Component Composition
|
||||
```tsx
|
||||
// Good: Compose small components
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
<Icon className="mr-2" />
|
||||
Title
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
// Avoid: Monolithic components
|
||||
```
|
||||
|
||||
### 2. Responsive Design
|
||||
```tsx
|
||||
// Mobile-first approach
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
```
|
||||
|
||||
### 3. Dark Mode Support
|
||||
```tsx
|
||||
// Use semantic color tokens
|
||||
<div className="bg-background text-foreground">
|
||||
```
|
||||
|
||||
### 4. Loading States
|
||||
```tsx
|
||||
// Show skeleton during loading
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-4 w-full" />
|
||||
) : (
|
||||
<Content />
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Welcome back</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your credentials to sign in
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input id="password" type="password" />
|
||||
</div>
|
||||
<Button className="w-full">Sign In</Button>
|
||||
</CardContent>
|
||||
<CardFooter className="justify-center">
|
||||
<Link href="/forgot" className="text-sm text-muted-foreground">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Dashboard Layout
|
||||
```tsx
|
||||
export function Dashboard() {
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 border-r p-4">
|
||||
<nav className="space-y-2">
|
||||
<a href="/dashboard" className="block p-2 rounded hover:bg-accent">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="/settings" className="block p-2 rounded hover:bg-accent">
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-6">
|
||||
<header className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<Button variant="outline">Settings</Button>
|
||||
</header>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Total Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">1,234</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* More stat cards... */}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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!** 🎨
|
||||
Reference in New Issue
Block a user