@qazuor/claude-code-config 0.1.0

package/templates/skills/tech/mermaid-diagram-specialist.md

@@ -0,0 +1,195 @@
+---
+name: mermaid-diagram-specialist
+category: tech
+description: Create technical diagrams using Mermaid syntax for documentation and architecture visualization
+usage: When visualizing workflows, documenting architecture, creating ERDs, or explaining system design
+input: System description, architecture requirements, data model, process flows
+output: Mermaid diagram code in markdown format
+config_required:
+  - diagram_style: "Color scheme and theme configuration"
+  - default_direction: "Flow direction preference (TD, LR, etc.)"
+  - max_complexity: "Maximum nodes per diagram for readability"
+---
+
+# Mermaid Diagram Specialist
+
+## ⚙️ Configuration
+
+| Setting | Description | Example |
+|---------|-------------|---------|
+| `diagram_style` | Theme and color scheme | `base`, `dark`, `forest`, `neutral` |
+| `primary_color` | Main color for nodes | `#3B82F6` (blue) |
+| `default_direction` | Default flow direction | `TD` (top-down), `LR` (left-right) |
+| `max_nodes` | Max nodes per diagram | `20` for readability |
+| `line_style` | Connection line style | `solid`, `dotted`, `curved` |
+
+## Purpose
+
+Create technical diagrams using Mermaid syntax for documentation, architecture visualization, and process mapping. Supports flowcharts, sequence diagrams, ERDs, C4 diagrams, state machines, and more.
+
+## Capabilities
+
+- Flowcharts for decision flows and processes
+- Sequence diagrams for API interactions
+- ERDs for database schemas
+- C4 diagrams for architecture levels
+- State diagrams for lifecycle visualization
+- Class diagrams for object design
+- Gantt charts for timelines
+
+## Diagram Types
+
+### Flowchart
+
+**Use for**: Process flows, decision trees, algorithms
+
+```mermaid
+flowchart TD
+    Start([Start]) --> Input[/User Input/]
+    Input --> Validate{Valid?}
+    Validate -->|Yes| Process[Process Data]
+    Validate -->|No| Error[Show Error]
+    Process --> Save[(Save)]
+    Save --> End([End])
+```
+
+**Node shapes**: `[Rectangle]`, `([Rounded])`, `{Diamond}`, `[/Parallelogram/]`, `[(Database)]`
+
+### Sequence Diagram
+
+**Use for**: API flows, message passing, system interactions
+
+```mermaid
+sequenceDiagram
+    actor User
+    participant Frontend
+    participant API
+    participant DB
+
+    User->>Frontend: Submit Form
+    Frontend->>API: POST /resource
+    API->>DB: Insert Data
+    DB-->>API: Success
+    API-->>Frontend: 201 Created
+    Frontend-->>User: Show Success
+```
+
+### ERD (Entity Relationship)
+
+**Use for**: Database schemas, data models
+
+```mermaid
+erDiagram
+    USER ||--o{ ORDER : creates
+    ORDER ||--|| PAYMENT : has
+    ORDER ||--|{ ITEM : contains
+
+    USER {
+        uuid id PK
+        string email UK
+        string name
+    }
+    ORDER {
+        uuid id PK
+        uuid user_id FK
+        decimal total
+        enum status
+    }
+```
+
+**Relationships**: `||--||` (one-to-one), `||--o{` (one-to-many), `}o--o{` (many-to-many)
+
+### State Diagram
+
+**Use for**: Lifecycle management, status transitions
+
+```mermaid
+stateDiagram-v2
+    [*] --> Pending
+    Pending --> Confirmed: Payment Success
+    Pending --> Cancelled: Payment Failed
+    Confirmed --> Active: Start Date
+    Active --> Completed: End Date
+    Confirmed --> Cancelled: User Cancels
+    Completed --> [*]
+    Cancelled --> [*]
+```
+
+## Best Practices
+
+| Practice | Description |
+|----------|-------------|
+| **Simplicity** | Keep diagrams under configured max nodes |
+| **Direction** | Use consistent flow direction per diagram type |
+| **Labels** | Clear, descriptive labels for all elements |
+| **Grouping** | Use subgraphs to organize related elements |
+| **Colors** | Apply theme consistently across diagrams |
+| **Testing** | Verify rendering in target markdown viewer |
+
+## Common Patterns
+
+### API Request Flow
+
+```mermaid
+sequenceDiagram
+    Client->>+API: Request
+    API->>+Service: Process
+    Service->>+Model: Query
+    Model->>+DB: Execute
+    DB-->>-Model: Data
+    Model-->>-Service: Result
+    Service-->>-API: Response
+    API-->>-Client: JSON
+```
+
+### Error Handling
+
+```mermaid
+flowchart TD
+    Request --> Validate{Valid?}
+    Validate -->|No| Error[Error Handler]
+    Validate -->|Yes| Process
+    Process --> DB{Success?}
+    DB -->|No| Error
+    DB -->|Yes| Success
+    Error --> Log[Log Error]
+    Log --> Response[Error Response]
+```
+
+## Styling
+
+Apply theme configuration:
+
+```mermaid
+%%{init: {'theme':'base', 'themeVariables': {
+  'primaryColor':'#3B82F6',
+  'primaryTextColor':'#fff',
+  'lineColor':'#6B7280'
+}}}%%
+flowchart TD
+    A --> B --> C
+```
+
+Use class styling:
+
+```mermaid
+flowchart TD
+    A[Normal] --> B[Success]
+    B --> C[Error]
+
+    classDef success fill:#10B981,stroke:#059669
+    classDef error fill:#EF4444,stroke:#DC2626
+
+    class B success
+    class C error
+```
+
+## Checklist
+
+- [ ] Diagram type appropriate for content
+- [ ] All nodes clearly labeled
+- [ ] Relationships accurate
+- [ ] Theme colors configured
+- [ ] Renders correctly in markdown
+- [ ] Complexity within limits
+- [ ] Direction consistent

package/templates/skills/tech/shadcn-specialist.md

@@ -0,0 +1,252 @@
+---
+name: component-library-specialist
+category: tech
+description: Implement and customize component library systems with consistent theming and accessibility
+usage: When adding UI components, customizing themes, or ensuring design system consistency
+input: Component requirements, theme configuration, accessibility standards
+output: Component implementations with proper theming and WCAG compliance
+config_required:
+  - library_name: "Component library being used (e.g., shadcn, chakra, mui)"
+  - component_path: "Path to components directory"
+  - theme_file: "Path to theme configuration"
+  - accessibility_level: "WCAG compliance level (AA or AAA)"
+---
+
+# Component Library Specialist
+
+## ⚙️ Configuration
+
+| Setting | Description | Example |
+|---------|-------------|---------|
+| `library_name` | Component library | `shadcn-ui`, `chakra-ui`, `material-ui` |
+| `component_path` | Components directory | `src/components/ui` |
+| `theme_file` | Theme config location | `src/styles/theme.css` |
+| `base_color` | Primary theme color | `slate`, `blue`, `neutral` |
+| `css_variables` | Use CSS variables | `true` (recommended) |
+| `wcag_level` | Accessibility level | `AA` (minimum), `AAA` (enhanced) |
+
+## Purpose
+
+Expert guidance on implementing component library systems with consistent theming, proper accessibility (WCAG 2.1), and design system best practices.
+
+## Capabilities
+
+- Component installation and configuration
+- Theme customization with CSS variables
+- Variant creation for custom designs
+- Accessibility compliance (WCAG AA/AAA)
+- Form integration with validation
+- Responsive design implementation
+
+## Installation
+
+### Setup Component Library
+
+```bash
+# Install specific component
+npx library-cli add button input form
+
+# Configure registry
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+## Theme Customization
+
+### CSS Variables
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+## Component Patterns
+
+### Form with Validation
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button, Form, FormField, Input } from '@/components/ui';
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+export function LoginForm() {
+  const form = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField name="email" render={...} />
+        <FormField name="password" render={...} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+```
+
+### Dialog/Modal
+
+```tsx
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui';
+
+export function ConfirmDialog({ onConfirm }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Delete</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Action</DialogTitle>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button variant="destructive" onClick={onConfirm}>
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Custom Variants
+
+```tsx
+import { cva } from 'class-variance-authority';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground',
+        destructive: 'bg-destructive text-destructive-foreground',
+        // Custom variants
+        success: 'bg-green-600 text-white',
+        warning: 'bg-yellow-600 text-white',
+      },
+      size: {
+        default: 'h-10 px-4',
+        sm: 'h-9 px-3',
+        lg: 'h-11 px-8',
+      },
+    },
+  }
+);
+```
+
+## Accessibility
+
+### ARIA Labels
+
+```tsx
+<Button aria-label="Close dialog">
+  <X className="h-4 w-4" />
+</Button>
+```
+
+### Keyboard Navigation
+
+- Tab for focus movement
+- Enter/Space for activation
+- Escape for closing modals
+- Arrow keys for lists/menus
+
+### Focus Management
+
+```tsx
+const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+useEffect(() => {
+  if (open) {
+    closeButtonRef.current?.focus();
+  }
+}, [open]);
+```
+
+### Color Contrast
+
+- Normal text: ≥ 4.5:1 contrast ratio
+- Large text: ≥ 3:1 contrast ratio
+- Test in both light and dark modes
+
+## Testing
+
+```tsx
+import { render, screen } from '@testing-library/react';
+
+describe('Button', () => {
+  it('renders and handles clicks', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+
+    screen.getByText('Click').click();
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(<Button variant="destructive">Delete</Button>);
+    expect(container.firstChild).toHaveClass('bg-destructive');
+  });
+});
+```
+
+## Best Practices
+
+| Practice | Description |
+|----------|-------------|
+| **Theme Tokens** | Always use CSS variables, never hardcode colors |
+| **Composition** | Combine primitives for complex components |
+| **Accessibility** | ARIA labels, keyboard nav, focus management |
+| **TypeScript** | Leverage component prop types |
+| **Variants** | Use CVA for consistent variant patterns |
+| **Testing** | ≥ 90% coverage for all components |
+| **Responsive** | Test mobile, tablet, desktop |
+| **Dark Mode** | Test both light and dark themes |
+
+## Checklist
+
+- [ ] Components installed correctly
+- [ ] Theme matches brand guidelines
+- [ ] WCAG compliance level met
+- [ ] Keyboard accessible
+- [ ] Focus management correct
+- [ ] Color contrast compliant
+- [ ] Tests passing (≥ 90% coverage)
+- [ ] Responsive on all devices