From Linter Chaos to Orchestrated Tasks: Managing Frontend Fixes with an AI - Part 4 of 5

17 Aug 2025 by Mike Crowe

Part 4 of 6: The AI-Assisted Development Workflow Series

This is the fourth installment in a five-part series exploring how AI is transforming modern development workflows. In this series, I’ll walk through my journey of building an AI-assisted development environment, from basic infrastructure setup to advanced architectural enforcement and task orchestration.

Series Overview:

Part 1: MCP Servers, Ports, and Sharing - Setting up the foundation
Part 2: ESLint Configuration Refactoring - Cleaning up tooling with AI
Part 3: Custom Architectural Rules - Teaching AI to enforce design patterns
Part 4: Task Orchestration - Managing complex refactoring workflows
Part 5: Project Rules for AI - Creating effective memory banks and guidelines
Part 6: The Ultimate Design Review - Putting it all together

In my last post, I talked about how my AI pair programmer and I created a custom ESLint rule to enforce our new frontend architecture. It was a huge success. The linter, now armed with our specific rules, scanned the codebase and… gave us a giant list of things to fix.

This is a classic “good news, bad news” scenario. The good news? We had a precise, automated way to detect architectural drift. The bad news? We had a long, intimidating wall of terminal output listing every single violation.

/home/mcrowe/.../AlertDialog.tsx
  19:8    warning  Unregistered class detected: data-[state=open]:animate-in
  19:37   warning  Unregistered class detected: data-[state=closed]:animate-out
...
/home/mcrowe/.../EmptyState.tsx
  25:21   error    UI Component contains a forbidden margin class: 'mb-4'
...
✖ 60 problems (2 errors, 58 warnings)

A raw list of errors is a starting point, but it’s not a plan. How do you manage this work? How do you distribute it? How do you ensure each fix is made with the right context? Just handing a developer (or an AI) a raw log is inefficient.

The Tool: TaskFlow MCP for Orchestration

This is where another tool in our AI-assisted workflow comes in: TaskFlow MCP. It’s an open-source task orchestration server designed specifically for managing development work between humans and AI agents.

Instead of just working from a simple prompt, TaskFlow allows us to break down a high-level request (like “Fix all these linter warnings”) into a structured plan of discrete, trackable tasks.

Crucially, as the user, I can insist that each task be configured with specific context and instructions. This is the killer feature. It turns a simple “fix this” command into a rich, context-aware work order.

The Process: Turning Chaos into a Plan

I fed the messy ESLint output to my AI assistant and gave it a new prompt:

"For each of the UI warnings below, use plan_task to create a ‘Fix UI layout vs. styling overlap’ request. For each violation, create a sub-task. Ensure that each task specifically includes these instructions:

Read memory-bank/AGENTS.md

Review memory-bank/project-rules/*"

The AI, using the TaskFlow MCP tool, did exactly that. It parsed the linter output, grouped the violations by file, and created a formal plan. Each task was not just a file path and a line number; it was a complete work package containing:

A Clear Title: e.g., “Fix AppLayout.tsx layout component styling violations”
A Detailed Description: Explaining exactly which classes were violating our architectural rules.
Embedded Context: The prerequisite instructions to review our project’s agent protocols and architectural rules before starting work.

The Result: An Actionable, Context-Aware Plan

Tasks are maintained locally

The output wasn’t a log file; it was a professional task report, ready for any developer—human or AI—to pick up and execute. It transformed a chaotic list of problems into a manageable, parallelizable set of tasks.

Here is the exact markdown file that the tool generated. It’s clear, organized, and ensures that whoever does the work has the full context required to do it right.

Task Status Report: Fix UI layout vs. styling overlap issues identified in ESLint warnings

Generated on: 2025-08-17

Overall Progress: 0%

Total Tasks: 9
Completed Tasks: 0
Approved Tasks: 0
Remaining Tasks: 9

Task Status

1. Fix AppLayout.tsx layout component styling violations (🔄 In Progress)

Description: Remove non-layout classes from AppLayout.tsx component. The component contains styling classes like bg-gray-100, rounded-md, hover:bg-gray-100, focus:ring-2, text-purple-700, ml-2, text-lg, font-bold, text-gray-900, bg-opacity-30, bg-black that should be moved to separate styling components or variants. Read memory-bank/AGENTS.md and review memory-bank/project-rules/* before starting.