# Batch-Centric Design

> The batch is the atomic unit - UI patterns centered around batch management

- Skill: `majiayu000/batch-centric-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/batch-centric-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/batch-centric-design/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/batch-centric-design

---


# Batch-Centric Design

In LivestockAI, the "Batch" (a group of animals) is the atomic unit of the farm.

## Core Principle

- **Wrong:** A "Feed Log" page where you select a batch.
- **Right:** A "Batch Dashboard" where you click "Log Feed."

All operations flow from the batch context.

## Batch Header (North Star)

Every batch-related page starts with this anchored header:

```
┌─────────────────────────────────────────────┐
│ 🐔 Broiler Batch A          Week 6    ● Synced │
│ 450/500 birds • Sunrise Poultry Farm         │
└─────────────────────────────────────────────┘
```

- Always visible (sticky on scroll)
- Shows: Species icon, name, age, sync status
- Tap to expand batch details

## Health Pulse Card

Color-coded status at a glance:

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

## Action Grid

High-frequency actions as large touch targets:

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

## Command Center Layout

Every Batch Detail view MUST follow this structure:

1. **Header (Static):** Batch Name | Age (Weeks) | Species Icon | Sync Status
2. **Health Pulse (Dynamic):** Color-coded status card
3. **KPI Strip:** Mortality % | FCR | Current Weight
4. **Action Grid:** Large buttons for high-frequency tasks

## Data Tables (Mobile)

On mobile, tables transform to cards:

```
┌─────────────────────────────────────────────┐
│ Jan 15, 2026                    ₦45,000     │
│ 50 birds @ ₦900/bird                        │
│ Customer: Alhaji Musa           [View →]    │
└─────────────────────────────────────────────┘
```

## Navigation Hierarchy

### Operations (The "Now")

- Farm Overview
- Batches
- Tasks

### Inventory (The "Resources")

- Feed Store
- Medicine Cabinet

### Analysis (The "Business")

- Credit Passport
- Financial Reports

### Ecosystem (The "Network")

- Customers
- Suppliers

## Related Skills

- `rugged-utility` - Touch targets and visual design
- `offline-first` - Sync status indicators