QwenClaw-with-Auth/skills/shadcn-ui-design/SKILL.md

# 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!** 🎨