DEV Community: kirti kaushal

I Wrote About Token Waste. Then I Built a Tool That Blocks It Before It Happens

kirti kaushal — Sun, 12 Jul 2026 04:55:41 +0000

By Kirti Kaushal

A few months ago I wrote about token optimization for GitHub Copilot and AI coding agents — the usual advice: narrow your scope, exclude generated files, don't send your whole repo for a one-line fix. Good advice. I still believe it.

But advice doesn't run automatically. You have to remember it, every time, on every prompt, forever. So I built the thing I actually wanted: something that checks for me, before anything gets sent, without me having to remember.

This is claude-cost-guard — a free Claude Code plugin that shows you the token count and cost, across Claude, GPT, and Gemini, before your prompt ever reaches the model. No LLM call to check it. No latency. Nothing sent anywhere unless you explicitly ask for a rewrite.

Why not just ask Claude to check my prompt?

Three reasons this needed to be a separate tool, not a habit of asking nicely:

A free check has to actually be free. Asking Claude to critique your prompt costs a full round-trip — tokens spent just to find out you'd pasted a duplicate paragraph. A local check costs nothing and takes no time.
No single model will tell you a competitor is cheaper. Cross-model cost comparison needs a neutral tool, not the model you're currently talking to.
A habit you have to remember isn't a habit. A tool that fires on every single prompt, automatically, is the only version of this that actually works long-term.

How it works

claude-cost-guard hooks into Claude Code's UserPromptSubmit and UserPromptExpansion events — the same mechanism Claude Code itself uses to let plugins see a prompt before it's processed. On every prompt, slash-command, or skill invocation:

Token count and cost estimate — across six models, computed locally, instantly
Duplicate-paragraph detection — catches the classic "pasted the same section twice by accident"
Oversized-paste detection — flags a 2,000-line log dump when the actual question is one line
Missing-format detection — flags a "compare X and Y" request with no output format specified, which usually means a second round-trip to get the shape you actually wanted
Output-cost awareness — scans for explicit length signals ("brief," "comprehensive," "500 words") since output tokens are typically priced several times higher than input, and a flat guess undersells the real cost of a detailed request

It never blocks. This was a deliberate reversal partway through building it: an earlier version paused for confirmation on every single prompt, which meant every prompt cost a minimum of two submissions just to prove the point. A cost-saving tool that doubles your interactions to save you money is fighting itself. So the default is informational, always-visible, never in your way.

The one paid action — an optimized rewrite — only runs if you explicitly tag your prompt with #optimize. Never automatic, never silent spend.

What building it in public actually looked like

I want to be honest about this part, because it's the part most launch posts skip: most of the real bugs weren't found by writing more code — they were found by actually using it.

Unit tests passed on every function, in isolation, before this ever touched a real session. Good, but proved nothing about whether Claude Code would actually invoke the hook correctly.
The first live test found a false positive: claude plugin list, typed as an ordinary message, tripped the "missing output format" flag because it contains the word "list." Three words shouldn't read as a content request — fixed by requiring a minimum word count before that check fires at all.
A later session showed no output at all — the hook had silently failed. Debug logging traced it to a documented Claude Code issue where CLAUDE_PLUGIN_ROOT isn't always injected into the hook's subprocess environment. Fixed with a $PWD fallback, verified both with and without the variable set.
Stress-testing with a 1.6MB, 20,000-line paste (simulating someone dumping a full log file) ran in well under half a second — but surfaced a real UX bug: uncapped duplicate-paragraph flags would list every single repeat, unreadable past a handful. Capped at five, plus a summary count.
A direct question — "does output length also cost?" — led to reworking the cost estimate to actually respond to what the prompt asks for (brief vs. detailed vs. an explicit word count), instead of a flat guess applied identically to every prompt regardless of content.

None of these were hypothetical edge cases dreamed up in advance. Every one came from actually running the thing against something real.

Where this sits next to other tools

There's real, good work already happening in this space. claude-prompt-improver and similar plugins rewrite prompts for clarity using an LLM call on every fire — their own documentation is upfront that this costs 30–90 seconds of latency per prompt, which is exactly why they're opt-in by default. codeburn and Cost Guardian track running session cost after the fact, which is valuable for visibility but doesn't stop a wasteful prompt before it's sent. Token Guard audits the token cost of your repo's CLAUDE.md/.cursorrules files in CI — a real and useful adjacent problem, just a different one (repo hygiene, not per-prompt cost).

claude-cost-guard is specifically: free, instant, per-prompt, cross-model, before it runs. That's a narrow claim on purpose.

Try it

/plugin marketplace add kirti/claude-cost-guard
/plugin install claude-cost-guard

Open source, MIT licensed: github.com/kirti/claude-cost-guard

If you find a real bug by actually using it — that's genuinely how every fix in this post got found. Open an issue.

Our Mission

Helping people learn, build, grow, and succeed through technology, education, and community.

“Knowledge becomes more valuable when it is shared.”

“Learn. Build. Share. Grow.”

❤️ Your support, likes, shares, and feedback motivate us to keep creating free educational content for everyone.

Thank you for being part of the journey! 🌱

Built with love by Kirti Kaushal — 15 years of engineering, finally building in public.

Kind is Cool 🙏 share your knowledge
Thank You for Reading ❤️
Thank you for spending your time with us and being part of our learning community.
🌟 Kind is Cool 📚 Share Your Knowledge
🚀 Help Others Grow

If you enjoyed this blog, tutorial, or Instagram post:

👍 Give it a Like
💬 Leave a Comment
🔄 Share it with someone who might find it helpful
⭐ Follow us for more content on AI, Coding, GitHub, Career Growth, and Continuous Learning

💻 GitHub: https://github.com/kirti

What 15 Years of Building Taught Me About Becoming an AI Engineer

kirti kaushal — Tue, 30 Jun 2026 03:05:08 +0000

Nobody hands you a title that says "AI Engineer" and a clean starting line.

For most of my 15 years, I was a full-stack and fintech engineer — React on the front, Node.js or python or php or sometimes little Java on the back, wealth management and banking systems in the middle. AI wasn't a job description yet.

It was a feature you bolted on if the business case justified it.

That changed gradually, then all at once. I didn't pivot into AI. AI showed up inside the systems I was already building, and the skill that mattered most wasn't a new framework — it was being able to wire a model into something people would actually use, explain, and trust.

Here's what the work itself taught me, written down so it doesn't disappear into another closed tab.

The model's output is not the product

One of the first things I built was a banking proof-of-concept: a simple linear regression predicted a user's spending for next month, and an LLM turned that number into a sentence a person could act on. Nothing about the math was exotic.

The lesson was that a number on a dashboard doesn't change behavior — a sentence does.
The regression did the calculating.
The model that actually mattered was the one translating a prediction into something a human could use.

Explainability isn't optional, it's the whole job

The project that taught me the most was a fraud detector built on XGBoost with SHAP explainability.

Banks don't deploy black boxes, and for good reason — a "92% fraud probability" with no justification is not a usable answer, it's a liability.

Once I added SHAP attributions and had an LLM translate the feature weights into plain language, the project stopped being a notebook exercise and started looking like something a compliance team could actually sign off on.

That gap — between a model that scores something and a system that can justify the score — is where most of the real engineering lives.

Fixing the same mistake five times is a signal, not a nuisance

Anyone working with AI coding tools knows the pattern: you correct the same mistake five times before it sticks.

Eventually I stopped correcting it live and started writing the correction down once, as a reusable skill file the assistant would apply automatically going forward.

That turned into two npm packages — skillforge-ai and reactforge-ai-skills — built specifically to teach AI assistants standards instead of re-explaining them every session.

It's a small idea, but it scales in a way that live corrections never do.

The fundamentals didn't change, the substrate did

Feature engineering became prompt and context engineering. Model validation became evals.

Explainability was never optional in finance, and it isn't optional for LLM-driven decisions either.

None of the underlying engineering discipline is new — what's new is how fast the substrate moves under it, which means the engineers who keep their fundamentals tight are the ones who can actually keep up

The part that doesn't show up in a changelog

I've built most of this while navigating a dependent visa — learning exactly what work I could and couldn't take on — and rebuilding momentum after an injury that could have ended the whole thing. None of that is in a GitHub repo.

But it's the reason persistence, more than any specific framework, is the actual skill underneath everything above.

The technical work is the visible part.The discipline to keep showing up for it is the part nobody puts in a release note. If there's one habit worth repeating: don't wait until something is polished to write about it.

Write down what you built this month, even the broken parts.

The polish comes later, if it comes at all — the record is what compounds.

Our Mission

Helping people learn, build, grow, and succeed through technology, education, and community.

“Knowledge becomes more valuable when it is shared.”

“Learn. Build. Share. Grow.”

❤️ Your support, likes, shares, and feedback motivate us to keep creating free educational content for everyone.

Thank you for being part of the journey! 🌱

Built with love by Kirti Kaushal — 15 years of engineering, finally building in public.

Kind is Cool 🙏 share your knowledge
Thank You for Reading ❤️
Thank you for spending your time with us and being part of our learning community.
🌟 Kind is Cool 📚 Share Your Knowledge
🚀 Help Others Grow

If you enjoyed this blog, tutorial, or Instagram post:

👍 Give it a Like
💬 Leave a Comment
🔄 Share it with someone who might find it helpful
⭐ Follow us for more content on AI, Coding, GitHub, Career Growth, and Continuous Learning

💻 GitHub: https://github.com/kirti

I stopped re-explaining my React rules to Claude every session — here's how

kirti kaushal — Wed, 17 Jun 2026 00:42:00 +0000

Every AI coding session starts from zero.

It doesn't know your team avoids inline objects in JSX. It doesn't know you need ARIA labels on every button. It doesn't know you're migrating from PropTypes to TypeScript.
So it generates generic code. You fix it. You explain the rules again next session. You fix it again.
I got tired of that loop. So I built reactforge-ai-skills — a toolkit that teaches Claude and Copilot your React standards once, and enforces them automatically.

Reactforge-ai-skills is a React codebase health toolkit I built and published this week. It gives your AI assistant a set of rules to follow — and gives you a set of scripts to enforce them automatically.

npm install reactforge-ai-skills --save-dev

Here's exactly what's inside and how to use it.

The problem this solves

Every time you open a new Claude or Copilot session, your AI starts from zero.
It doesn’t know your team avoids inline objects in JSX. It doesn’t know you need ARIA labels on every button.
It doesn’t know you’re migrating from PropTypes to TypeScript.

So it generates generic code. You fix it. You explain the rules again in the next session. You fix it again.

Skill files break that cycle. You load the rules once — your AI follows them every time.

What's included

9 AI Skill Files

Each skill file is a detailed markdown document that teaches your AI assistant the correct patterns for a specific area of React development.

accessibility-audit WCAG 2.1 compliance rules, ARIA label requirements, keyboard navigation patterns, screen reader support. Load this and your AI stops generating
and starts generating proper elements with labels.
performance-optimization When to use React.memo, useCallback, useMemo. Why inline objects in JSX cause unnecessary re-renders. How to use lazy loading and virtualisation for large lists. Missing key prop patterns.
**typescript-migration **Step-by-step rules for converting JavaScript React components to TypeScript. How to type props, hooks, event handlers, and API responses correctly.
test-coverage Jest + React Testing Library patterns. How to mock modules, handle async tests, test error states. Why getByRole beats getByTestId.
css-style-fixes CSS specificity rules, how to structure CSS variables, redundant rule detection, Tailwind migration patterns.
duplicate-code-detection Patterns for identifying and refactoring duplicated logic. When to extract a custom hook vs a utility function vs a base component.
react-node-automation Full React and Node.js quality automation patterns — linting, testing, CI configuration.
dependency-governance npm audit workflow, how to handle vulnerability fixes without breaking changes, bundle size analysis.
*testcafe-automation * End-to-end testing patterns with TestCafe. Page object model, selector strategies, async handling.

How to load a skill into your AI

Claude Code — add to CLAUDE.md :

cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md >> CLAUDE.md

GitHub Copilot — add to instructions:

cat node_modules/reactforge-ai-skills/skills/performance-optimization/SKILL.md >>
 .github/copilot-instructions.md

Copy to clipboard and paste into any AI chat:

# Mac
cat node_modules/reactforge-ai-skills/skills/typescript-migration/SKILL.md | pbcopy

Then paste into Claude, ChatGPT, or Cursor

Combine multiple skills:


cat node_modules/reactforge-ai-skills/skills/accessibility-audit/SKILL.md \
    node_modules/reactforge-ai-skills/skills/performance-optimization/SKILL.md \
    >> CLAUDE.md

19 Automation Scripts

The scripts scan your actual src/ folder and find real problems.
No configuration needed — just point them at your source directory.

Analysis scripts

Find accessibility violations — missing ARIA labels, alt text, keyboard support

npm run a11y:check

Find React performance anti-patterns — missing memo, inline objects, effect deps

npm run perf:analyze

Find duplicate code blocks using hash comparison

npm run detect:duplicates

Find import statements that are never used

npm run detect:unused-imports

Find CSS classes defined but never referenced

npm run detect:unused-css

Full dependency audit — vulnerabilities, outdated packages

npm run deps:check

Run ALL checks and save a maintenance report

npm run maintain

Generator scripts

Generate PropTypes from component usage patterns (preview first)

npm run generate:proptypes

Convert PropTypes to TypeScript interfaces

npm run generate:types

Create Jest + RTL test scaffolds for untested components

npm run testcafe:scaffold

Find components with no test files

npm run testcafe:coverage

Fixer scripts

Auto-fix CSS issues — missing units, vendor prefixes, duplicates

npm run css:fix

Preview refactoring suggestions — var→const, !!→Boolean()

npm run refactor:suggest

Apply refactoring changes

npm run refactor:apply

Get Tailwind class equivalents for your CSS

npm run css:convert-tailwind

A real example

I ran npm run a11y:check against my banking POC frontend and it found this:

`INPUT NO LABEL [HIGH] src/components/ChatWidget.jsx:179
  Form input missing label or aria-label
  Fix: Add aria-label="Type your message"

MISSING ALT TEXT [MEDIUM] src/components/Hero.jsx:24  
  Image missing alt attribute
  Fix: Add alt="Description of image"`

Two real bugs. One command.
The component had been in production for weeks.

Run health checks automatically on every pull request:

github/workflows/code-health.yml
name: Code Health
on:
  pull_request:
    branches: [main]
jobs:
  health:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx reactforge-ai-skills check-accessibility ./src
      - run: npx reactforge-ai-skills detect-duplicates ./src
      - run: npx reactforge-ai-skills deps

Add to package.json

`{
  "scripts": {
    "health": "reactforge-ai-skills audit ./src",
    "health:a11y": "reactforge-ai-skills check-accessibility ./src",
    "health:perf": "reactforge-ai-skills performance ./src",
    "gen:tests": "reactforge-ai-skills gen-tests ./src --write",
    "gen:types": "reactforge-ai-skills gen-typescript ./src"
  }
}`

Live demo

The demo repo runs all 19 scripts against a real React application so you can see actual output before installing.

Demo site: https://kirti.github.io/reactforge-demo/

Npm: https://www.npmjs.com/package/reactforge-ai-skills

GitHub: https://github.com/kirti/reactforge-ai-skills

`npm install reactforge-ai-skills --save-dev`

Built with love by Kirti Kaushal — 15 years of engineering, finally building in public.
Kind is Cool 🙏 share your knowledge

Thank You for Reading ❤️

Thank you for spending your time with us and being part of our learning community.

🌟 Kind is Cool 📚 Share Your Knowledge

🚀 Help Others Grow

If you enjoyed this blog, tutorial, or Instagram post:

👍 Give it a Like
💬 Leave a Comment
🔄 Share it with someone who might find it helpful
⭐ Follow us for more content on AI, Coding, GitHub, Career Growth, and Continuous Learning

🚀 Instagram: @kirti.builds
💻 GitHub: https://github.com/kirti
✍️ Medium: https://medium.com/@kirtikau

Reactforge-ai-skills — 9 AI Skills + 19 Automation Scripts for React Developers

Teach Claude and Copilot your React standards. Enforce them automatically.

kirtikaushal.substack.com

Our Mission

Helping people learn, build, grow, and succeed through technology, education, and community.

“Knowledge becomes more valuable when it is shared.”

“Learn. Build. Share. Grow.”

❤️ Your support, likes, shares, and feedback motivate us to keep creating free educational content for everyone.

Thank you for being part of the journey! 🌱