Academyacademy / vibe-102 / static-layout

Static App Layout

What this is

Static layout is the screen before the app works.

It follows your project brief and design/theme direction, but it has no add, update, delete, or save behavior yet.

Why it matters

Build the screen before the logic.

If the layout is clear, the next coding steps become easier to test.

What to do

Ask your coding agent to build only the static layout:

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

If AI already built the layout, do not rebuild it. Check whether it matches the brief, fits on mobile width, and has no behavior yet.

Common mistakes

Adding state before the screen is readable.
Making the UI too fancy before the app works.
Letting the input or buttons overflow on mobile.
Ignoring the design/theme section from the brief.

Vibe 102 / Current checkpoint

Static Layout

Ready to stamp - Saved in this browser only.

0 of 16 checkpoints complete.