Copy and paste these prompts into Claude Code, Codex, Cursor, or any other coding agent. Run them one at a time, and test your app after each change. 1.Build a Toast Notification System "Implement a consistent toast/notification system for transient feedback across my app. Support distinct types (success, error, warning, info) with appropriate styling and icons, auto-dismiss after a sensible duration (with errors persisting longer or until dismissed), allow manual dismissal, stack multiple notifications cleanly, and position them consistently without blocking important content. Make them accessible via ARIA live regions and pausable on hover. Replace any ad-hoc alerts with this system. Show me the notification system and where it's now used." 2.Write Clear Helpful Error Messages "Audit all the error and validation messages in my app and rewrite the unhelpful ones. Make each message specific (what exactly is wrong), constructive (how to fix it), and human (friendly, not robotic or blaming) — for example replace "Invalid input" with "Please enter a valid email address like
[email protected]". Avoid technical jargon and error codes in user-facing copy, and place messages where the user is looking. Show me the worst offenders and the improved messaging you wrote for each." 3.Establish a Modular Type Scale "Audit every font-size used across my app and consolidate them into a coherent modular type scale derived from a consistent ratio (for example a 1.25 major-third scale) anchored to a sensible base body size of around 16px. Define named tiers — display, h1–h4, body-large, body, small, and caption — and map each piece of text content to the appropriate tier based on its role. Refactor components to use these tiers instead of one-off sizes. Report the scale you established and how many distinct sizes you eliminated." 4.Add Fluid Responsive Typography "Make my typography scale fluidly between screen sizes instead of jumping at breakpoints. Use CSS `clamp()` for headings and large display text so font-size interpolates smoothly between a minimum (mobile) and maximum (desktop) value based on viewport width, with sensible bounds so text never gets uncomfortably small or large. Apply this primarily to large headings where the size difference matters most, keeping body text at a stable, readable size. Show me which text styles you made fluid and the min/max values you chose."