📚 Prompt Library

Each prompt below maps to a TODO in your starter project's requirements.md. The flow on the day is:

1. Open your starter project in Kiro (see Hackathon Day Guide → Section 5).
2. Read requirements.md.
3. Pick a TODO.
4. Find the matching prompt below for your theme.
5. Copy it into Kiro's Chat Panel and hit Enter.

Start at TODO 1

TODOs build on each other — TODO 1 sets things up that TODO 2 uses, and so on. Don't skip ahead.

The five themes match the five starter projects:

Theme	Project	Jump to
🌊 Ocean / Water Pollution	Water Watch NZ	↓
💛 Youth Wellbeing	How Are You Today?	↓
🍲 Community Food Sharing	Kai Share	↓
🦎 Native Species Conservation	Kaitiaki Watch	↓
♻️ School Sustainability	Green School Tracker	↓

---

🌊 Ocean / Water Pollution

Project: Water Watch NZ — a pollution reporting tool for beaches and rivers across Aotearoa.

TODO 1 — Report form

In public/index.html and public/app.js, add a pollution report form above
the reports list. The form needs these fields:
- Location name (text input)
- Pollution type (dropdown: Plastic, Sewage, Chemical, Other)
- Description (textarea)
- Date (date input)
- Submit button

When submitted, POST the data as JSON to /api/reports, then refresh the
reports list so the new report appears.

TODO 2 — Reports list

In public/app.js, fetch reports from GET /api/reports and display them
as cards below the form. Each card should show: location, pollution type,
description, and date. Use simple bordered cards with padding.

TODO 3 — Severity rating

Add a "Severity" dropdown to the report form with options: Low, Medium, High.
Include severity in the POSTed data. On each report card, show a colour-coded
badge using the existing CSS classes:
- Low → .badge-low (green)
- Medium → .badge-medium (orange)
- High → .badge-high (red)

TODO 4 — Filter by type

Add filter buttons above the reports list: All, Plastic, Sewage, Chemical, Other.
When a button is clicked, show only reports matching that type. The "All" button
shows everything. Filter the existing reports list in JavaScript — no page reload.

TODO 5 (Stretch) — Dashboard

Add a stats dashboard at the top of the page showing:
- Total reports submitted
- Most common pollution type
- A simple bar chart of reports per month using HTML and CSS (no chart libraries)

Calculate everything from the existing reports list — no new API needed.

---

💛 Youth Wellbeing

Project: How Are You Today? — a daily mood tracker that helps young people check in with themselves and spot patterns.

TODO 1 — Mood buttons

In public/index.html and public/app.js, add 5 mood buttons:
- 😄 Great
- 🙂 Good
- 😐 Okay
- 😕 Not great
- 😞 Rough

When a button is clicked, POST { mood, date } to /api/entries with today's
date in ISO format, then refresh the history list. Use big, friendly buttons.

TODO 2 — Mood history

In public/app.js, fetch entries from GET /api/entries and display them as
a list. Each item shows the emoji, the mood label, and the date.
Show the most recent entry first.

TODO 3 — Journal note

Add an optional text input below the mood buttons labelled "Add a note
(optional)". When a mood button is clicked, include the note text in the
POST to /api/entries. Show the note alongside the mood and date in the
history list. Clear the note field after saving.

TODO 4 — Weekly summary

Add a "This Week" section above the mood history showing how many times
each mood has been logged in the last 7 days. Display each mood emoji
followed by its count, e.g. "😄 × 3   🙂 × 2   😐 × 1".
Calculate from the existing entries list — no new API needed.

TODO 5 (Stretch) — Self-care suggestions

When a mood button is clicked, show a short, kind self-care suggestion
below the buttons. Match suggestions to the mood:
- 😄 Great → "Keep it up — share your energy with someone today."
- 🙂 Good → "Nice. Maybe spend a few minutes outside."
- 😐 Okay → "Try a 5-minute walk or a glass of water."
- 😕 Not great → "Talk to a friend, or take a break and breathe."
- 😞 Rough → "It's okay to not be okay. Talk to someone you trust."

---

🍲 Community Food Sharing

Project: Kai Share — a community food sharing board where people can post food they have spare and others can claim it.

TODO 1 — Food listing form

Add a form above the listings grid for posting a food listing with these
fields:
- Food name (text input)
- Description (textarea)
- Suburb / area (text input)
- Expiry date (date input)
- Post button

When submitted, POST the data as JSON to /api/listings and refresh the
listings grid.

TODO 2 — Listings cards

In public/app.js, fetch listings from GET /api/listings and display them
as cards in a grid. Use the existing CSS class .food-card for each card.
Each card shows: food name, suburb/area, and how many hours until expiry.
If a listing is already claimed, also add the .claimed class so it greys out.

TODO 3 — Search bar

Add a search input above the listings grid. As the user types, filter the
visible cards to show only listings where the food name OR suburb/area
matches the search text (case-insensitive). Don't reload the page or call
the API — filter the cards in JavaScript.

TODO 4 — Claim button

On each unclaimed listing card, add a "Claim" button using the existing
CSS class .claim-btn. When clicked, send PATCH /api/listings/:id/claim.
After the response, add the .claimed class to the card and disable the
button.

TODO 5 (Stretch) — Stats section

Add a stats bar at the top of the page showing:
- Total listings posted
- Total listings claimed
- Most active suburb (the suburb with the most listings)

Update these numbers automatically as listings are added or claimed.
Calculate from the existing listings list — no new API needed.

---

🦎 Native Species Conservation

Project: Kaitiaki Watch — a sighting tracker for kiwi, kākāpō, tūī, and other taonga species of Aotearoa.

TODO 1 — Sighting form

Add a form for logging a native species sighting using the pre-existing
species dropdown (#species-select), plus:
- Location (text input)
- Note / description (textarea)
- Date (date input)
- Submit button

When submitted, POST the data as JSON to /api/sightings and refresh the
sightings list.

TODO 2 — Sightings list

In public/app.js, fetch sightings from GET /api/sightings and display them
as a list. Each item shows: species name, location, note, and date.
The server already returns them sorted by most recent — render them in order.

TODO 3 — Species profile card

When a species is selected in #species-select, show a profile card with:
- Species name
- Conservation status, using a badge with the matching CSS class:
  .status-critical, .status-endangered, .status-vulnerable, or .status-nothreat
- One fun fact

Use the SPECIES_DATA object already in public/app.js — it has the conservation
status and fun fact for each species.

TODO 4 — Leaderboard

Add a leaderboard showing total sightings count per species, sorted highest
to lowest. Calculate from the sightings list already loaded in JavaScript —
no new API call needed. Show as a simple list, e.g. "Tūī — 5 sightings".

TODO 5 (Stretch) — Conservation tips page

Add a "Conservation Tips" section listing 5 practical actions people can
take to protect native species (e.g. plant native trees, keep cats indoors
at night, build a wētā hotel). Each tip has:
- A title
- A short description
- A difficulty rating: Easy / Medium / Hard

Use a card layout with the difficulty shown as a small badge.

---

♻️ School Sustainability

Project: Green School Tracker — a waste audit tool that helps a school measure and reduce its waste over time.

TODO 1 — Waste audit form

Add a form to log a waste audit entry with these fields:
- Waste type (dropdown: Landfill, Recycling, Compost, E-waste)
- Weight in kg (number input — accept decimals)
- Date (date input)
- Submit button

When submitted, POST the data (weight as a number, not a string) to
/api/entries and refresh the audit table.

TODO 2 — Audit table

In public/app.js, fetch entries from GET /api/entries and display them in
a table sorted by date (most recent first). Columns: Date | Waste Type |
Weight (kg). Apply the matching CSS class to the waste type cell:
- Landfill → .type-landfill
- Recycling → .type-recycling
- Compost → .type-compost
- E-waste → .type-ewaste

TODO 3 — Waste summary

Add a summary section above the audit table showing total weight per waste
type. Highlight the waste type with the highest total — bold it or add a ⭐.
Calculate from the entries list already loaded in JavaScript.

TODO 4 — Class leaderboard

Add a "Class" dropdown to the audit form (Room 1, Room 2, Room 3, Room 4).
Include the class with each posted entry. Add a leaderboard showing which
class has contributed the most compost weight, ranked highest to lowest.

TODO 5 (Stretch) — Sustainability score

Calculate a sustainability score: percentage of total waste weight going to
compost or recycling vs landfill. Display it as a progress bar using the
existing .score-bar and .score-fill CSS classes. Colour the bar based on
the score:
- 0–40% → red
- 41–70% → orange
- 71–100% → green

Add a trend arrow (↑ or ↓) showing whether the score improved compared to
the previous week.

---

🪄 Make It Your Own — Ship 2 of Your Own Features

The TODOs above are the core. Every team is expected to add at least two features they ideate themselves — features that matter to the persona you built during Empathise and Ideate. This is where your project stops looking like everyone else's and starts looking like yours.

Write your own prompts for these two features. Keep them small and specific — one button, one field, one view each. For example, adapting the wellbeing app for a shy 14-year-old persona:

"Make this form feel friendly for a 14-year-old who's new to the app. Use brighter colours, bigger buttons, and a friendlier tone in the labels."

Or:

"Add a small message at the top of the page that says 'Built by Team [name] for [persona]'."

Judges notice ideation

A working starter with two thoughtful, persona-driven features beats a working starter on its own. This is how the ideation phase earlier in the day translates into your build.

✨ Quick Prompt Tips

When writing your own prompts (instead of copying from above), be specific. A good prompt tells Kiro:

1. What you're building (a form, a list, a map, a chart?)
2. What data it needs (which fields?)
3. Where it goes (new section, above the list, in the sidebar?)

❌ Vague	✅ Specific
"Add a search"	"Add a search input above the listings grid that filters cards by name as the user types"
"Make it look better"	"Use ocean blue as the page background and make the headings white and larger"
"Fix the form"	"The date field doesn't save when I submit — fix the date picker"

Iterate, don't overthink

Your first prompt doesn't have to be perfect. Start small, see what Kiro builds, then refine. That's how real developers work too.