How to deslop your code

This video explores the hidden cost of AI-assisted development: AI slop. When rapidly building an AI files feature for Convex, the resulting codebase became a tangled 1000-line monolith of mixed logic and unclear responsibilities. This walkthrough demonstrates how to untangle AI-generated messes and restore maintainability to a TypeScript codebase. The refactoring process covers practical techniques for cleaning up complex logic flows. Key strategies include breaking down monolithic files into domain-specific modules, separating queries from commands to avoid side-effect pitfalls, and leveraging TypeScript exhaustive checks for safer control flow. It also highlights the importance of precise function naming to create self-documenting code that both humans and AI agents can easily parse. Designed for software engineers relying on LLMs for speed, this guide provides actionable clean code principles to keep AI-generated output in check. It concludes with a custom AI de-slop skill that developers can use to automate these refactoring patterns in their own projects. [00:00:00] The Problem With AI-Generated Code [00:01:24] Overview of the Convex AI Files Feature [00:02:29] Breaking Down a 1000-Line File [00:03:48] Analyzing a Tangled Function [00:04:53] Splitting Sub-Functions and Naming Conventions [00:07:02] Rule 1 Break Large Functions Down [00:07:39] Rule 2 Segregate Query From Command [00:09:05] Rule 3 Name Functions Accurately [00:09:31] Using an AI Skill to Clean Up Code Previous PR: https://github.com/get-convex/convex-js/pull/143#issuecomment-4105495662 My New Deslop Skill: https://github.com/mikecann/agent-skills #typescript #cleancode #refactoring #softwareengineering #webdevelopment #ai #llm #convex #coding #developer