@hailer/mcp 1.1.14 → 1.1.16

package/.claude/skills/frontend-design/SKILL.md

@@ -0,0 +1,254 @@
+---
+name: frontend-design
+version: 1.0.0
+---
+
+# Frontend Design
+
+<purpose>
+Design principles and patterns for creating effective UI mockups. Covers layout systems, visual hierarchy, color and typography, responsive design, and component organization for prototype and demo applications.
+</purpose>
+
+<patterns>
+
+## Layout Principles
+
+### Grid Systems
+- **12-column grid**: Standard for flexibility (divides into 2, 3, 4, 6)
+- **Content width**: 1200px max for readability, centered
+- **Gutters**: 16-24px between columns
+- **Margins**: 16px mobile, 24px tablet, 32px+ desktop
+
+### Common Layouts
+```
+Dashboard:    [Sidebar 240px] [Main Content flex-1]
+List View:    [Filters 280px] [Table/Cards flex-1]
+Detail View:  [Main 2/3] [Sidebar 1/3]
+Form:         [Labels 1/3] [Inputs 2/3] or stacked on mobile
+```
+
+### Spacing Scale
+Use consistent spacing multipliers:
+- **4px**: Tight (icon padding)
+- **8px**: Compact (button padding)
+- **16px**: Default (card padding, list gaps)
+- **24px**: Comfortable (section gaps)
+- **32px**: Spacious (page sections)
+- **48px+**: Major sections
+
+## Visual Hierarchy
+
+### Size Hierarchy
+```
+Hero/Page Title:    32-48px, bold
+Section Headers:    24-28px, semibold
+Card Titles:        18-20px, medium
+Body Text:          14-16px, regular
+Captions/Labels:    12-13px, regular/medium
+```
+
+### Emphasis Techniques
+1. **Size**: Larger = more important
+2. **Weight**: Bold draws attention
+3. **Color**: Brand color for CTAs, muted for secondary
+4. **Space**: More whitespace = more prominence
+5. **Position**: Top-left reads first (F-pattern)
+
+### Information Density
+- **Scannable**: Bold labels, regular values
+- **Grouped**: Related info in cards/sections
+- **Progressive**: Summary first, details on demand
+
+## Color Usage
+
+### Semantic Colors
+```
+Primary:     Brand action (buttons, links)
+Secondary:   Less important actions
+Success:     Confirmations, positive states (green)
+Warning:     Caution, attention needed (yellow/orange)
+Error:       Problems, destructive actions (red)
+Info:        Neutral information (blue)
+```
+
+### Background Hierarchy
+```
+Page:        gray.50 or white
+Card:        white (with subtle shadow)
+Hover:       gray.100
+Selected:    brand.50 or blue.50
+Disabled:    gray.100 with gray.400 text
+```
+
+### Contrast Requirements
+- Text on background: 4.5:1 minimum (WCAG AA)
+- Large text: 3:1 minimum
+- UI components: 3:1 against adjacent colors
+
+## Typography
+
+### Font Pairing
+- **Headings**: Inter, Poppins, or system sans-serif
+- **Body**: Same family, different weight
+- **Monospace**: For code, IDs, technical values
+
+### Line Height
+- Headings: 1.2-1.3
+- Body text: 1.5-1.6
+- UI labels: 1.2
+
+### Text Alignment
+- Left-align body text (never justify)
+- Center for short headings, CTAs
+- Right-align numbers in tables
+
+## Component Patterns
+
+### Cards
+```
+┌─────────────────────────┐
+│ [Icon] Title      [Menu]│  ← Header: 16px padding
+├─────────────────────────┤
+│                         │
+│  Content area           │  ← Body: 16-24px padding
+│                         │
+├─────────────────────────┤
+│ [Secondary]   [Primary] │  ← Footer: actions right-aligned
+└─────────────────────────┘
+```
+
+### Tables
+- Header: Bold, uppercase or title case, sticky
+- Rows: Alternating or bordered
+- Actions: End of row, icon buttons or dropdown
+- Selection: Checkbox in first column
+- Sorting: Click header, show arrow indicator
+
+### Forms
+- Labels above inputs (mobile-friendly)
+- Required indicator: asterisk or "(required)"
+- Error messages below input, red text
+- Help text below input, muted color
+- Group related fields in sections
+
+### Navigation
+- **Top nav**: Logo left, main nav center/right, user menu far right
+- **Sidebar**: Logo top, nav items with icons, collapsible
+- **Breadcrumbs**: For deep hierarchies, show path
+
+## Responsive Breakpoints
+
+```
+Mobile:     < 640px   (1 column, stacked)
+Tablet:     640-1024px (2 columns, sidebar hidden)
+Desktop:    > 1024px  (full layout)
+Wide:       > 1440px  (max-width container)
+```
+
+### Mobile Adaptations
+- Stack horizontal layouts vertically
+- Hide sidebar, use hamburger menu
+- Larger touch targets (44px minimum)
+- Reduce padding (16px instead of 24px)
+- Use bottom sheets instead of modals
+
+## Empty States
+
+Always design for empty:
+```
+┌─────────────────────────┐
+│                         │
+│      [Illustration]     │
+│                         │
+│   No items yet          │
+│   Add your first item   │
+│                         │
+│      [+ Add Item]       │
+│                         │
+└─────────────────────────┘
+```
+
+## Loading States
+
+- **Skeleton**: Gray boxes mimicking content shape
+- **Spinner**: For actions, not initial loads
+- **Progress**: For multi-step or long operations
+- **Optimistic**: Show expected result immediately
+
+</patterns>
+
+<examples>
+
+## Dashboard Layout
+```jsx
+<Flex>
+  <Sidebar w="240px" />
+  <Box flex="1" p={6}>
+    <Heading mb={6}>Dashboard</Heading>
+    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
+      <StatCard label="Total" value="1,234" />
+      <StatCard label="Active" value="567" trend="+12%" />
+      ...
+    </SimpleGrid>
+    <Box mt={8}>
+      <RecentActivityTable />
+    </Box>
+  </Box>
+</Flex>
+```
+
+## Card with Actions
+```jsx
+<Card>
+  <CardHeader>
+    <Flex justify="space-between" align="center">
+      <Heading size="md">Customer Details</Heading>
+      <Menu>
+        <MenuButton as={IconButton} icon={<MoreIcon />} />
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+          <MenuItem color="red.500">Delete</MenuItem>
+        </MenuList>
+      </Menu>
+    </Flex>
+  </CardHeader>
+  <CardBody>
+    <Stack spacing={3}>
+      <Field label="Name" value={customer.name} />
+      <Field label="Email" value={customer.email} />
+    </Stack>
+  </CardBody>
+  <CardFooter justify="flex-end" gap={2}>
+    <Button variant="ghost">Cancel</Button>
+    <Button colorScheme="brand">Save</Button>
+  </CardFooter>
+</Card>
+```
+
+## Responsive Table
+```jsx
+<TableContainer>
+  <Table>
+    <Thead>
+      <Tr>
+        <Th>Name</Th>
+        <Th display={{ base: 'none', md: 'table-cell' }}>Email</Th>
+        <Th isNumeric>Amount</Th>
+        <Th w="50px"></Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      {items.map(item => (
+        <Tr key={item.id} _hover={{ bg: 'gray.50' }}>
+          <Td>{item.name}</Td>
+          <Td display={{ base: 'none', md: 'table-cell' }}>{item.email}</Td>
+          <Td isNumeric>{formatCurrency(item.amount)}</Td>
+          <Td><ActionMenu item={item} /></Td>
+        </Tr>
+      ))}
+    </Tbody>
+  </Table>
+</TableContainer>
+```
+
+</examples>

package/.claude/skills/hailer-activity-mover/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: hailer-activity-mover
+description: Activity mover microservice patterns for phase cascade automation
+version: 1.0.0
+triggers:
+  - activity mover
+  - phase cascade
+  - linked activities
+---
+
+# Activity Mover Skill
+
+Configure automated phase cascade bots. Agent creates Hailer fields and generates config JSON. User deploys to AWS manually.
+
+---
+
+## What It Does
+
+When an activity moves to a trigger phase, the bot automatically moves linked activities to target phases.
+
+**Example:** Invoice → "Invoiced" automatically moves Invoice Rows → "Archived"
+
+---
+
+## Agent Workflow
+
+### Step 1: Gather IDs (Kenji)
+
+Get workflow, phase, and field IDs from workspace/:
+
+```json
+{
+  "task": "get_activity_mover_ids",
+  "context": {
+    "trigger_workflow": "Invoices",
+    "trigger_phase": "Invoiced",
+    "target_workflow": "Invoice Rows",
+    "target_phases": {
+      "from": ["Draft", "Pending"],
+      "to": "Archived"
+    }
+  }
+}
+```
+
+### Step 2: Create MetaData Field (Helga)
+
+Add hidden "Seen/Not seen" field to trigger workflow:
+
+```json
+{
+  "task": "add_field",
+  "context": {
+    "workflow_id": "from-kenji",
+    "field": {
+      "id": "activityMoverStatus",
+      "label": "Activity Mover Status",
+      "type": "text",
+      "hidden": true,
+      "defaultValue": "Not seen"
+    }
+  }
+}
+```
+
+Run the push command Helga returns.
+
+### Step 3: Create Logging Activity (Dmitri)
+
+Create an activity for bot logging:
+
+```json
+{
+  "task": "create_activity",
+  "context": {
+    "workflow": "suitable-workflow-for-logs",
+    "name": "Activity Mover Log - [Project]",
+    "phase": "active-phase"
+  }
+}
+```
+
+Note the activity's discussion ID from the response.
+
+### Step 4: Generate Config JSON
+
+Output config for user to deploy:
+
+```json
+{
+  "project": "project-name",
+  "email": "activity-mover+project@hailer.com",
+  "password": "USER_PROVIDES_PASSWORD",
+  "logDiscussionId": "from-step-3",
+  "triggers": [
+    {
+      "processId": "trigger-workflow-id",
+      "phaseId": "trigger-phase-id",
+      "metaDataId": "seen-field-id",
+      "linkedProcesses": [
+        {
+          "processId": "target-workflow-id",
+          "fromPhaseIds": ["phase-1", "phase-2"],
+          "toPhaseId": "destination-phase"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Step 5: User Deploys
+
+User manually:
+1. Fills in integration user password
+2. Uploads to AWS Secrets Manager as `activity-mover-{project}`
+
+---
+
+## Config Schema
+
+```typescript
+interface Config {
+  project: string;              // Hailer project identifier
+  email: string;                // Integration user email
+  password: string;             // Integration user password
+  logDiscussionId: string;      // Discussion ID (not activity ID)
+  triggers: Trigger[];
+}
+
+interface Trigger {
+  processId: string;            // Workflow that triggers automation
+  phaseId: string;              // Phase that fires the trigger
+  metaDataId: string;           // "Seen/Not seen" field ID
+  linkedProcesses: Process[];
+}
+
+interface Process {
+  processId: string;            // Target workflow ID
+  fromPhaseIds: string[];       // Only move activities in these phases
+  toPhaseId: string;            // Move to this phase
+}
+```
+
+---
+
+## Requirements
+
+Before setting up:
+- [ ] Link field must exist connecting trigger → target workflows
+- [ ] Integration user exists with edit permissions on all workflows
+- [ ] Activity mover service running for the project
+
+---
+
+## Multiple Triggers
+
+One config supports multiple triggers:
+
+```json
+{
+  "triggers": [
+    { "processId": "workflow-1", "phaseId": "phase-a", ... },
+    { "processId": "workflow-2", "phaseId": "phase-b", ... }
+  ]
+}
+```
+
+---
+
+## Multiple Target Workflows
+
+One trigger can cascade to multiple workflows:
+
+```json
+{
+  "linkedProcesses": [
+    { "processId": "target-1", "fromPhaseIds": [...], "toPhaseId": "..." },
+    { "processId": "target-2", "fromPhaseIds": [...], "toPhaseId": "..." }
+  ]
+}
+```
+
+---
+
+## Agent Output
+
+Return to user:
+
+```json
+{
+  "status": "success",
+  "result": {
+    "fields_created": ["activityMoverStatus"],
+    "logging_activity": "activity-id",
+    "logging_discussion": "discussion-id",
+    "config": { ... }
+  },
+  "summary": "Config ready - deploy to AWS",
+  "user_action": "Upload config to AWS Secrets Manager as activity-mover-{project}"
+}
+```
+
+---
+
+## Troubleshooting
+
+| Issue | Cause | Fix |
+|-------|-------|-----|
+| Activities not moving | Wrong phase IDs | Verify IDs with Kenji |
+| "Not seen" not updating | Wrong metaDataId | Check field ID |
+| No log messages | Wrong discussionId | Use discussion ID, not activity ID |
+| Permission denied | Integration user lacks access | Add to workflow permissions |