# 3 Steps To Build ANY App with AI (ask, plan, agent) Source: https://www.youtube.com/watch?v=Zr3lrpA6iY4 Recap page: https://rapidrecap.app/video/Zr3lrpA6iY4 Generated: 2025-11-12T01:32:04.297+00:00 --- ## Quick Overview The video outlines a three-step workflow for building applications with AI assistance using the Cursor IDE: Ask, Plan, and Agent, demonstrated by fixing a Tailwind CSS v4 opacity syntax migration issue where modal overlays lost opacity after an upgrade from v3 to v4, which the AI model resolved by providing a comprehensive plan and executing the necessary code changes. **Key Points:** - The core workflow demonstrated for building apps with AI involves three modes: Ask for providing context, Plan for generating detailed steps, and Agent for automatic execution. - The specific bug addressed was the loss of opacity on modal overlays after upgrading Tailwind CSS from v3 to v4, where deprecated `bg-opacity-*` utilities needed replacement with the new slash syntax (e.g., `bg-black/75`). - The AI model, Composer 1, successfully generated a detailed plan identifying 15 files requiring updates for modal overlays and 25+ instances for hover state opacity changes. - The solution involved migrating modal overlay classes from `bg-black bg-opacity-75` to `bg-black/75` and updating hover states from `hover:bg-opacity-90` to color-specific slash notations like `hover:bg-rh-green/90`. - The presenter emphasizes that even without deep development experience, users can effectively use the Plan mode to understand the AI's proposed steps before execution. - After the Agent successfully executed the fix, the modal overlays' opacity was restored, proving the efficacy of the Ask-Plan-Agent sequence for complex code fixes. ![Screenshot at 0:33: The initial display of the Cursor IDE showing the Agent options \(Agent, Plan, Ask\) and the web application \(Thumio\) context before the problem-solving workflow begins.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-00-33.png) **Context:** The video features a developer demonstrating an advanced workflow within the Cursor AI IDE, utilizing its integrated agent capabilities to solve a specific coding issue related to a dependency upgrade. The issue stems from migrating the project's styling framework, Tailwind CSS, from version 3 to version 4, which introduced breaking changes in how opacity utility classes are declared, causing visual elements like confirmation dialogs and other pop-ups to render without the intended semi-transparency. ## Detailed Analysis The demonstration centers on using Cursor's AI capabilities through a three-stage process: Ask, Plan, and Agent. First, the user employs the Ask mode (0:47) to query the AI about a specific bug encountered after upgrading Tailwind CSS from v3 to v4: modal pop-ups losing opacity. The AI model, Composer 1, analyzes the context and provides a detailed Markdown summary of changes required, listing critical files like `ConfirmationDialog.tsx` and `ProjectsPanel.tsx` (2:33). The user then switches to Plan mode (3:07) to generate a precise, executable roadmap, which includes updating modal overlays and hover states using the new Tailwind v4 syntax (2:51). Finally, switching to Agent mode (3:06) allows the AI to execute the entire plan automatically, modifying 15 files to correct the opacity issue (4:45). The presenter highlights that this systematic approach, akin to talking to a robot programmer, provides highly specific and context-aware solutions, allowing developers of any skill level to tackle complex migration tasks efficiently. ### AI Workflow Overview - Ask mode for context provision - Plan mode for detailed steps generation - Agent mode for automated execution ### Tailwind Opacity Bug Details - Tailwind CSS v4 deprecated `bg-opacity-*` utilities; modal overlays needed replacement of `bg-black bg-opacity-75` with `bg-black/75`. ### AI Generated Plan - Identified 5 critical modal overlay instances and 25+ hover state instances requiring updates across multiple files. ### Implementation Steps - 1. Update modal overlays; 2. Update hover states; 3. Verify no other opacity utilities remain; 4. Test modal overlays for correct display. ### Execution and Verification - Agent executed the plan, modifying 15 files, successfully restoring the correct opacity to the modal overlays, confirmed by re-testing the UI interaction (4:50). ![Screenshot at 0:00: Initial view showing the Cursor interface with the Agent selection dropdown open, featuring Agent, Plan, and Ask modes.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-00-00.png) ![Screenshot at 0:33: The Thumio landing page being viewed within the Cursor environment, setting the context for the application being worked on.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-00-33.png) ![Screenshot at 0:48: The user switches from Agent mode to Ask mode and inputs the specific Tailwind opacity issue after the v4 upgrade.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-00-48.png) ![Screenshot at 2:32: The AI model generates a detailed plan, identifying specific files and the required syntax migration rules for Tailwind v4 opacity classes.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-02-32.png) ![Screenshot at 3:17: The AI model generates a comprehensive plan in Plan mode, detailing the exact steps and files to modify for the fix.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-03-17.png) ![Screenshot at 4:45: The results pane showing that 15 files were edited, confirming the Agent executed all steps of the generated plan.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-04-45.png) ![Screenshot at 4:53: The presenter tests the fix by adding a hat to the image, confirming the modal overlay \(which previously lacked opacity\) now appears correctly.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-04-53.png) ![Screenshot at 5:07: The 'Share Your Feedback' modal appears after the fix, demonstrating that the modal functionality, including its background overlay, is working correctly.](https://ss.rapidrecap.app/screens/Zr3lrpA6iY4/00-05-07.png)