State Matrix Prompt

A prompt technique that lists every display state a component needs to handle in a table or structured format. Ensures Bolt builds all edge cases — not just the happy path — in a single generation pass.

Syntax

bolt-new

Build the [ComponentName] component.

STATE MATRIX:
| Condition | Display |
|-----------|--------|
| Loading | [description] |
| Empty | [description] |
| Error | [description] |
| [State N] | [description] |
| Populated | [full UI description] |

Example

bolt-new

Build the NotificationBell component.

STATE MATRIX:
| Condition | Display |
|-----------|--------|
| 0 unread | Bell icon, no badge |
| 1–9 unread | Bell + red badge with count |
| 10+ unread | Bell + red badge "9+" |
| Loading | Bell with pulse animation |
| Error | Bell only, hover tooltip: "Couldn't load" |
| Dropdown open | Bell highlighted, list below |
| Dropdown empty | "No notifications" centered |

Tech: React + TypeScript + Tailwind
Follow .kiro/steering/tech.md conventions.