Task Rabbit

• Document which skills/agents are needed
• Identify missing expertise areas
• Create skill development roadmap
• Recommend tool/agent creation priorities

4. Escalation & Workflow

• Generate remediation tickets
• Assign tasks to teams
• Track burn-down
• Manage dependencies
• Escalate blockers

📋 Input from Orchestrator

{
  "orchestrator_handoff": {
    "audit_id": "audit-20260316-001",
    "design_file": "Q4_MBR_Deck_v2.1.pptx",
    "audit_report": { /* full audit JSON */ },
    "phases_completed": ["brand_compliance", "composition", "accessibility", "code_bridge"],
    "total_findings": 4,
    "design_debt_score": 6,
    "code_artifacts": {
      "design_spec": "design_spec.json",
      "design_tokens": "design_tokens.css",
      "components": ["button.html", "card.html", ...]
    }
  }
}

📚 DOCUMENTATION RESPONSIBILITY

1. Design Audit Archive

# Design Audit Archive

## Q4 MBR Deck v2.1 (Audit ID: audit-20260316-001)

**Date Audited:** March 16, 2026
**Status:** PASS_WITH_WARNINGS (Score: 91/100)
**Auditor:** Designer Orchestrator v1.0

### Audit ary
- Brand Compliance: 92/100 (1 high violation)
- Composition: 85/100 (2 medium issues)
- Accessibility: 94/100 (1 low warning)
- Code Bridge: PASS (28 tokens generated)

### Critical Findings
- Chart legend contrast: 3.2:1 vs 4.5:1 required

### Design Debt
- Total Score: 6 (Low severity)
- Categories: Color (2), Spacing (1), Typography (2), Accessibility (1)

### Remediation
- Status: Not Started
- Estimated Effort: 2 hours
- Assigned To: Design Team

[Full Report Link](./audit-20260316-001.html)

2. Component Library Documentation

Generated from code bridge phase:

# Component Library Specification

## Extracted Components

### Button Component
- **States:** Default, Hover, Pressed, Disabled, Focus
- **Sizes:** SM (32px), MD (40px), LG (48px)
- **Variants:** Primary, Secondary, Destructive
- **Accessibility:** WCAG AA compliant, focus indicator visible
- **CSS Class:** `.btn`
- **HTML:** [See button.html](./components/button.html)
- **Design Token Dependencies:** `--color-blue-100`, `--spacing-md`, `--radius-md`

### Card Component
- **States:** Default, Hover (shadow elevation), Active
- **Padding:** 24px (--spacing-lg)
- **Border Radius:** 4px (--radius-md)
- **Shadow:** shadow-sm at rest, shadow-md on hover
- **Responsive:** Stacks on mobile (768px breakpoint)

[View all components...](./components/)

3. Discovered Patterns & Antipatterns

# Design Patterns Discovered

## Effective Patterns

### Executive Summary Layout
**When to use:** Opening slides, quarterly reviews
**Structure:**
- Headline with clear takeaway
- 3-4 KPI cards in grid
- Supporting callout box
- Footer with source/date

**Why it works:**
- Balances information density with readability
- Clear focal point (headline → KPIs → callout)
- Meets WCAG AA accessibility
- Responsive to different screen sizes

**Code Example:** [View spec](./patterns/executive-summary.html)

---

## Antipatterns Identified

### Too Many Font Sizes
**Issue:** Design uses 8 different font sizes (too many)
**Impact:** Reduces visual hierarchy clarity
**Recommendation:** Consolidate to 4-5 standard sizes using design tokens
**Effort:** 2 hours

### Arbitrary Spacing Values
**Issue:** Spacing uses 7px, 13px, 25px (not on 8px grid)
**Impact:** Makes responsive design harder, reduces consistency
**Recommendation:** Normalize to 8px unit system (4, 8, 16, 24, 32, 48, 64)
**Effort:** 3 hours

4. Design Guidelines Update

Task Rabbit updates master design guidelines based on audits:

# Walmart Design System Guidelines
## Updated: March 16, 2026 (Based on Q4 MBR Audit)

### Color Usage Rules
- ✅ Always validate text contrast before using
- ✅ Pair colors with icons/text (never color alone)
- ✅ Test with color-blindness simulator
- ❌ Never use spark.100 for body text (fails contrast)
- ❌ Never use gray.50 for small text

### Spacing Standards
- Use 8px unit system only: 4, 8, 16, 24, 32, 48, 64px
- Button padding: 8px vertical, 16px horizontal minimum
- Card padding: 24px
- Section margins: 32-48px
- Gutter/gap: 16-24px

[Full guidelines...](./design-guidelines.md)

🚀 CI/CD OPPORTUNITY IDENTIFICATION

Automated Design Validation Pipeline

# CI/CD Opportunities Identified

## Priority 1: Pre-Commit Hook - Design Lint

### Description
Automatically check design files for common violations before commit

### What to Scan
- [ ] PPTX color usage against approved palette
- [ ] Font weight validation (400/600/700 only)
- [ ] Spacing grid adherence
- [ ] Missing alt text on images
- [ ] Slide dimension consistency (16:9 ratio)

### Implementation
```bash
# .husky/pre-commit
python scripts/design_lint.py --file "$1"
if [ $? -ne 0 ]; then
  echo "❌ Design validation failed. Run: design-orchestrator --auto-fix"
  exit 1
fi

Effort: 4 hours (Python script + Git hook setup)

ROI: Prevents 90% of brand violations from entering repo

Priority 2: CI Pipeline - Contrast Checker

Description

Automated WCAG contrast validation on all design changes

Test Cases

• Extract all text colors and backgrounds
• Calculate contrast ratio for each element
• Flag violations <4.5:1 for body, <3:1 for UI
• Generate accessibility report

GitHub Actions Workflow