# Rugged Utility

> LivestockAI's design philosophy for field-ready, farmer-friendly UI

- Skill: `majiayu000/rugged-utility` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/rugged-utility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/rugged-utility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/rugged-utility

---


# Rugged Utility

LivestockAI is built for farmers in the field - often on dusty phones with cracked screens, under bright sunlight, with dirty hands. Every UI decision prioritizes **usability over aesthetics**.

## Touch Targets

All interactive elements MUST meet minimum sizes:

| Element           | Minimum Size    | Rationale             |
| ----------------- | --------------- | --------------------- |
| Buttons           | 48px height     | Fat finger friendly   |
| Action Grid items | 64px × 64px     | Field use with gloves |
| Form inputs       | 44px height     | Easy tap targets      |
| List items        | 48px row height | Scrollable lists      |
| Icon buttons      | 44px × 44px     | Toolbar actions       |

## Signal Palette

| Color        | CSS Variable    | Usage                               |
| ------------ | --------------- | ----------------------------------- |
| Forest Green | `--success`     | Growth, revenue, healthy batches    |
| Amber        | `--warning`     | Alerts, low stock, attention needed |
| Red          | `--destructive` | Mortality, losses, critical issues  |
| Neutral      | `--muted`       | Data, secondary information         |
| Primary      | `--primary`     | Actions, CTAs (Emerald brand)       |

## Health Pulse Card

Color-coded status at a glance:

```
┌─────────────────────────────────────────────┐
│ 🟢 ON TRACK                                  │
│ Mortality: 2.1% • FCR: 1.8 • Weight: 1.2kg  │
└─────────────────────────────────────────────┘
```

States:

- 🟢 **Green**: All metrics within targets
- 🟡 **Amber**: One metric needs attention
- 🔴 **Red**: Critical - immediate action required

## Action Grid

High-frequency actions as large touch targets:

```
┌──────────┬──────────┬──────────┐
│   🍗     │    💀    │    💰    │
│  Feed    │  Death   │   Sale   │
├──────────┼──────────┼──────────┤
│   ⚖️     │    💉    │    💧    │
│  Weigh   │   Vax    │  Water   │
└──────────┴──────────┴──────────┘
```

- 2×3 or 3×2 grid depending on screen
- Icons + labels always visible
- Each cell minimum 64px × 64px

## Typography

| Element    | Size | Weight   | Usage               |
| ---------- | ---- | -------- | ------------------- |
| Page title | 24px | Bold     | Route headers       |
| Card title | 18px | Semibold | Card headers        |
| Body       | 16px | Regular  | Content             |
| Caption    | 14px | Regular  | Secondary text      |
| Label      | 12px | Medium   | Form labels, badges |

## Error States

```
┌─────────────────────────────────────────────┐
│ ⚠️ Failed to save feed record               │
│                                              │
│ Check your connection and try again.         │
│                                              │
│ [Retry]                      [Save Offline]  │
└─────────────────────────────────────────────┘
```

- Clear error message
- Actionable recovery options
- Offline fallback when applicable

## Related Skills

- `batch-centric-design` - Batch-focused UI patterns
- `offline-first` - Offline indicators