Start Here · 06 / 07
Build the localStorage App
Build the mini app one Work Card at a time — input, item list, update, delete, and localStorage — and prove the data survives a refresh.
Vibe 102 / Current checkpoint
Build App
Ready to stamp - Saved in this browser only.
0 of 7 checkpoints complete.
Build the localStorage App
You pass this stage when add, update, delete, and save all work, and your items survive a page refresh.
What this is
This is the implementation stage. Antigravity builds your mini app one Work Card at a time from the saved plan. You are building this one pattern and nothing more:
input -> item list -> update item -> delete item -> save locally -> refresh proofNo backend, login, database, API, charts, image upload, or multi-page routing.
Why it matters
Small Work Cards keep the build understandable and recoverable. If a chat or credit limit ends, build-status.md tells the next session exactly where to continue. Building the whole app in one prompt hides the learning and is hard to fix.
What to do
Split the build into small Work Cards
Your blueprint should break the pattern into cards roughly like this:
| Work Card | Result you can see |
|---|---|
| 1. Layout + add input | An input and an "Add" button render |
| 2. Item list | Added items appear in one list |
| 3. Update / mark | You can mark or change one item |
| 4. Delete | You can remove one item |
| 5. Save with localStorage | Items load from and save to localStorage |
Build one Work Card at a time
Use the shared implementation loop from Build One Work Card. Paste this for each card:
If design.md does not explain the item card, input form, update state, delete style, empty state, and mobile list, stop and return to Data Shape + Design.
Read build-status.md, build-blueprint.md, design.md, and the current work card listed in build-status.md.
Implement only the current work card.
Rules:
- one list of items only
- no backend, login, database, API, or extra pages
- follow the visual rules in design.md
- do not copy external brand identity, logos, testimonials, stats, or images
- keep it readable on mobile
After finishing:
1. run the verification steps,
2. summarize what changed,
3. update build-status.md,
4. stop.After each card, open the preview and check the visible result before starting the next card. Also check the design still holds:
- Does the UI still match design.md?
- Is the item list readable on mobile?
- Are update/delete controls obvious and safe?
- Is the empty state useful?Do not let the agent run several cards automatically.
Prove the data survives a refresh
localStorage is only proven when the data comes back:
- Add two or three items.
- Update or mark one.
- Delete one.
- Refresh the page.
- Confirm the remaining items are still there.
If the list is empty after refresh, the localStorage save or load is not wired correctly. Fix that one Work Card before moving on.
Common mistakes
- Building the whole app in one uncontrolled prompt.
- Adding a second list, login, or a database.
- Claiming localStorage works without a refresh test.
- Accepting code without opening the preview.
- Updating the code but not
build-status.md.