open/claude-code-first-project
1
0
Fork 0
Code Activity Actions
claude-code-first-project/prompts/05-make-responsive.md
Kjell Tore Guttormsen ec708ba943 Initial commit: todo app guide with 5 prompts and examples 
Complete companion repo for "Your First Hour with Claude Code" article.
Includes step-by-step prompts, example output, troubleshooting, and cost guide.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 16:04:07 +01:00

847 B
Raw Blame History

Prompt 05: Make It Mobile-Friendly

Copy and paste this into Claude Code:

Make the todo app responsive and mobile-friendly. Requirements:

  • Works well on phone screens (375px wide and up)
  • Touch-friendly: buttons and inputs are at least 44px tall
  • Category filters wrap to multiple lines on small screens
  • Search bar is full width on mobile
  • Task text does not overflow, long text wraps properly
  • Add a proper viewport meta tag if missing
  • Swipe-to-delete would be a bonus but not required
  • Test: the app should look good on both a phone screen and a desktop monitor
  • Keep all existing functionality working

What to Expect

  • Open index.html on your phone (or use browser dev tools to simulate a phone screen)
  • Everything fits and is easy to tap
  • No horizontal scrolling
  • Filter buttons wrap neatly on small screens