Make my app responsive and accessible
By VibeCoderHQ|Published on 10/31/2025
PromptingCursorNext.js
Use this once a feature works on desktop but looks broken on a phone or fails accessibility basics. Best in Cursor or Claude Code that can see and edit your components. It audits before it edits, so you get a punch list first, and the explicit 44px tap target and WCAG AA contrast rules catch the issues generic requests miss.
Prompt Text
Audit and fix [THIS PAGE / THIS COMPONENT / the whole app] so it works well on mobile and is accessible. Do not redesign it. Keep the current look and content.
Responsive:
- Make it look right from 375px wide up to desktop. Nothing should overflow horizontally or need side-scrolling.
- Stack columns on mobile, use readable font sizes, and make sure buttons and tap targets are at least 44px.
- Check navigation, tables, forms, and any modals specifically, since those break most often.
Accessibility:
- Every image has meaningful alt text (empty alt if purely decorative).
- Every form input has a real label. Buttons and links have clear text or an aria-label.
- Color contrast meets WCAG AA. Flag any text that fails and suggest a fixed color.
- The whole thing is usable with a keyboard, and focus states are visible.
- Use correct semantic HTML (nav, main, button, heading order) instead of divs for everything.
First give me a short list of the problems you found, grouped by page or component. Then fix them one at a time, and tell me what changed and why after each.Join the vibe coder community
Weekly prompts, tools, and success stories to help you build and monetize with AI.
Unsubscribe any time.
Reviews
No reviews yet. Be the first to review!