DEV Community: Muhammad Fahad

I Built a Structured Plan Implement Review Workflow for Claude Code

Muhammad Fahad — Mon, 05 Oct 2026 06:41:07 +0000

I've been using Claude Code for larger development tasks, and while it works really well for individual coding tasks, I started noticing a problem when working on more complex features.

A larger request usually involves several different things:

Understanding the existing codebase
Figuring out the requirements
Creating an implementation plan
Breaking the work into smaller tasks
Writing the code
Reviewing the implementation
Fixing issues discovered during review

When all of this happens in a single agent session, it can become difficult to keep the work structured and predictable.

That led me to experiment with a different approach.

The Workflow I Wanted

Instead of:

Request
   ↓
Claude
   ↓
Code
   ↓
Done

I wanted something closer to:

Request
   ↓
Plan
   ↓
Specs
   ↓
Tasks
   ↓
Implementation
   ↓
Review
   ↓
Fixes
   ↓
Done

The idea is simple: separate planning, implementation, and review instead of treating the entire development task as one operation.

Introducing Taskify

To experiment with this workflow, I built Taskify, an open-source Claude Code plugin.

sheikhfahad67 / taskify

This is claude code plugin helps to cretae the plans and specs

Taskify

A Claude Code plugin with two skills that work as a pair:

taskify turns a piece of work into a plan (what and why) and a set of executable task specs (do this, prove it). Each spec has preconditions, acceptance criteria with real commands and a block where the real output gets pasted as evidence.
taskify-implementer runs those specs, one task at a time. Each task is built by one agent and reviewed by a different one. Progress is saved after every step, so a stopped or crashed run can continue where it left off.

Install

From the fahad-marketplace marketplace:

/plugin marketplace add sheikhfahad67/fahad-marketplace
/plugin install taskify@fahad-marketplace

Needed for review: the reviewer is feature-dev:code-reviewer, from the feature-dev plugin. Install it too:

/plugin install feature-dev@claude-plugins-official

Usage

1. Write the plan and specs

/taskify:taskify add rate limiting to the public API

Flag	Effect
`--slug <name>`	Name of the output folder

…

View on GitHub

Taskify organizes a larger development request into smaller stages and executable tasks.

The workflow starts by analyzing the request and creating an implementation plan. That plan is then converted into smaller tasks that can be implemented incrementally.

After implementation, the changes go through a separate review stage. If issues are found, they can be addressed before moving on.

It also keeps track of progress so that work can be resumed instead of starting the entire process again.

See It in Action

The basic workflow looks like this:

┌─────────┐
│ Request │
└────┬────┘
     ↓
┌─────────┐
│  Plan   │
└────┬────┘
     ↓
┌─────────┐
│  Specs  │
└────┬────┘
     ↓
┌─────────┐
│  Tasks  │
└────┬────┘
     ↓
┌──────────────┐
│ Implementation│
└──────┬───────┘
       ↓
┌─────────┐
│ Review  │
└────┬────┘
     ↓
┌─────────┐
│  Fixes  │
└────┬────┘
     │
     └──────────────→ Review

The important part is that implementation isn't treated as the final step.

There is an explicit review stage before considering the work complete.

Why Separate the Review?

One thing I wanted to experiment with was separating implementation from review.

An agent that just implemented a feature may have a different perspective when reviewing the result later.

So instead of:

Implement → Done

the workflow becomes:

Implement
    ↓
Review
    ↓
Issues?
 ┌──┴──┐
No    Yes
 ↓      ↓
Done   Fix
        ↓
      Review

This doesn't guarantee that the implementation is correct.

But it gives the development process another explicit checkpoint.

What Taskify Currently Does

Taskify currently focuses on:

Creating implementation plans
Generating specifications
Breaking work into executable tasks
Implementing tasks incrementally
Reviewing completed work
Fixing issues found during review
Tracking progress
Resuming work from where it was left off

The goal isn't simply to add more AI to the development process.

The goal is to make the development process around AI coding agents more structured.

Why I Think This Can Help With Larger Tasks

Consider a small request:

Add a button to this component.

A complete planning and review workflow would probably be unnecessary.

But consider a larger request:

Add role-based permissions across the application, update the database schema, modify the APIs, update the frontend, and add tests.

Now there are multiple areas of the codebase involved.

There are dependencies between tasks.

There are implementation decisions to make.

And there are more opportunities for something to be missed.

This is where I think an explicit workflow can become useful:

Large Request
     ↓
Understand the Codebase
     ↓
Create Plan
     ↓
Break Into Tasks
     ↓
Implement Incrementally
     ↓
Review
     ↓
Fix

Instead of trying to solve everything in one large operation, the work becomes a sequence of smaller, trackable steps.

The Trade-Off

I don't think this approach is better for every coding task.

More structure also means more overhead.

It can mean:

More agent calls
More context
More processing time
More steps for simple tasks

For a small change, that overhead may not be worth it.

So one of the things I'm trying to understand with Taskify is:

At what point does structured agent orchestration become more useful than simply letting Claude Code handle the entire task in one session?

I don't have a definitive answer yet.

That's part of why I built it.

What I'm Still Exploring

Taskify is still an experiment and I'm continuing to improve the workflow.

Some of the areas I'm interested in exploring further are:

Better task decomposition
More reliable implementation planning
Improving the review process
Handling larger multi-step changes
Better progress and resume capabilities
Reducing unnecessary agent calls
Finding the right balance between automation and developer control

The interesting part isn't just making an AI agent write code.

It's figuring out how developers should work with coding agents when the task becomes large and complex.

Try Taskify

Taskify is open source and available on GitHub:

https://github.com/sheikhfahad67/taskify

If you're using Claude Code for larger projects, I'd love to hear how you currently structure your workflow.

Do you prefer a single agent session, or do you separate planning, implementation, and review into different stages?

I'd also be interested in hearing where you think this approach adds value—and where it simply adds unnecessary overhead.

Disclosure: AI assistance was used to help edit and structure this article. The project, workflow, and technical experience described here are my own.

Stop Wondering Where Your Money Went: Why I Built Penny Tracker

Muhammad Fahad — Thu, 09 Apr 2026 08:20:05 +0000

Like many people (especially developers 😄), I used to face the same problem every month.

It’s the 28th. You check your bank account, expecting enough to get through the last few days… and you only have Rs. 3,000 left.

You think back. You didn’t buy anything expensive. No trips, no big purchases. So where did all your money go?

The truth is simple: it disappeared in small, everyday spending. Coffee here, groceries there, a bit of online shopping—it all adds up. But because I wasn’t tracking anything, I had no idea where my money was going.

I had paper receipts everywhere, emails full of invoices, and zero clarity. That confusion led to stress. I couldn’t control my spending because I couldn’t see it. At one point, I was going over my monthly budget by more than 100%.

So I decided to fix it the only way I know how: I built an app.

Introducing Penny Tracker

Penny Tracker is a simple and modern expense tracking app designed to make managing money easy—and even a little fun.

Here’s what it does:

1. Quick Expense Logging

No more saving receipts.

You can quickly:

Scan a receipt
Or manually add an expense in seconds

The goal is simple: logging an expense should take less time than making it.

2. Simple, Clear Dashboard

No confusing charts or menus.

You can instantly see:

Your current balance
How much of your monthly budget you’ve used
Your recent expenses

It gives you a clear picture of your money at a glance.

3. Gamification (Make Saving Fun)

Staying on budget can feel boring—so I added rewards.

You can:

Earn badges for tracking consistently
Unlock achievements like staying under budget
Build streaks to stay motivated

It turns managing money into something you actually want to keep doing.

4. Clean and Modern Design

I wanted something I’d enjoy using every day.

Penny Tracker uses a dark, clean design with calm colors and simple visuals—easy on the eyes and easy to understand.

Why I Built This

This app isn’t just about tracking expenses.

It’s about:

Knowing where your money goes
Making better spending decisions
Feeling in control instead of stressed

Once you can clearly see your spending, everything changes.

Try It Out

If you’ve ever wondered where your money disappears each month, this app is for you.

Give Penny Tracker a try and start taking control of your finances.

Penny Tracker - Apps on Google Play

Smart Expense Tracking for Modern Life

play.google.com

Penny Tracker – Version 2.0.0
A simple, expense tracker built for everyone. Currently, available on Google Playstore.

Axios Interceptor Hook Typescript

Muhammad Fahad — Sat, 19 Mar 2022 07:38:48 +0000

Re-Published

Hi,
Before that I have published my first NPM package which is: axios-interceptor-hook

Problems

Build on JavaScript, difficult for user to know about props because there is no suggestions.
There is no way to call multipart/form-data content-type.

What's new

Developed with typescript.
separate hook for Application/json, and multipart/form-data.
You can use Types for the configurations. (ApiConfig).

Interceptors

Axios interceptors are the methods which are used for each call request and response transformation using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.

Configuration

You need to install npm package axios-hook-typescript

Github Repo: (https://github.com/sheikhfahad67/axios-hook-typescript)

Run the command on your terminal.
npm install axios react-toastify axios-hook-typescript

axios-hook-typescript

React hooks for axios with built in react-tostify integration. Simple to use with minimum configuration.

Features

All the axios awesomeness you are familiar with
Zero configuration, but configurable if needed
Integrated react-toastify for better toast messages
Minimize file managment

Installation

npm install axios react-toastify axios-hook-typescript

axios and react-toastify are peer dependencies and needs to be installed explicitly

Example

import { useEffect, useRef } from 'react';
import {
  ApiConfig,
  useJsonApiInterceptor,
  useMultipartInterceptor,
} from 'axios-hook-typescript';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

interface todosObject {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const App = () => {
  const { apiHandler: jsonApiHandler, data: jsonData } =
    useJsonApiInterceptor();
  const { apiHandler: multipartApiHandler } = useMultipartInterceptor();
  const inputRef = useRef(null);

  const getTodos = async () => {
    const config: ApiConfig = {
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
      displayToast: true,
      successMessage: 'Fetch all todos',
      theme: 'colored',
    };
    await jsonApiHandler(config);
  };

  useEffect(() => {
    getTodos();
  }, []);

  const handleFileChange = async (e: any) => {
    const { files: newFiles } = e.target;
    const formData = new FormData();
    formData.append('image', newFiles[0]);

    const config: ApiConfig = {
      url: 'http://localhost:8000/files',
      data: formData,
      method: 'POST',
      displayToast: true,
      successMessage: 'File uploaded successfully',
    };
    await multipartApiHandler(config);
  };

  return (
    <div className='App'>
      <ToastContainer />
      <h1>Axios Interceptor Examples</h1>
      <input
        id='file'
        type='file'
        multiple
        ref={inputRef}
        onChange={handleFileChange}
      />
      <button className='submit-btn' type='submit'>
        Upload
      </button>
      <div style={{ marginTop: '50px', border: '1px solid green' }}>
        {jsonData &&
          Object.keys(jsonData).length > 0 &&
          jsonData.map((todo: todosObject) => (
            <h1 key={todo.id}>{todo?.title}</h1>
          ))}
      </div>
    </div>
  );
};

export default App;

Documentation

Hooks

useJsonApiInterceptor - for content-type: application/json.
useMultipartInterceptor - for content-type: multipart/form-data

Return

It will return following fields:

Fields	Type	Description
data	Object	It return the response of api `(res.data)`
isPending	Bool	For loading purpose return `true` while fetching and return false after completion or failure
apiHandler	Func	Function to give you control over calling when you need just by passing `config`

For Bearer Token

Need to save your auth token as, interceptor will automatically get it.

localStorage.setItem('authToken', <YOUR TOKEN>);

Environment Variable for Base URL

Please add env variable into your .env or .env.local file.

REACT_APP_BASE_URL="https://jsonplaceholder.typicode.com"

Config Props

Types

ApiConfig - for api configurations

Fields	Type	Description
method	string	'get', 'post', 'put', 'delete', 'patch'
url	string	it will be your endpoint
delay	number	default 5000
data	Object	required on post, put, patch requests
successMessage	string	'Any Message'
position	string	'top-right', 'top-left', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'
hideProgressBar	Bool	`true` or `false`
theme	string	'light','dark','colored'

License

MIT

Configure Axios interceptor in few minutes...

Muhammad Fahad — Fri, 07 Jan 2022 11:33:25 +0000

Interceptors

Axios interceptors are the methods which are used for each call request using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.

Configuration

You need to install npm package axios-interceptor-hook

Github Repo: (https://github.com/sheikhfahad67/axios-interceptor)

Run the command on your terminal.
npm install axios react-toastify axios-interceptor-hook