claude-code-first-project/prompts/05-make-responsive.md

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