Mouse Colony Breeding Planner

What you’re building

If you manage a mouse colony, you know the drill: spreadsheets with mating dates, sticky notes on cage cards, mental math for weaning deadlines, and crossed fingers about genotype ratios. One missed weaning date and you have overcrowded cages. One forgotten pairing and your timeline slips by a month.

You are going to build a visual breeding planner that replaces all of that in the next 20 minutes.

💬This is your proof-of-concept

Colony management is one of the most time-consuming parts of working with animal models. A tool that visualizes your entire breeding pipeline — births, weanings, expected genotypes — saves hours per week and prevents costly mistakes like missed weanings or redundant crosses. This is the kind of tool you demo to your facility manager and say, “I built this in 20 minutes.”

By the end of this lesson you will have a standalone mouse colony breeding planner that runs entirely in the browser. It loads embedded sample breeding data, calculates expected birth and weaning dates, predicts Mendelian genotype ratios for each cross type, and displays a timeline view using Chart.js. You will build it by giving a single prompt to an LLM CLI tool.

ℹSoftware pattern: Data-driven timeline planner

Input records → calculate derived dates → predict outcomes → visualize on a timeline. This pattern works for project management, manufacturing schedules, crop rotation planning — any domain where you track events with predictable intervals.

🔍Domain Primer: Key mouse colony terms you'll see in this lesson

New to mouse colony management? Here are the key terms you will encounter:

Sire / Dam — The male (sire) and female (dam) mouse in a breeding pair. These terms come from animal husbandry and are standard in vivarium record-keeping.
Heterozygous (het) — Carrying one copy of a mutant allele and one wild-type copy. Written as +/- or gene/+. Het mice often look normal but carry the mutation.
Homozygous (hom) — Carrying two copies of the same allele — either both mutant (hom mutant, -/-) or both wild-type (hom WT, +/+).
Wild-type (WT) — The normal, unmodified genotype (+/+). WT mice serve as controls and breeding stock.
Mendelian ratios — The expected proportions of genotypes in offspring based on parental genotypes. A het x het cross produces 25% hom mutant, 50% het, 25% WT (a 1:2:1 ratio). A het x WT cross produces 50% het, 50% WT (a 1:1 ratio). These ratios assume autosomal inheritance. X-linked alleles (e.g., X-linked Cre drivers) produce different ratios for male and female offspring.
Gestation period — The time from mating to birth. In mice, this is approximately 19-21 days (we use 21 as the standard estimate).
Weaning age — The age at which pups are separated from the dam and housed independently. Standard weaning is 21 days post-birth.
Genotyping — Testing pups (usually via tail or ear biopsy) to determine their genotype. Typically done around weaning age.
F1 / F2 generation — F1 is the first generation of offspring from a cross. F2 is the second generation (offspring of F1 x F1 crosses).
Cage card — The physical label on each cage recording strain, genotypes, dates, and IDs.

You do not need to be an expert in genetics — the AI tool handles the ratio math. You just need to know what information to track.

Who this is for

GEAM facility staff and animal models technicians who manage breeding colonies for gene editing experiments and need to plan weanings and genotyping weeks ahead.
Graduate students maintaining their own small colonies for thesis research who want to stop relying on memory and sticky notes.
PIs and lab managers who need a quick visual overview of the colony pipeline for lab meetings, IACUC protocols, or grant progress reports.

ℹCore Facility Context

Genome editing and animal models facilities manage dozens of active breeding colonies across multiple mouse strains. Colony managers juggle hundreds of cage cards. A visual planner that shows the next two months of expected births and weanings — with genotype predictions — transforms colony management from reactive firefighting into proactive planning.

The showcase

Here is what the finished planner looks like once you open the HTML file in a browser:

Summary cards at the top: total active cages, active strains, expected pups this month, upcoming weanings in the next 7 days, cages awaiting genotyping.
Add Breeding Pair form where you enter cage ID, strain, sire/dam IDs, genotypes, mating date, cross type, and expected litter size.
Breeding pair table with all active pairs showing strain, calculated expected birth date (mating date + 21 days), weaning date (birth + 21 days), and Mendelian genotype predictions displayed as expected pup counts.
Timeline view (Chart.js horizontal bar chart in Gantt style) showing each cage as a row, with colored bars for gestation period (mating → birth) and nursing period (birth → weaning).
Genotype predictions panel showing a pie/doughnut chart of expected offspring genotype distribution for the selected cross type.

Everything runs client-side. No data leaves the browser. You can email the file to a colleague and it works immediately.

The prompt

Open your terminal , navigate to a project folder , start your AI CLI tool (e.g., by typing claude), and paste this prompt:

Build a single self-contained HTML file called colony-planner.html that serves as
a mouse colony breeding planner. Requirements:

1. EMBEDDED SAMPLE DATA
   Preload the following breeding pair data as a JavaScript array of objects:
   [
     { cage: "C001", strain: "C57BL/6J", sire: "M101", sireGeno: "het", dam: "F201", damGeno: "het", matingDate: "2026-03-01", crossType: "het x het", expectedLitterSize: 8 },
     { cage: "C002", strain: "129S1", sire: "M102", sireGeno: "het", dam: "F202", damGeno: "WT", matingDate: "2026-03-05", crossType: "het x WT", expectedLitterSize: 7 },
     { cage: "C003", strain: "BALB/c", sire: "M103", sireGeno: "hom", dam: "F203", damGeno: "het", matingDate: "2026-03-08", crossType: "hom x het", expectedLitterSize: 9 },
     { cage: "C004", strain: "C57BL/6J", sire: "M104", sireGeno: "het", dam: "F204", damGeno: "het", matingDate: "2026-03-10", crossType: "het x het", expectedLitterSize: 6 },
     { cage: "C005", strain: "FVB/N", sire: "M105", sireGeno: "WT", dam: "F205", damGeno: "het", matingDate: "2026-03-12", crossType: "WT x het", expectedLitterSize: 8 },
     { cage: "C006", strain: "CD-1", sire: "M106", sireGeno: "het", dam: "F206", damGeno: "het", matingDate: "2026-03-15", crossType: "het x het", expectedLitterSize: 7 },
     { cage: "C007", strain: "NSG", sire: "M107", sireGeno: "hom", dam: "F207", damGeno: "WT", matingDate: "2026-03-18", crossType: "hom x WT", expectedLitterSize: 8 },
     { cage: "C008", strain: "129S1", sire: "M108", sireGeno: "het", dam: "F208", damGeno: "hom", matingDate: "2026-03-20", crossType: "het x hom", expectedLitterSize: 6 },
     { cage: "C009", strain: "C57BL/6J", sire: "M109", sireGeno: "het", dam: "F209", damGeno: "het", matingDate: "2026-02-20", crossType: "het x het", expectedLitterSize: 9 },
     { cage: "C010", strain: "BALB/c", sire: "M110", sireGeno: "WT", dam: "F210", damGeno: "WT", matingDate: "2026-02-25", crossType: "WT x WT", expectedLitterSize: 7 }
   ]

2. DATE CALCULATIONS
   - Expected birth date = mating date + 21 days (mouse gestation)
   - Weaning date = birth date + 21 days (standard weaning age)
   - Genotyping due = weaning date (genotyping happens at weaning)
   - Color-code dates: red if overdue (past today), amber if within 3 days, green if future

3. MENDELIAN GENOTYPE PREDICTIONS
   For each cross type, calculate expected pup counts from the litter size:
   - het x het: 25% hom mutant (-/-), 50% het (+/-), 25% WT (+/+)
   - het x WT (or WT x het): 50% het (+/-), 50% WT (+/+)
   - hom x het (or het x hom): 50% hom mutant (-/-), 50% het (+/-)
   - hom x WT: 100% het (+/-)
   - WT x WT: 100% WT (+/+)
   Display predictions as a small table per cage row and a doughnut chart

4. SUMMARY CARDS (top of page, update dynamically)
   - Total active cages
   - Active strains (count of unique strain names)
   - Expected pups this month (sum of expected litter sizes for births this month)
   - Upcoming weanings in next 7 days (count)
   - Cages awaiting genotyping (birth occurred but weaning date not yet passed)

5. TIMELINE VIEW
   - Chart.js horizontal bar chart in a Gantt-style layout
   - Each cage is a row on the Y-axis
   - Two stacked bars per cage: gestation period (blue) and nursing period (green)
   - Today marker as a vertical red dashed line
   - X-axis shows dates spanning the full range of data

6. ADD BREEDING PAIR FORM
   - Inputs: Cage ID, Strain (text field, required), Sire ID, Sire Genotype
     (dropdown: het/hom/WT), Dam ID, Dam Genotype (dropdown), Mating Date,
     Expected Litter Size
   - Cross type auto-determined from sire/dam genotypes
   - Adding a pair updates all views immediately

7. DESIGN
   - Dark theme: background #0f172a, cards #1e293b, text #e2e8f0, accent #10b981
   - Clean sans-serif font (Inter from Google Fonts CDN)
   - Responsive layout, summary cards in a row, table and timeline below
   - Color legend for timeline bars and genotype labels

8. TECHNICAL
   - Pure HTML/CSS/JS in one file, no build step
   - Chart.js loaded from CDN (https://cdn.jsdelivr.net/npm/chart.js)
   - chartjs-plugin-annotation from CDN for the today-line
   - All date math using native JavaScript Date objects

💡Copy-paste ready

That entire block is the prompt. Paste it as-is. The embedded sample data gives the LLM concrete examples of every cross type, so it correctly implements all the Mendelian ratio logic on the first try. The specificity about date calculations and color-coding prevents the most common follow-up fixes.

ℹUpdate the sample dates

The mating dates in the sample data (February-March 2026) are examples. If you are using this lesson after those dates have passed, change the dates in the prompt to reflect your current month so the timeline and color-coded date alerts are meaningful.

What you get

After the LLM finishes (typically 60-90 seconds), you will have a single file: colony-planner.html. Open it in any browser.

Expected output structure

colony-planner.html    (~500-700 lines)

You should see:

Five summary cards across the top showing cage count (10), active strains, expected pups, upcoming weanings, and genotyping status.
A breeding pair table with all 10 entries. Cages C009 and C010 (mated in February) should show birth dates that have already passed, with weaning dates color-coded based on proximity to today.
Mendelian predictions for each cage — for example, cage C001 (het x het, litter size 8) should show 2 hom mutant, 4 het, 2 WT.
A timeline chart with 10 horizontal rows, blue bars for gestation and green bars for nursing, and a red dashed line at today’s date.
An add-pair form at the top or in a sidebar. Adding a new pair should instantly update the table, timeline, and summary cards.

If something is off

Problem	Follow-up prompt
Timeline bars not showing	`The Chart.js horizontal bar chart is empty. Make sure you're using a "bar" chart with indexAxis: "y" and the data values are date ranges converted to timestamps. Each bar needs a start and end value using the floating bar format [start, end].`
Mendelian ratios wrong for hom x het	`The genotype predictions for hom x het cross show 25/50/25 but should be 50% hom mutant and 50% het (no WT offspring). Fix the Mendelian ratio lookup table.`
Today line missing	`The vertical "today" line is not appearing on the timeline. Make sure chartjs-plugin-annotation is loaded and the annotation is configured as a vertical line with type: "line", scaleID: "x", value: Date.now().`
Date calculations off by one	`The birth dates are showing 20 days after mating instead of 21. Double-check that the date addition adds exactly 21 days using setDate(getDate() + 21).`

🔧

When Things Go Wrong

Use the Symptom → Evidence → Request pattern: describe what you see, paste the error, then ask for a fix.

Symptom

All dates show as 'NaN' or 'Invalid Date' in the table

Evidence

The breeding pair table renders but every date column shows 'Invalid Date'. The summary cards show NaN for pup counts.

What to ask the AI

"The date parsing is failing. My mating dates are in YYYY-MM-DD format. Make sure the Date constructor receives the date string correctly -- try using new Date(dateString + 'T00:00:00') to avoid timezone parsing issues. Also check that the date arithmetic uses setDate/getDate, not string manipulation."

Symptom

Timeline chart renders but all bars are the same width regardless of date range

Evidence

Every cage shows identically-sized bars on the Gantt chart even though mating dates span a month. The Y-axis labels are correct but the X-axis is not scaled to real dates.

What to ask the AI

"The timeline X-axis needs to be a time scale, not a linear scale. Set the X-axis type to 'time' with Chart.js and make sure the chartjs-adapter-date-fns adapter is loaded from CDN. The bar data should use actual Date objects or ISO strings, not arbitrary numbers."

Symptom

Genotype predictions show decimal pup counts like '2.333 het'

Evidence

Cage C004 (het x het, litter size 6) shows '1.5 hom, 3 het, 1.5 WT' instead of whole numbers.

What to ask the AI

"The Mendelian ratio calculation is producing fractional pup counts. Round the expected counts using Math.round(). Display them as whole numbers since you can't have half a pup. Add a note that these are statistical expectations, not guarantees."

Symptom

Adding a new breeding pair does not update the timeline chart

Evidence

I added a new pair using the form and it appears in the table, but the Gantt timeline still shows only the original 10 cages.

What to ask the AI

"The timeline chart is not re-rendering when new data is added. After pushing the new pair to the data array, destroy the existing chart instance with chart.destroy() and recreate it, or update chart.data and call chart.update(). Make sure the Y-axis labels array is also updated with the new cage ID."

How it works (the 2-minute explanation)

You do not need to understand every line of the generated code, but here is the mental model:

Date arithmetic is straightforward: take the mating date, add 21 days for birth, add another 21 for weaning. JavaScript’s Date object handles month boundaries automatically (March 25 + 21 days correctly becomes April 15).
Mendelian predictions are a lookup table: each cross type maps to a set of ratios that get multiplied by litter size. The math is simple multiplication, but encoding the correct ratios for each cross type is the tricky part.
The Gantt timeline uses Chart.js floating bars — each bar has a [start, end] value instead of a single height. With indexAxis: 'y', the bars go horizontal, and each cage gets its own row.
The annotation plugin draws the “today” line as a vertical marker, giving you an instant visual reference for what is overdue, in progress, and upcoming.

🔍For Researchers: Why visual colony planning matters

IACUC protocols require accurate animal counts and justification for breeding. A visual planner that shows expected births, genotype yields, and weaning dates makes protocol amendments faster and more accurate. It also helps during lab meetings — instead of reading cage card numbers off a spreadsheet, you can show the timeline and immediately identify bottlenecks (e.g., three litters weaning in the same week, creating a genotyping backlog).

Customize it

The base planner is useful as-is, but here are single-prompt extensions that make it more powerful:

Add cage density alerts

Add a cage density tracking feature. Each cage has a maximum capacity of 5 adult
mice. After weaning, pups need to be split into new cages. Calculate how many new
cages will be needed based on expected litter sizes and display a warning banner
when upcoming weanings will require more cages than are currently available. Add an
"available empty cages" input field with a default of 10.

Add genotyping checklist

Add a "Genotyping Queue" section below the timeline. For each litter that has
reached weaning age, show a checklist with one row per expected pup. Include
columns for: pup number, expected genotype (from Mendelian prediction), ear tag
number (auto-generated), sample collected (checkbox), result (dropdown: hom/het/WT),
and a "matches prediction" indicator. Add a button to export the checklist as a
CSV for the genotyping lab.

Add pedigree tracking

Add a simple pedigree view. When I click on a cage, show a family tree diagram
using nested HTML divs (no external library needed). Display the sire and dam at
the top, their genotypes, and the expected offspring distribution below. If any
offspring from a previous litter are now breeders themselves, link them so I can
trace lineage across generations. Color-code by genotype: green for WT, yellow
for het, red for hom mutant.

ℹThe customization loop

Notice the pattern: you start with a working tool, then add features one prompt at a time. Each prompt builds on what already exists. The planner evolves from a simple date calculator to a full colony management system — one feature at a time, always with a working tool at each step.

Try it yourself

Open your CLI tool in an empty folder.
Paste the main prompt from above.
Open the generated colony-planner.html in your browser.
Add a new breeding pair using the form and verify the timeline updates.
Pick one customization from the list above and add it.

If this tool saves you even one missed weaning date, it has already paid for itself. Save the file, put it on a shared drive, and share it with your team.

Key takeaways

One prompt, one tool: a detailed, specific prompt with embedded sample data produces a working colony planner in under 2 minutes.
Single-file HTML tools bypass all installation barriers — they run on any lab computer with a browser, which matters in vivarium offices where you cannot install software.
Mendelian ratio logic is simple math, but encoding it correctly matters — specifying every cross type in the prompt prevents the LLM from guessing wrong ratios.
Gantt-style timelines in Chart.js use floating bars — this is a reusable pattern for any project with date ranges (experiments, grant timelines, equipment bookings).
Date arithmetic has edge cases (timezone parsing, month boundaries) — building these into your prompt prevents debugging later.

KNOWLEDGE CHECK

You set up a het x het cross with an expected litter size of 8 pups. According to Mendelian inheritance, how many of those pups do you expect to be heterozygous (+/-)?

KNOWLEDGE CHECK

Why is it important to track weaning dates in a mouse colony?

KNOWLEDGE CHECK

Your colony planner shows that 3 litters are all due for weaning in the same week. What is the most useful action this information enables?

What’s next

In the next lesson, you will build a Cryopreservation & IVF Calculator — a tool that tracks sperm cryopreservation viability rates, calculates media dilution volumes, and helps plan IVF recovery sessions. Same pattern: one prompt, one HTML file, immediate utility for the GEAM facility.

Mouse Colony Breeding Planner

What you'll learn

What you’re building

Who this is for

The showcase

The prompt

What you get

Expected output structure

If something is off

When Things Go Wrong

How it works (the 2-minute explanation)

Customize it

Add cage density alerts

Add genotyping checklist

Add pedigree tracking

Try it yourself

Key takeaways

What’s next