Academyacademy / vibe-102 / static-layout

Static App Layout

What this is

Static layout is the screen before the app works.

It has the shape of the app, but 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 AI assistant to build only the static layout:

Copy prompt
CONTEXT:
I am building my Vibe 102 mini app.

CURRENT STATE:
The React + Vite + Tailwind project runs on localhost.

TASK:
Build only the static layout.

Include:
- app title
- short subtitle
- input field
- add button
- empty list area
- mobile-friendly container

Rules:
- do not add functionality yet
- do not use localStorage yet
- keep it beginner-friendly
- explain which files changed

Test on desktop and mobile width.

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.

Vibe 102 / Current checkpoint

Static Layout

Ready to stamp - Saved in this browser only.

0 of 11 checkpoints complete

0 of 11 checkpoints complete.