Flutter Devs Boost Productivity with AI Skills

AI-assisted coding operates on a hierarchy of interactions, starting with basic prompts for simple conversational tasks like bug fixes. Above these are 'rules,' which are persistent markdown files containing global project knowledge that the AI consults continuously. The most advanced level is 'skills,' which are modular markdown files that the AI loads only when contextually relevant to a specific task, significantly reducing the computational overhead compared to constantly loading all project rules.

"So instead of reading all the rules that you put in the project rules, it only needs to load a skill that is relevant to this particular task."

The primary indicator for developing a custom AI skill is task repetition. When developers find themselves performing the same actions repeatedly, such as during code reviews, it signals an opportunity for automation. Such repetitive processes are ideal candidates for converting into a step-by-step instruction or a template.

Conversely, for one-off but complex integrations, like setting up mobile advertisements, using existing skill templates can ensure correct implementation, leveraging pre-defined best practices rather than starting from scratch.

"The main indicator for starting to write to your skill is repetition. When you repeat something over and over, like for a code review, you are doing a bunch of the same repetitive stuff always, and that would be a good sign to kind of write it to a one template or a step-by-step instruction."

Markdown files, often used for AI skills, are not inherently secure and can pose significant risks such as prompt injection attacks. These malicious files, even when appearing harmless, can attempt to steal sensitive information like developer API keys or perform unauthorized actions on the user's system.

Developers must exercise caution when downloading skill files from the internet, prioritizing official repositories or trusted package maintainers to minimize security vulnerabilities. One common method for concealing malicious intent is embedding hidden Unicode instructions within the text, making the file appear legitimate while secretly harboring harmful commands.

"When you download something from the internet, it doesn't matter if it's just an MD file, it can have prompt injections. It can try to prompt your agent to steal your keys and stuff."

Maintaining official AI skill repositories is a demanding and continuous effort, requiring frequent checks for changes and necessary updates. The project ecosystems evolve rapidly, necessitating regular optimization of skills to ensure their effectiveness and relevance.

"It's I have to check every two weeks at least if something changed, if I need to update something, if I can optimize something. So it's a whole work."

The role of the developer is evolving from that of a traditional coder to a manager of AI processes, as AI is increasingly used to write the very tools that assist in code generation. This shift allows developers to automate repetitive tasks as much as possible, focusing more on strategic oversight rather than manual code production.

"I try to automate that as much as possible and be more like a manager in that process rather than a copywriter"

The 'Skill Creator' tool is invaluable for automating the generation of boilerplate files, scripts, and other foundational elements, saving developers from manual creation. This tool enables agents to prompt users with clarifying questions, allowing for iterative refinement of the desired skill.

While automation is highly beneficial, it is crucial to maintain human oversight, carefully reviewing and adjusting the generated output. Developers should not blindly rely on automation but instead engage in an iterative process to ensure the skill meets their specific requirements and standards.

"use skill creator their skill because you don't have to write everything manually but do check what is written and do adjust because normally agent will prompt you with some questions on the skill that you want to create and you can iterate on how you want that skill to look so don't just automate it don't just automote it but actually have some control"

Five essential AI skills are recommended for Flutter developers to optimize their workflows. The first is the Skill Creator, which handles scripts, assets, and references for new skills. The second is the Code Review skill, which evaluates code quality and can be combined with PR triage for enhanced review processes.

The third is Custom Automation, used for standardizing repetitive feature scaffolding and endpoint integration. Fourth is Layout Guidance, which enforces the proper use of rows and columns over arbitrary containers to ensure responsive design. Finally, the fifth skill is Visual QA, which automates web-based screenshots for comprehensive testing, visually inspecting the UI for defects.

"The five most important skills that I would recommend personally number one is the skill creator skill to create skills... Number two, I like code review skill... Number three, that would be a custom skill... Number four... it would be a skill on basic flatter layouts... Number five... I created a custom skill that launches the whatever app on the web and records or captures a real screenshots from the app."

Code review quality can be significantly enhanced by employing a multi-agent approach, such as pairing a custom code review agent with Kevin Moore’s PR Triage agent. These agents can cross-reference each other's reports, leading to improved accuracy and more comprehensive feedback.

While AI agents excel at assessing code quality and adherence to standards, they often struggle with determining the necessity of the code. This limitation highlights the ongoing need for human oversight to ensure that the code not only functions correctly but also serves a meaningful purpose within the project.

"I like to do is to actually also use Kevin Moore's PR tryer skill to give them to two different agents. One does code review, another does PR triage and then they check on each other's reports and I get really really good results."

Custom skills are highly effective for automating repetitive project scaffolding, particularly when adding new features to an application. By embedding specific trigger phrases, such as 'use when adding new feature to our app,' within skill descriptions, developers can ensure that agents automatically apply pre-defined templates for navigation, scaffolds, and design system integration.

This approach significantly reduces manual friction, allowing developers to standardize and streamline common tasks like setting up new endpoints. The agent, upon recognizing the trigger phrase, automatically loads and applies all relevant instructions, ensuring consistency and efficiency across the development process.

"The idea here is that this is repetitive work... You have some new feature coming on... It needs to have some scaffold, some navigation that app already uses, some design system that app already uses... I would say in the skill description... use when adding new feature to our app and every time when you ask your agent to add new feature it will know that okay I have to read all of this."

AI models, often rewarded for delivering quick results, frequently default to suboptimal layout implementations, such as a combination of containers with excessive padding. This approach can lead to inefficient and unresponsive designs, even in strong models.

To counter this, dedicated layout skills are crucial for teaching agents to utilize proper Flutter layout widgets like rows, columns, and flexible/expanded widgets. By enforcing correct layout practices from the outset, developers can ensure that designs are responsive and maintainable, preventing the need for complex refactoring later.

"the way that agents are trained, they are rewarded for delivering you the result. And I noticed that even the strong models, they would often prefer like a weird combination of containers with paddings... when actually all that the agent needed to do is to use row with some flexibles, expands, and stuff like that."

AI agents can extend their capabilities beyond code inspection and test validation to include visual inspection of the user interface (UI) for any defects. This visual QA approach addresses complexities often found in traditional methods, such as issues with font loading that can confound golden tests.

By utilizing actual screenshots or animated WebP files, agents can comprehensively capture and analyze the UI, allowing for the detection of visual discrepancies and ensuring a high-quality user experience.

"A different agent can visually not just inspect the code, not just see that the tests are green, but visually inspect the UI for any defects."

Utilizing screenshots for walkthroughs in the QA process significantly enhances efficiency by eliminating the need to wait for an application to load on simulators, such as an iPhone simulator. This method allows testers to quickly review visual assets as static images, immediately identifying any defects without the delays associated with live application testing.

"I don't have to actually wait for the app to load on iPhone simulator. I can just use like screenshots in walk through and see all of them as images and immediately catch any defects."

To maximize productivity, a workflow involving three parallel machines running different AI agents—Claude, Codex, and Antigravity—is employed. These agents are designed to hand off tasks to each other, creating a continuous and efficient development cycle.

This parallel processing continues until API tokens are exhausted, ensuring that work progresses without interruption and leveraging the strengths of each specialized agent.

"I work on three parallel machines. One runs claude, one runs codeex, and one runs anti-gravity. And they hand off tasks to each other."

Beyond full-time work, AI workflows are extended to personal side projects, where a dedicated team of agents assists in building new applications. This approach enables developers to pursue entrepreneurial endeavors and participate in hackathons, such as the RevenueCat Ship-a-thon, with enhanced efficiency.

"So after my main work, my full-time job in the evenings and on the weekends, I actually run the team of agents to help me build the app that I want to submit."

With a background in machine learning and data engineering, the speaker has consistently believed in AI's transformative power, avoiding the skepticism common among many. This early conviction was fueled by a fascination with the capabilities of early generative AI, such as Midjourney.

Viewing AI fundamentally as pure mathematics and probability, the speaker has evolved from an enthusiast to a power user, deeply integrating AI into daily development workflows.

"I was never really on the team of AI skeptics. I have some previous experience with machine learning and uh data engineering. So I was always kind of a believer in AI and how it will transform everything."

Despite having less training data compared to languages like Python or JavaScript, Flutter offers a significant advantage in an AI-driven development world due to its ability to deploy to multiple platforms from a single codebase. This 'two for the price of one' model allows developers to target Android, iOS, Windows, and macOS efficiently.

AI maximizes this efficiency by automating much of the development process, enabling the creation of robust, cross-platform applications with unprecedented speed and consistency. This synergy makes Flutter an incredibly powerful tool for building diverse applications with AI assistance.

"In terms of me being able to build awesome stuff, it's amazing because Flutter gives you two for the price of one. If I can use AI to build an app that I will be able to deploy on Android, iOS, Windows, Mac OS, at least these four... from one code base."