admin/QwenClaw-with-Auth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a9c39f53a401d38f43964e15c9f21a5b2908519d
QwenClaw-with-Auth/skills/shadcn-ui-design/SKILL.md

9.8 KiB
Raw Blame History

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

<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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
  <CardFooter>
    Footer actions
  </CardFooter>
</Card>

Dialog Pattern

<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

// Good: Compose small components
<Card>
  <CardHeader>
    <CardTitle>
      <Icon className="mr-2" />
      Title
    </CardTitle>
  </CardHeader>
</Card>

// Avoid: Monolithic components

2. Responsive Design

// Mobile-first approach
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

3. Dark Mode Support

// Use semantic color tokens
<div className="bg-background text-foreground">

4. Loading States

// Show skeleton during loading
{isLoading ? (
  <Skeleton className="h-4 w-full" />
) : (
  <Content />
)}

Integration with QwenClaw Rig

Using with Rig Agents

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

// 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

Related

Examples

Login Page

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

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

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 View Git Blame Copy Permalink