@wipal/agent-team 1.0.3 → 1.1.0

package/.claude/skills/domain/design/design-system/SKILL.md

@@ -0,0 +1,169 @@
+---
+name: design-system
+description: |
+  Design system creation with tokens, components, and patterns.
+  Use when building or maintaining design systems, creating component libraries.
+  Triggers: design-system, tokens, components, design tokens, component library
+version: 1.0.0
+category: design
+tags:
+  - design-system
+  - design-tokens
+  - components
+  - patterns
+depends_on: [ui-design]
+recommends: []
+used_by: []
+---
+
+# Design System Guide
+
+Framework for creating consistent, scalable design systems.
+
+## Design Tokens
+
+Design tokens are the visual design atoms of the design system.
+
+### Color Tokens
+
+```css
+/* Primitive Colors */
+--color-blue-500: #3B82F6;
+--color-green-500: #10B981;
+--color-red-500: #EF4444;
+
+/* Semantic Tokens */
+--color-primary: var(--color-blue-500);
+--color-success: var(--color-green-500);
+--color-error: var(--color-red-500);
+
+/* Component Tokens */
+--button-primary-bg: var(--color-primary);
+--button-primary-hover: var(--color-blue-600);
+```
+
+### Spacing Tokens
+
+```css
+--space-1: 4px;
+--space-2: 8px;
+--space-3: 12px;
+--space-4: 16px;
+--space-5: 20px;
+--space-6: 24px;
+--space-8: 32px;
+--space-10: 40px;
+--space-12: 48px;
+--space-16: 64px;
+```
+
+### Typography Tokens
+
+```css
+/* Font Families */
+--font-sans: system-ui, -apple-system, sans-serif;
+--font-mono: ui-monospace, monospace;
+
+/* Font Sizes */
+--text-xs: 0.75rem;    /* 12px */
+--text-sm: 0.875rem;   /* 14px */
+--text-base: 1rem;     /* 16px */
+--text-lg: 1.125rem;   /* 18px */
+--text-xl: 1.25rem;    /* 20px */
+--text-2xl: 1.5rem;    /* 24px */
+
+/* Font Weights */
+--font-normal: 400;
+--font-medium: 500;
+--font-semibold: 600;
+--font-bold: 700;
+
+/* Line Heights */
+--leading-tight: 1.25;
+--leading-normal: 1.5;
+--leading-relaxed: 1.75;
+```
+
+### Shadow Tokens
+
+```css
+--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+```
+
+### Border Radius Tokens
+
+```css
+--radius-sm: 4px;
+--radius-md: 8px;
+--radius-lg: 12px;
+--radius-xl: 16px;
+--radius-full: 9999px;
+```
+
+## Component Structure
+
+### Anatomy
+
+Every component should have:
+1. **Base styles**: Default appearance
+2. **Variants**: Size, color, style variations
+3. **States**: Hover, focus, active, disabled
+4. **Slots**: Areas for content injection
+
+### Naming Convention
+
+```
+[component]-[variant]-[state]-[part]
+
+Examples:
+- button-primary-hover
+- input-lg-error
+- card-outlined-header
+```
+
+## Pattern Library
+
+### Layout Patterns
+
+| Pattern | Use Case |
+| ------- | -------- |
+| Stack | Vertical spacing between children |
+| Cluster | Horizontal grouping with wrap |
+| Sidebar | Main content + side panel |
+| Split | Two equal columns |
+| Center | Centered content with max-width |
+
+### Component Patterns
+
+| Pattern | Description |
+| ------- | ----------- |
+| Compound | Multiple components work together |
+| Render Props | Flexible content rendering |
+| Slots | Named content areas |
+| Variants | Style variations |
+
+## Documentation Standards
+
+Each component needs:
+
+1. **Description**: What it does
+2. **Usage**: When to use it
+3. **Props/API**: Configuration options
+4. **Examples**: Code snippets
+5. **Accessibility**: A11y considerations
+
+## Maintenance
+
+### Version Control
+- Document all changes
+- Use semantic versioning
+- Provide migration guides
+
+### Deprecation Process
+1. Mark as deprecated
+2. Provide alternative
+3. Set removal date
+4. Remove in major version

package/.claude/skills/domain/design/html-css-output/SKILL.md

@@ -0,0 +1,253 @@
+---
+name: html-css-output
+description: |
+  Converting designs to semantic HTML and CSS properties for developers.
+  Use when creating design handoff documentation or converting designs to code specs.
+  Triggers: html, css, design-to-code, handoff, markup, styles
+version: 1.0.0
+category: design
+tags:
+  - html
+  - css
+  - design-to-code
+  - handoff
+depends_on: [ui-design, design-system]
+recommends: []
+used_by: []
+---
+
+# HTML/CSS Output Format
+
+Standard format for design handoff to developers.
+
+## Output Structure
+
+Every design should include:
+1. HTML structure
+2. CSS properties
+3. Design tokens used
+4. Responsive notes
+
+## Component Documentation Template
+
+```markdown
+## Component: [Name]
+
+### Description
+[Brief description of the component]
+
+### Variants
+- Default
+- [Variant 1]
+- [Variant 2]
+
+### States
+- Default
+- Hover
+- Focus
+- Active
+- Disabled
+
+### HTML Structure
+```html
+<!-- Component code here -->
+```
+
+### CSS Properties
+```css
+/* Component styles here */
+```
+
+### Design Tokens
+- --color-[name]: [value]
+- --space-[name]: [value]
+- --font-[name]: [value]
+
+### Responsive Notes
+- Mobile: [behavior]
+- Tablet: [behavior]
+- Desktop: [behavior]
+
+### Accessibility
+- [A11y considerations]
+```
+
+## Example Output
+
+### Component: Button
+
+```html
+<!-- Button Component -->
+<!-- Variant: Primary -->
+<!-- Size: Medium -->
+<button class="btn btn-primary btn-md" type="button">
+  <span class="btn__icon" aria-hidden="true">
+    <!-- Icon SVG here -->
+  </span>
+  <span class="btn__text">Button Label</span>
+</button>
+```
+
+```css
+/* Design Tokens */
+--btn-primary-bg: #3B82F6;
+--btn-primary-hover: #2563EB;
+--btn-primary-active: #1D4ED8;
+--btn-primary-text: #FFFFFF;
+--btn-radius: 8px;
+--btn-padding-x: 16px;
+--btn-padding-y: 10px;
+
+/* Base Styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--font-sans);
+  font-weight: var(--font-medium);
+  border-radius: var(--btn-radius);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+/* Size: Medium */
+.btn-md {
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+/* Variant: Primary */
+.btn-primary {
+  background-color: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: var(--btn-primary-hover);
+}
+
+.btn-primary:active {
+  background-color: var(--btn-primary-active);
+}
+
+.btn-primary:focus-visible {
+  outline: 2px solid var(--btn-primary-bg);
+  outline-offset: 2px;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+## Spacing Output
+
+Always use spacing tokens:
+
+```css
+/* Correct */
+.element {
+  padding: var(--space-4);
+  margin-bottom: var(--space-2);
+  gap: var(--space-3);
+}
+
+/* Avoid magic numbers */
+.element {
+  padding: 15px;  /* Use token instead */
+}
+```
+
+## Typography Output
+
+```css
+.text-heading {
+  font-family: var(--font-sans);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  color: var(--color-text-primary);
+}
+```
+
+## Layout Output
+
+```css
+/* Flexbox */
+.layout-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+/* Grid */
+.layout-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-6);
+}
+```
+
+## Color Output Format
+
+```css
+/* Background */
+background-color: var(--color-surface-primary);
+
+/* Text */
+color: var(--color-text-primary);
+
+/* Border */
+border-color: var(--color-border-default);
+
+/* Shadow (use token) */
+box-shadow: var(--shadow-md);
+```
+
+## Accessibility Annotations
+
+Include these in your output:
+
+```html
+<!-- Accessible button with icon -->
+<button
+  class="btn btn-icon"
+  type="button"
+  aria-label="Close dialog"
+>
+  <svg aria-hidden="true" focusable="false">
+    <!-- Icon -->
+  </svg>
+</button>
+
+<!-- Form input with label -->
+<div class="form-field">
+  <label for="email" class="form-label">
+    Email address
+  </label>
+  <input
+    id="email"
+    type="email"
+    class="form-input"
+    aria-describedby="email-hint"
+  />
+  <span id="email-hint" class="form-hint">
+    We'll never share your email.
+  </span>
+</div>
+```
+
+## Checklist Before Handoff
+
+- [ ] All spacing uses tokens
+- [ ] All colors use tokens
+- [ ] Typography uses tokens
+- [ ] Responsive breakpoints documented
+- [ ] States defined (hover, focus, disabled)
+- [ ] Accessibility attributes included
+- [ ] Component variants documented

package/.claude/skills/domain/design/mockup-creation/SKILL.md

@@ -0,0 +1,230 @@
+---
+name: mockup-creation
+description: |
+  Creating wireframes and mockups using DrawIO MCP for BA and Designer workflows.
+  Use when creating wireframes, mockups, or low-fidelity designs for UI/UX.
+  Triggers: mockup, wireframe, drawio, diagram, prototype, sketch
+version: 1.0.0
+category: design
+tags:
+  - mockup
+  - wireframe
+  - drawio
+  - diagram
+depends_on: [ui-design]
+recommends: []
+used_by: []
+---
+
+# Mockup Creation with DrawIO
+
+Guide for creating wireframes and mockups using DrawIO MCP.
+
+## When to Use DrawIO vs Mermaid
+
+| Use DrawIO | Use Mermaid |
+| ---------- | ----------- |
+| Wireframes | Flowcharts |
+| UI mockups | Sequence diagrams |
+| Low-fidelity designs | Class diagrams |
+| Complex layouts | Simple diagrams |
+| Editable outputs | Quick documentation |
+
+## DrawIO MCP Tools
+
+### Available Tools
+
+1. **open_drawio_mermaid**: Create diagram from Mermaid syntax
+2. **open_drawio_xml**: Create diagram from DrawIO XML
+3. **open_drawio_csv**: Create diagram from CSV data
+
+## Workflow
+
+### Step 1: Plan Your Mockup
+
+Before using DrawIO:
+1. List the components needed
+2. Sketch layout structure
+3. Identify sections and their relationships
+
+### Step 2: Create Wireframe
+
+Use DrawIO MCP to create the wireframe:
+
+```
+Use DrawIO MCP to create a wireframe with:
+- Header section with logo and navigation
+- Hero section with headline and CTA
+- Features grid (3 columns)
+- Footer with links
+```
+
+### Step 3: Save Locally
+
+DrawIO opens in browser. Save the file:
+1. File -> Save As
+2. Choose location in project folder
+3. Use naming convention: `[page]-wireframe-[date].drawio`
+
+## Wireframe Components
+
+### Common Elements
+
+```markdown
+## Page Structure
+
+- Header
+  - Logo
+  - Navigation
+  - Actions (login, signup)
+- Main Content
+  - Hero
+  - Features
+  - Content blocks
+- Footer
+  - Links
+  - Social
+  - Copyright
+
+## UI Components
+
+- Buttons (primary, secondary, ghost)
+- Form inputs (text, select, checkbox)
+- Cards (image, title, description)
+- Lists (bullet, numbered, cards)
+- Navigation (tabs, breadcrumbs, pagination)
+```
+
+## Naming Convention
+
+```
+[project]-[page]-[type]-[version].drawio
+
+Examples:
+- myapp-home-wireframe-v1.drawio
+- myapp-dashboard-mockup-v2.drawio
+- myapp-checkout-flow-v1.drawio
+```
+
+## Wireframe to Design Handoff
+
+After wireframe approval:
+
+1. **Document the structure**
+   ```markdown
+   ## Home Page Wireframe
+
+   ### Sections
+   1. Header (fixed)
+   2. Hero (full-width)
+   3. Features (3-column grid)
+   4. Testimonials (carousel)
+   5. CTA (centered)
+   6. Footer
+
+   ### Components Used
+   - Button (primary, secondary)
+   - Card (feature)
+   - Testimonial card
+   - Navigation
+   ```
+
+2. **Export for reference**
+   - PNG for quick reference
+   - Keep .drawio for edits
+
+3. **Add annotations**
+   - Component names
+   - Interaction notes
+   - Responsive behavior
+
+## BA Workflow Integration
+
+### For Requirements Gathering
+
+1. Create low-fidelity wireframe
+2. Review with stakeholders
+3. Iterate based on feedback
+4. Document decisions
+5. Handoff to Designer
+
+### Documentation
+
+```markdown
+## [Feature Name] Wireframe
+
+**File**: `docs/wireframes/[name].drawio`
+
+### Purpose
+[Brief description]
+
+### User Flow
+1. User lands on page
+2. User sees [content]
+3. User interacts with [element]
+4. System responds with [action]
+
+### Requirements
+- [ ] Requirement 1
+- [ ] Requirement 2
+
+### Notes
+- Design notes here
+```
+
+## Designer Workflow Integration
+
+### From Wireframe to Design
+
+1. Review BA wireframe
+2. Create high-fidelity version
+3. Apply design system
+4. Document HTML/CSS properties
+5. Handoff to Developer
+
+### File Organization
+
+```
+project/
+├── docs/
+│   └── wireframes/
+│       ├── home-wireframe-v1.drawio
+│       └── dashboard-wireframe-v1.drawio
+├── designs/
+│   └── mockups/
+│       ├── home-mockup-v1.fig
+│       └── dashboard-mockup-v1.fig
+└── design-system/
+    └── tokens.css
+```
+
+## Best Practices
+
+1. **Start simple**: Low-fidelity first
+2. **Get feedback early**: Don't over-polish
+3. **Document decisions**: Why choices were made
+4. **Version control**: Keep previous versions
+5. **Consistent naming**: Follow convention
+6. **Single source of truth**: One file per page
+
+## Common Patterns
+
+### Landing Page
+- Hero (headline, CTA)
+- Features (benefits)
+- Social proof (testimonials)
+- Pricing (if applicable)
+- CTA (final conversion)
+
+### Dashboard
+- Sidebar navigation
+- Header with search/user
+- Metrics cards
+- Data tables/charts
+- Quick actions
+
+### Form Page
+- Progress indicator (multi-step)
+- Clear labels
+- Validation feedback
+- Submit/Cancel actions