DEV Community: drmikecrowe

Context Binoculars: Understanding LLM Context Windows

drmikecrowe — Sat, 13 Sep 2025 04:00:00 +0000

Remember as a kid (or in my case as an adult) when you pulled out binoculars and gazed around the room? It’s a bit disorienting for sure, but also fun. And I guess if you’ve ever wondered about what I do for fun, now you know.

It struck me the other day that this was the ideal representation for how LLM context works. While my demonstration you’re going to see below is extreme, this is the reality of what we’re facing when we’re trying to get LLMs to do big projects. The context window is everything, and you’re hearing more and more about context engineering in online articles. Ensuring that the LLM has exactly the right context greatly improves the accuracy of the results that you get out the other end.

There's not much more to this article. All I'm really trying to do is viscerally explain what the context window is and give you a feeling of why managing your context is so important.

Check out the visual demonstration here: context-binoculars

From Linter Chaos to Orchestrated Tasks - Part 4 of 6

drmikecrowe — Sun, 07 Sep 2025 00:00:00 +0000

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

This is the fourth installment in a six-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.

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.