Akademiacademy / vibe-102 / static-layout

Static App Layout

Apa ini

Static layout ialah screen sebelum app berfungsi.

Ia ikut project brief dan design/theme direction, tapi belum ada add, update, delete, atau save behavior.

Kenapa penting

Bina screen sebelum logic.

Kalau layout jelas, coding step selepas itu lebih senang test.

Apa nak buat

Minta coding agent bina static layout sahaja:

Copy prompt

CONTEXT:
I am building my Vibe 102 mini app.
The React + Vite + Tailwind project runs on localhost.
Read project-brief.md in the project root.
Use project-brief.md as the source of truth.
If project-brief.md is missing, stop and ask me to create it before editing.

TASK:
Build only the static layout for this app.

Include:
- app title
- short subtitle
- input field
- add button
- empty list area
- small localStorage note
- mobile-friendly container
- Tailwind styling that follows the design/theme direction in the brief

Rules:
- do not add functionality yet
- do not add state yet
- do not use localStorage yet
- do not add filters, charts, dashboard cards, routing, APIs, or login
- explain which files changed
- give me one browser check

Kalau AI sudah bina layout, jangan rebuild. Check sama ada ia match brief, muat mobile width, dan belum ada behavior.

Mistake biasa

Tambah state sebelum screen readable.
Buat UI terlalu fancy sebelum app berfungsi.
Biar input atau button overflow di mobile.
Abaikan design/theme section dalam brief.

Vibe 102 / Checkpoint sekarang

Static Layout

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 16 checkpoints complete.