In the video, Cynthia demonstrates using GitHub Copilot with custom chat modes and prompts to build a mobile-friendly, responsive UI for a note-taking app, enhancing features like layout adaptation, category navigation, and real-time search. She also showcases generating comprehensive documentation and emphasizes the effectiveness of prompt-driven development for streamlining workflows and improving app functionality.
In this video, Cynthia demonstrates how to build a mobile-friendly, responsive user interface for a note-taking web application called Note Board using GitHub Copilot and custom chat modes. The app allows users to create notes with checklists and organize them by categories. Cynthia begins by showcasing the app’s current functionality, including editing notes, filtering by categories, and attempting to use the search feature, which is initially not working. She identifies key challenges such as implementing a functional search and adjusting the layout to work seamlessly across different screen sizes.
To address these challenges, Cynthia uses a custom chat mode called Beast Mode in Copilot, which is designed to keep working until the tasks are fully completed. She also employs custom instructions that include accessibility guidelines and a prompt to generate a README file with general app information. By providing a clear and concise prompt, she instructs Copilot to improve the interface for smaller screens, add grid layouts, adjust forms, buttons, and text for better touch interaction, and enhance navigation for mobile devices. Copilot then analyzes the project and creates a detailed task list to implement these changes.
Copilot begins by adding a viewport meta tag to the HTML templates and media queries to the CSS to ensure the layout adapts to various screen sizes. Cynthia emphasizes the importance of writing specific and brief prompts to get the best results from prompt-driven development. With auto-approve enabled, Copilot also runs a Python command to start the local server, allowing Cynthia to test the app on an iPhone 12 screen size using browser developer tools. She confirms that all components display correctly and function smoothly in the mobile view before committing and pushing the changes to her GitHub repository.
Next, Cynthia asks Copilot to create a dropdown menu for categories on mobile screens to improve navigation. Copilot detects that the viewport tag is already present and only makes necessary adjustments to the HTML, CSS, and JavaScript. The dropdown works well on mobile, allowing users to filter notes by categories, while the sidebar remains available on desktop screens. Cynthia commits and pushes these updates as well. She then instructs Copilot to implement a real-time search feature that filters notes by title or content as the user types, enhancing the app’s usability. Copilot updates the JavaScript rendering function, adds a message for no search results, and modifies the CSS and HTML to support the new functionality.
Finally, Cynthia uses a custom prompt to generate a detailed README file that includes a feature list, quick start guide, and API endpoint overview. She highlights the value of reusable custom prompts for streamlining workflows with Copilot Chat in VS Code. The video concludes with a recommendation to explore the “Awesome Copilot Customizations” repository, which offers a collection of prompts, instructions, and chat modes to further enhance productivity. Overall, the video showcases how prompt-driven development with Copilot can efficiently improve app responsiveness, navigation, search functionality, and documentation.