DEV Community: Tom Yahav

Claude Code Is Burning Your Tokens — And That's a Symptom, Not the Problem

Tom Yahav — Wed, 01 Apr 2026 06:26:40 +0000

There's a pattern emerging across Reddit, Hacker News, and dev blogs:

"Why is Claude suddenly eating all my tokens?"

At first it sounds like a pricing issue. Read enough complaints, and a deeper story appears — one about how we're using AI to code, not just how much it costs.

The Complaints Are Consistent (and Legit)

"My tokens are disappearing and I don't know why."
Sub-agents run loops. Tools get invoked repeatedly. Context expands silently. You think you're making one request — the system might be doing 20.

"Simple tasks suddenly cost way more."
Behind every request: full conversation history, system prompts, tool definitions, intermediate reasoning. Thousands of tokens consumed before the model even starts answering.

"I gave it a task… and it just kept going."
Claude Code isn't a chatbot — it's an agent. It plans, executes, retries, and explores. Sometimes too much. Every extra step burns more tokens.

The "Vibe Coding" Trap

The idea is seductive: write a PRD, hand it to Claude, let it build everything.

In theory: productivity unlocked.

In practice: chaos + cost.

AI doesn't have real ownership of your codebase. It doesn't understand your architecture deeply. It will happily brute-force its way to an answer — and bill you for every wrong turn.

One developer who burned millions of tokens put it plainly: letting AI run the whole workflow doesn't work.

The Hard Truth

We shifted from:

AI as a tool

To:

AI as the developer

And that's where things break.

When you let an agent write your entire project from scratch, you end up owning code you don't understand. Code you don't understand isn't an asset — it's a liability with good indentation.

The token burn is a symptom. The real problem is delegating judgment, not just keystrokes.

Reclaim the Keyboard

The fix isn't "use less AI." It's use it differently.

Before:  You = spectator,  AI = entire engineering team
After:   You = tech lead,  AI = fast junior engineer

In practice:

Design the architecture yourself. Write the function signatures, the interfaces, the comments. Then ask AI to implement.
Keep prompts small and scoped. "Build me a full auth system" → bad. "Write a JWT middleware for Express with these constraints" → good.
Reset context aggressively. Start new sessions often. Don't let context balloon.
Write the hard parts yourself. Architecture, tradeoffs, system boundaries — that's your job, not the agent's.
Use AI for acceleration, not delegation. Boilerplate, refactoring, test generation: great. Autonomous iteration loops: expensive and risky.

Final Thought

Claude Code is one of the most powerful coding tools we've ever had. But the more autonomy you give it, the more it costs — in tokens, in quality, and in your own understanding of what you're shipping.

If your tokens are burning fast, don't just optimize prompts.

Reclaim ownership. Write the core logic. Let AI assist — not replace you.

Are you seeing token spikes? Have you tried vibe coding and regretted it? Drop your experience in the comments.

I Built a One-Command Tool to Migrate Your Entire Cursor Setup to VS Code

Tom Yahav — Sat, 14 Mar 2026 19:56:13 +0000

The Problem Nobody Talks About

Cursor is a great editor. The AI features are genuinely impressive, and it's been a go-to choice for a lot of developers over the past couple of years.

But there are plenty of reasons you might want to switch back to VS Code — team standardization, extension compatibility, personal preference, or just wanting a cleaner setup. The problem? Moving back is surprisingly painful.

You open VS Code and everything feels wrong. Your theme is gone. Your keybindings don't work. Your snippets aren't there. And you're staring down 20+ extensions you need to reinstall one by one.

So I built a script that does it all in one command.

⚡ The Fix: One Command

bash <(curl -fsSL https://raw.githubusercontent.com/yahav10/cursor-to-vscode/main/cursor_to_vscode.sh)

That's it. Run this in your terminal and within a minute your VS Code will feel exactly like your Cursor setup.

🔀 What Gets Migrated

Here's everything the script moves over automatically:

What	How
⚙️ Settings	Copies `settings.json` and strips out Cursor-specific keys so VS Code stays clean
⌨️ Keybindings	Copies `keybindings.json` as-is — the format is identical between the two editors
✂️ Code snippets	Copies all your custom snippet files
🧩 Extensions	Reads your full Cursor extension list and installs each one into VS Code
💾 Backups	Every VS Code file that gets overwritten is backed up as `.bak` first

🖥️ What It Looks Like in Your Terminal

The script is designed to keep you informed at every step. Here's a real example of the output:

╔══════════════════════════════════════════════════╗
║     Cursor → VS Code Migration  •  macOS         ║
╚══════════════════════════════════════════════════╝

Checking prerequisites...

      ✔  Cursor config  →  ~/Library/Application Support/Cursor/User
      ✔  VS Code config →  ~/Library/Application Support/Code/User

[1/4] Copying settings.json
      →  Backed up existing settings → settings.json.bak
      ✔  settings.json copied (4 Cursor-specific key(s) stripped)

[2/4] Copying keybindings.json
      ✔  keybindings.json copied

[3/4] Copying code snippets
      ✔  3 snippet file(s) copied

[4/4] Re-installing extensions into VS Code

      →  Found 12 extension(s) in Cursor.

      esbenp.prettier-vscode           ✔ installed
      dbaeumer.vscode-eslint           ✔ installed
      eamodio.gitlens                  ✔ installed
      ...

╔══════════════════════════════════════════════════╗
║                   Summary                        ║
╚══════════════════════════════════════════════════╝

  Config files
    ✔ Successes    3

  Extensions
    ✔ Installed    12 / 12

  Migration complete! Open VS Code and enjoy your familiar setup.

Step counter, color-coded results, a live extension install feed, and a full summary at the end. You always know what's happening and what worked.

🔧 One Step Before You Run It

For the extension migration to work, both editor CLIs need to be registered in your terminal. It's a one-time setup.

In Cursor: Cmd+Shift+P → Install 'cursor' command in PATH

In VS Code: Cmd+Shift+P → Install 'code' command in PATH

Verify they're ready:

cursor --version && code --version

If the CLIs aren't set up when you run the script, it'll skip extensions and print exact instructions to fix it — then you can re-run and it'll pick up where it left off.

🔒 It's Safe to Run

A few things the script never does:

It never deletes or modifies anything in Cursor
It never overwrites a VS Code file without backing it up first
It's safe to run multiple times

If something doesn't look right after migration, restoring is a single command:

cp ~/Library/Application\ Support/Code/User/settings.json.bak \
   ~/Library/Application\ Support/Code/User/settings.json

🧠 One Interesting Challenge: The Settings File

The most non-trivial part of this migration is settings.json. Since Cursor is a VS Code fork, it shares the same format — but it adds its own keys like cursor.general.gitGraphEnabled or aipopup.enabled that VS Code doesn't understand.

Copying the file as-is would leave a bunch of noise in your VS Code settings. So the script uses Python to parse the JSON and strip any key that starts with a known Cursor prefix before writing it out:

CURSOR_PREFIXES = ("cursor.", "aipopup.", "cursorprediction.", "cursorSonnet.")
removed = [k for k in list(settings) if k.startswith(CURSOR_PREFIXES)]
for k in removed:
    del settings[k]

It also gracefully handles malformed JSON (a trailing comma in settings is more common than you'd think). If the file can't be parsed, it copies it as-is and warns you instead of crashing.

📦 Get It

# Run directly
bash <(curl -fsSL https://raw.githubusercontent.com/yahav10/cursor-to-vscode/main/cursor_to_vscode.sh)

# Or clone it
git clone https://github.com/yahav10/cursor-to-vscode.git

The full source is on GitHub: yahav10/cursor-to-vscode

If this saves you the 30 minutes of manual work it used to take me, drop a ⭐ on the repo. And if you run into issues or want to add Linux/Windows support, PRs are very welcome.

Have you switched between Cursor and VS Code? What was the biggest pain point for you? Let me know in the comments 👇

I Built a Memory Layer for Claude Code — It Saves Me Hours Every Week

Tom Yahav — Sat, 07 Mar 2026 23:11:28 +0000

Every Claude Code session starts from scratch. No matter how many times you've explained your architecture, your tech stack, or why you chose JWT over sessions — Claude forgets all of it the moment the session ends.

I got tired of re-explaining the same decisions. So I built something about it.

The Problem That Costs You More Than You Think

Here's a conversation I was having three times a week:

Me: "Add authentication to the /orders endpoint"

Claude: "What authentication system are you using?"

Me: "JWT. We decided this in session 1."

Claude: "Got it. And what database?"

Me: "PostgreSQL with Prisma. We've been over this."

Claude: "And what middleware pattern?"

Me: [10 minutes later, still explaining context]

Sound familiar?

Every re-explanation burns tokens (which cost money), time (which you don't get back), and patience (which is finite).

I did some rough math on my own usage:

~3 Claude Code sessions per day
~15 minutes wasted per session re-explaining context
That's 5+ hours per week — just on context that Claude should already know

For a team of 4 developers, that's 20 hours per week. Gone.

The Fix: Give Claude a Memory

claude-session-memory is an open-source MCP server that gives Claude Code a persistent, queryable memory.

It works like this:

Session 1 — You make a decision, Claude saves it:

You: "Let's use JWT for authentication — stateless,
      scalable for our microservices."

Claude: "Saved as architectural decision #1."

Session 14 — You ask about it, Claude remembers:

You: "Why are we using JWT?"

Claude: "You chose JWT for authentication (decision #1)
        because of stateless scalability for microservices.
        Alternatives considered: session cookies, OAuth2."

Session 27 — You just build:

You: "Add auth to the /orders endpoint"

Claude: [queries memory, finds JWT decision,
         knows your middleware pattern, builds it correctly]

No re-explaining. No wasted tokens. No wrong assumptions.

Setup: 30 Seconds

npx claude-session-memory init

Restart Claude Code. Done.

That one command:

Creates a local SQLite database in .claude/project-memory.db
Registers the MCP server in your .claude/settings.json
Generates a memory-instructions template so Claude knows how to use it

What It Actually Does

Under the hood, it's an MCP server with 6 tools:

Tool	What it does
`save_decision`	Save an architectural decision with rationale, alternatives, and tags
`query_memory`	Search past decisions using natural language
`list_recent`	See recent decisions across sessions
`update_decision`	Deprecate or supersede outdated decisions
`get_stats`	Memory overview (runs automatically at session start)
`sync_claude_md`	Export decisions into your CLAUDE.md

When Claude starts a new session, get_stats fires automatically. Claude sees something like:

Decisions:  47 total (42 active, 3 deprecated, 2 superseded)
Sessions:   31
Last activity: 2 hours ago
Top tags: auth (8), database (6), api (5), performance (4)

Now Claude knows this project has history — and it will query that history before making assumptions.

Smart Features That Keep It Clean

Automatic Deduplication

Every time you save a decision, the server compares it against existing ones using Jaccard similarity:

> 80% similar — Auto-supersedes the older version (no cleanup needed)
60-80% similar — Returns a warning so you can decide
< 60% — Saved without warnings

This means you can freely save decisions without worrying about duplicates piling up.

Confidence Decay

Tag a decision as temporary or experimental, and it automatically fades over 30 days:

Day  0  → confidence 1.0 (full strength)
Day 15  → confidence 0.5
Day 30  → confidence 0.0 (fully faded)

Faded decisions are excluded from auto-generated docs but remain queryable. Regular decisions never decay.

CLAUDE.md Sync

Export your active decisions directly into CLAUDE.md:

npx claude-session-memory sync-claudemd

It injects a structured section between markers:

<!-- DECISIONS:START -->
## Architectural Decisions
_Auto-generated from project memory — 5 active decisions_

### Auth
- **Use JWT for authentication** — Stateless and scalable [auth, security]

### Database
- **Use PostgreSQL with Prisma** — ACID compliance [database]
<!-- DECISIONS:END -->

Everything outside the markers is preserved. This means Claude gets your most important decisions loaded into context automatically — zero-cost recall.

The Compounding Effect

This is the part that surprised me.

The first few sessions feel normal. You save some decisions, query a couple things. Fine.

But around session 20, something shifts. You stop explaining things. You say "add caching" and Claude already knows your stack, your patterns, your conventions. It just builds correctly.

By session 50, a new team member can open Claude Code in your project and ask "how does authentication work?" — and get the full decision history, rationale, alternatives, and trade-offs. Instantly.

The value compounds with every session. The more decisions you save, the smarter every future session becomes.

What It Doesn't Do

Let me be upfront about what this is not:

Not a cloud service — Everything is local SQLite. Zero network calls, zero telemetry.
Not a CLAUDE.md replacement — It complements CLAUDE.md by making it queryable and auto-generated.
Not magic — You still need to save decisions (though Claude learns to suggest saving them proactively).

A Full Dashboard — Not Just a CLI

You don't have to live in the terminal to use this. There's a built-in web dashboard:

npx claude-session-memory web

This launches a local Vue 3 + Tailwind app at http://localhost:3850 where you can:

Browse all decisions with full-text search, status filters, and tag filtering
View decision details — rationale, alternatives, consequences, linked files, and history
Explore sessions — see which decisions were made in each Claude Code session
Track analytics — work patterns, decision quality metrics, codebase knowledge coverage
Get AI coaching — an AI-powered insights panel that analyzes your decision patterns and suggests improvements
Import past sessions — scan your ~/.claude/projects/ directory and bulk-import decisions from old transcripts
Manage settings — database info, API key storage, maintenance tools

Everything runs locally. The dashboard reads from the same SQLite database that the MCP server uses — so what you see in the browser is always in sync with what Claude sees in conversation.

Monorepo? One Command.

If you have a workspace with multiple sub-projects:

npx claude-session-memory workspace-setup /path/to/workspace

This symlinks the MCP config into every git sub-project, so they all share the same decision history. Your auth decisions in one service are instantly available when working on another.

Real Query Examples

Once you have a few sessions worth of decisions, you can ask things like:

"Why did we choose JWT?"
"What decisions affect src/auth.ts?"
"Compare Pinia vs Vuex"
"Show me deprecated decisions"
"What are the alternatives to Redis?"
"Show recent decisions tagged 'database'"

The query router handles natural language — you don't need exact syntax.

Tech Stack

For the curious:

Storage: SQLite with FTS5 full-text search, WAL mode
Transport: MCP stdio (spawned by Claude Code)
Search: 9-pattern intent router with hybrid FTS5 fallback
Frontend: Web dashboard with Vue 3 + Vite + Tailwind CSS + ECharts
Dependencies: better-sqlite3, @modelcontextprotocol/sdk, commander
Tests: 179 tests, all passing

Get Started

npx claude-session-memory init

That's literally it. One command, restart Claude Code, and every session from now on builds on the last.

GitHub: github.com/yahav10/claude-code-memory
npm: npmjs.com/package/claude-session-memory
License: MIT

If this solves a problem you've been having, give it a star on GitHub. And if you have ideas for improvements, issues and PRs are welcome.

Stop re-explaining. Start remembering.

I Built a Local Analytics Dashboard for Claude Code — Here's What I Learned About My AI Coding Habits

Tom Yahav — Mon, 23 Feb 2026 11:56:08 +0000

You know that feeling when you check your Anthropic bill and think... where did all those tokens go?

I've been using Claude Code daily for months. It's incredible — but it's also a black box. I had no idea which sessions were burning through Opus tokens on trivial tasks, which prompts were triggering tool loops, or how much money I was wasting by not leveraging prompt caching.

So I built Claude Code Dashboard — a local-first analytics platform that reads your Claude Code session logs and turns them into actionable insights.

Zero telemetry. Zero outbound connections. Your data never leaves localhost.

npx claude-code-insights

That's it. One command. Dashboard opens at localhost:3838.

The Problem

Claude Code stores rich session logs in ~/.claude/projects/ — every message, tool call, token count, and model used. But there's no built-in way to:

See how much you're spending per day, per model, per session
Detect when Claude gets stuck in a tool loop (calling Bash 12 times in a row)
Know if you're actually benefiting from prompt caching
Compare your Opus vs Sonnet usage patterns
Watch what Claude is doing in real-time across concurrent sessions

All that data is just sitting there in JSONL files. I wanted to make it useful.

What It Does

Overview Dashboard

The landing page gives you the big picture: daily activity charts, cost trends, model distribution, and a GitHub-style activity heatmap. One glance tells you your coding rhythm with Claude.

Session Browser

Every Claude Code session you've ever run, in a virtual-scrolled table with multi-column sorting. Filter by project, date range, model, or cost. Toggle columns on/off. Click into any session for the full message-by-message breakdown.

Live Monitor

This one's my favorite. Real-time streaming via Server-Sent Events — you can watch Claude work as it happens:

Per-session KPI counters (messages, tokens, cost, tool calls)
Task progress tracking pulled from Claude's TodoWrite output
A terminal-style message feed showing user/assistant/tool/system events
Switch between concurrent active sessions

It's like htop for your AI coding sessions.

Cost Analytics

This is where it gets interesting. Most tools show you "total cost." This dashboard breaks down four token dimensions:

Dimension	What It Is
Input tokens	What you send to Claude
Output tokens	What Claude generates
Cache read tokens	Tokens served from Anthropic's prompt cache
Cache write tokens	Tokens written to cache for future reuse

You get per-model breakdowns, daily trends, a 30-day cost forecast, and — critically — a cache efficiency section that shows your hit rate, estimated savings, and what you would have paid without caching.

If your cache hit rate is below 20%, the dashboard tells you. With a specific recommendation.

AI Insights — A Linter for Your AI Usage

This is the feature I'm most proud of. 10 automated detection rules that analyze every session and flag patterns you'd never catch manually:

Rule	What It Catches
Cost Spike	Session costs 3x+ your average
Tool Loop	Same tool called 5+ times with no other tools
Context Bloat	1000+ input tokens with < 20% cache hit rate
Error Cascade	30%+ tool error rate in a session
Idle Session	1+ hour session with < 5 messages/hour
Model Mismatch	Opus used for simple tasks (< 10 messages)
Large Output	50,000+ output tokens in a single session
Abandoned Session	Only 1-2 messages sent
Cache Miss Rate	< 10% cache hits with 10K+ input tokens
Token Waste	Average cost per message > $0.50

Each fires with a specific, actionable recommendation — not just a metric. "Opus used for a session with only 3 messages — consider Sonnet" is more useful than a pie chart.

Tools & Skills Analytics

See which tools Claude uses most, their error rates, and how that changes over time. Spot patterns — are your Bash calls failing because of permission issues? Is the Read tool being called redundantly?

Interactive Agent

You can run Claude Code sessions directly from the dashboard. Pick your model (Sonnet, Opus, Haiku), set a permission mode, and go. The dashboard shows real-time cost tracking and requires explicit approval for dangerous operations (file writes, shell commands).

This one requires an ANTHROPIC_API_KEY — but the key is read by the Claude Agent SDK from process.env. The dashboard never reads, stores, or logs it.

Security: Not a Feature — An Architecture

I'm opinionated about this: a local analytics tool that phones home is worse than useless. So security isn't a toggle — it's enforced at every layer.

Network Guard

At startup, the server monkey-patches net.Socket.prototype.connect to block all non-localhost TCP connections at the socket level. This runs before any other code:

const originalConnect = net.Socket.prototype.connect;

net.Socket.prototype.connect = function (...args) {
  const host = parseHost(args);
  if (!isLocalhost(host)) {
    this.destroy(new Error(`[network-guard] Blocked: ${host}`));
    blockedAttempts.push({ host, port, timestamp: Date.now() });
    return this;
  }
  return originalConnect.apply(this, args);
};

If any dependency tries to phone home — analytics, error reporting, anything — the connection is destroyed and logged. Not blocked by a firewall rule. Destroyed in code.

PII Detection

A regex-based scanner catches sensitive data before it reaches the browser:

API keys (Anthropic sk-ant-*, OpenAI sk-*, generic pk-*/rk-*/ak-*)
AWS credentials (AKIA*, ABIA*, ACCA*, ASIA*)
GitHub tokens (ghp_*, gho_*, ghu_*, ghs_*, ghr_*)
JWTs, private key headers, emails, IP addresses

Matches are replaced with [REDACTED:type] tokens. This runs at three pipeline points: before SQLite storage, before WebSocket transmission, and before SSE broadcast.

Everything Else

Read-only — never touches your ~/.claude/ directory
Localhost-only — server binds to 127.0.0.1
CSP headers — default-src 'self', X-Frame-Options: DENY
Prepared statements — all SQLite queries are parameterized
Zero telemetry — no analytics, no tracking, no phone-home

Tech Stack

Layer	Technology
Frontend	Vue 3, TypeScript, Vite, Pinia, SCSS
Charts	ECharts (tree-shaken)
Tables	TanStack Vue Table + Vue Virtual
Backend	Fastify 5, better-sqlite3 (WAL mode)
Real-time	Server-Sent Events + WebSocket
Agent	Claude Agent SDK
Validation	Zod schemas as single source of truth
Testing	Vitest

It's a pnpm monorepo with shared packages for cost calculation, session parsing, insight detection, and TypeScript types.

Quick Start

npx (no install)

npx claude-code-insights

Global install

npm install -g claude-code-insights
claude-code-insights

From source

git clone https://github.com/yahav10/claude-code-dashboard.git
cd claude-code-dashboard
![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhskalxsfmybga7ykqz0.png)
pnpm install
bash scripts/build.sh
node packages/cli/dist/index.js

Opens a dashboard at http://localhost:3838 analyzing your sessions from ~/.claude/.

What I Learned About My Own Habits

Building this tool forced me to look at my own AI coding patterns. Some things I discovered:

I was using Opus for trivial tasks. The model-mismatch rule caught me sending 3-message sessions to Opus when Sonnet would have been identical quality at 40% the cost.
Tool loops are real. I had sessions where Claude called Bash 8+ times in a row trying to fix a test — each attempt slightly different but fundamentally the same approach. The tool-loop detector now alerts me when this happens.
Cache efficiency varies wildly. Some projects had 60%+ cache hit rates (long sessions, stable context). Others were below 5% (lots of file switching, short sessions). The cache breakdown helped me restructure how I prompt.
My most expensive sessions were rarely my most productive. The cost-spike detector showed that high-cost sessions often correlated with context bloat and tool loops — not with actual feature delivery.

Contributing

The project is MIT-licensed and open for contributions. If you use Claude Code, I'd love your feedback:

Star the repo if you find it useful — it helps others discover it.

TL;DR: npx claude-code-insights gives you a local, private, zero-telemetry analytics dashboard for your Claude Code usage. Costs, caching, tool patterns, AI-powered insights, live monitoring — all from one command.

yahav10 / claude-code-dashboard

Local-first analytics dashboard for Claude Code usage. Zero telemetry. Zero outbound connections.

📊 Claude Code Dashboard

Local-first analytics dashboard for Claude Code usage.

Understand your AI coding patterns, costs, and performance — all without leaving your machine.

Zero telemetry. Zero outbound connections. Your data never leaves localhost.

⚡ Quick Start

npx claude-code-insights

Opens a dashboard at http://localhost:3838 analyzing your Claude Code sessions from ~/.claude/.

Global install: npm install -g claude-code-insights

✨ Features

Feature	What it does
📈 Overview Dashboard	KPIs, daily activity charts, cost trends, model distribution, weekly heatmap
📋 Sessions Browser	Virtual-scrolled table with sorting, filters (date, model, project, cost), column toggles
🔍 Session Detail	Message-by-message timeline, tool breakdown, cost waterfall
🎯 Advanced Timeline	Gantt-style visualization with swim lanes, zoom, minimap, click-to-inspect
📡 Live Monitor	Real-time per-session tracking via SSE with session switching and message feed
🤖 Interactive Agent	Run Claude Code sessions from the dashboard (requires `ANTHROPIC_API_KEY`)
💰 Cost Analytics	Per-model and per-day breakdowns with 30-day linear

…

View on GitHub

I Built a CLI That Turns Claude Code's /insights Report Into Actionable Skills, Rules, and Workflows

Tom Yahav — Mon, 16 Feb 2026 20:48:42 +0000

The Problem: /insights Gives You a Report, Then What?

Claude Code's /insights command is one of its most underrated features. It analyzes your last 30 days of usage and generates a detailed HTML report: friction patterns, strengths, CLAUDE.md suggestions, workflow recommendations, and more.

The problem? The report is read-only. It's a beautiful HTML page that you read, nod at, and then close. The friction patterns it identifies are real — but translating them into CLAUDE.md rules, custom skills, and settings changes is manual, tedious work that most developers skip entirely.

That's the gap claude-insights fills.

What claude-insights Does

claude-insights is an open-source CLI tool that parses your /insight report HTML and generates production-ready output files — personalized to your specific friction patterns, not generic templates.

One command:

npx claude-insights analyze ~/.claude/usage-data/report.html

Generates:

Output File	What It Contains
`insights-todo.md`	Prioritized task table with steps, time estimates, and expected friction reduction
`CLAUDE.md-additions.md`	Ready-to-paste rules organized by section (General, CSS, Testing, Debugging)
`.claude/settings-insights.json`	Hook configurations extracted from your report
`.claude/skills/*.SKILL.md`	Custom skill files — one per friction pattern — with triggers, steps, rules, and verification checklists
`insights-README.md`	Placement guide explaining where each file goes

The Pipeline: Parse, Analyze, Generate

The tool follows a three-stage pipeline:

1. Parse

Uses cheerio to extract structured data from the HTML report — stats, project areas, friction categories with examples, CLAUDE.md suggestions with rationale, feature recommendations, workflow patterns, and more.

Parsing report...

Parsed report: 982 messages, Jan 5 — Feb 3, 2026
  3 friction areas, 4 strengths, 5 CLAUDE.md suggestions

2. Analyze

This is where the tool does its heavy lifting. For each friction pattern in your report, it:

Generates a custom skill file with YAML frontmatter containing trigger-rich descriptions extracted from your actual friction examples
Matches friction patterns to CLAUDE.md suggestions using significant-word overlap scoring
Cross-references workflow patterns from the report to include suggested starting prompts
Builds verification checklists derived from your specific failure examples — so Claude is forced to check against each one
Derives a prioritized to-do list ranked by impact: friction-derived tasks (High), CLAUDE.md rules (High), features (Medium), patterns (Medium)

3. Generate

Writes all output files to your chosen directory, creating the .claude/skills/ structure automatically.

What the Generated Skills Look Like

This is the part that matters most. Each friction pattern becomes a structured skill file that Claude Code can invoke with a slash command.

Here's a real example — generated from a report where Claude kept proposing fixes without checking the codebase first:

---
name: solutions-codebase-verification
description: |
  Use when encountering premature solutions without codebase verification,
  especially when adding new API endpoints to an existing controller,
  or refactoring shared utility modules.
---

## When to Use This Skill

- When a task involves premature solutions without codebase verification.
- When adding new API endpoints to an existing controller.
- When refactoring shared utility modules.

## Steps

1. **Diagnose**: Read the relevant files and map the existing patterns.
   Identify boundaries, ownership, and current behavior before changing
   anything.
2. **Identify constraints**: List what must NOT change, which components
   are affected, and document your assumptions. Get confirmation.
3. **Propose approach**: Describe your planned fix and explain why it
   avoids the known failure patterns listed in "What Goes Wrong" below.
   Wait for approval.
4. **Implement**: Apply the most minimal, narrowly-scoped change possible.
5. **Verify**: Confirm the fix works AND doesn't regress related components.

## Rules

- Before proposing a fix, always verify the approach against the existing
  codebase patterns first
- Do NOT suggest options or solutions without confirming they work in this
  specific codebase
- After implementing, verify the fix doesn't regress related components

## What Goes Wrong

Review these failure patterns before implementing. Your fix must not
repeat them:

- When adding a new endpoint, Claude reused a pattern from a different
  controller that didn't match the authentication middleware in this one,
  requiring a full rewrite after review.
- When refactoring the shared utility, Claude moved functions without
  checking downstream consumers, breaking two dependent services.

## Verification Checklist

- [ ] Fix addresses the specific issue the user reported
- [ ] Change follows existing codebase patterns found during diagnosis
- [ ] Change is narrowly scoped — minimal blast radius
- [ ] Related/sibling components verified — no regressions
- [ ] Approach was proposed and confirmed before implementation

After placing this file in .claude/skills/, you invoke it with /solutions-codebase-verification at the start of any relevant task. Claude reads the skill, follows the steps, checks against your documented failure patterns, and runs through the verification checklist before claiming the work is done.

The key insight: these skills aren't generic. They contain your friction examples, your failure patterns, and your codebase-specific rules. That's what makes them effective.

The CLAUDE.md Rules: Categorized and Annotated

The tool doesn't just dump rules — it categorizes them by domain and includes the rationale from your report:

## General Rules

Before proposing a fix, always verify the approach against the existing
codebase patterns first. Do NOT suggest options or solutions without
confirming they work in this specific codebase.

> _Why: In multiple sessions Claude suggested approaches without verifying
> them against the codebase, leading to wrong patterns (e.g., incorrect
> test setup, mismatched import conventions), requiring repeated user
> corrections._

## CSS & Styling

When working with CSS in component libraries (especially scoped styles
and design tokens): 1) Always scope CSS fixes narrowly to avoid breaking
other components, 2) Test that changes don't regress sibling views.

## Testing

Follow the existing test patterns in the file's directory — check sibling
test files before writing new ones. Match existing mock/setup patterns
for unit tests and page object patterns for E2E tests.

## Debugging

When debugging production or intermittent issues, do NOT jump to
conclusions. First: reproduce locally. Second: add targeted diagnostic
logging. Third: only propose a fix when the root cause is confirmed.

You copy the rules you want into your project's CLAUDE.md. The _Why annotations help you decide which rules matter most for your workflow.

The Prioritized To-Do List

Instead of reading a report and trying to figure out what to do first, you get a ranked action plan:

#	Task	Priority	Est Time
1	Address friction: "Premature Solutions Without Codebase Verification"	High	5 min
2	Address friction: "Repeated Styling and Layout Failures"	High	5 min
3	Address friction: "Debugging Wrong Root Causes"	High	5 min
4	Add CLAUDE.md rule: "Before proposing a fix, always verify..."	High	2 min
5	Set up Hooks	Medium	10 min
6	Try workflow: High friction from premature solutions	Medium	5 min

Each task includes concrete steps: which file to copy, where to paste it, and how to test it.

Architecture

The tool is built with:

TypeScript — strict types for every data structure (ReportData, FrictionCategory, SkillFile, AnalyzerOutput)
cheerio — HTML parsing without a browser
commander — CLI argument handling
vitest — 83 tests covering parser, analyzer, generator, and full integration
ESLint with typescript-eslint — zero violations
GitHub Actions CI — automated build/test/lint on Node 18 and 20

The codebase is ~500 lines of source across 5 files. No frameworks, no runtime dependencies beyond cheerio and commander.

How It Compares to Existing Tools

There are several Claude Code usage tools in the ecosystem, but they solve different problems:

Tool	Focus
ccusage	Token/cost analysis from JSONL session files
claude-code-usage-analyzer	Cost breakdown by model and token type
awesome-claude-skills	Curated collections of hand-written skills
claude-code-skill-factory	Toolkit for manually building skills
claude-insights	Automatically generates personalized skills, rules, and settings from your /insight report

The distinction: existing tools either analyze costs or provide generic pre-built skills. claude-insights bridges the gap between Anthropic's insight analysis and your project configuration — automatically.

Getting Started

Install globally

npm install -g claude-insights

Or run directly with npx

npx claude-insights analyze ~/.claude/usage-data/report.html

With a specific output directory

npx claude-insights analyze ~/.claude/usage-data/report.html -o ./my-project

Then follow the generated to-do list

Copy CLAUDE.md rules into your project's CLAUDE.md
Merge settings into .claude/settings.json
Copy skill files to .claude/skills/
Test with /skill-name on your next task

- License: MIT

claude-insights is open source and MIT licensed. Contributions, issues, and feedback are welcome on GitHub.

Closures Explained in minutes (🎒 Backpack Analogy)

Tom Yahav — Thu, 13 Nov 2025 13:10:53 +0000

Ever wondered why some functions "remember" things even after they should've been forgotten?

Like:

"How does this function still know that variable?!" 🤯

Congratulations — you just met one of JavaScript's most powerful (and confusing) features:

Closures

Let's break it down super simply. No CS degree needed.

🎒 Think of a Function as a Person with a Backpack

When a function runs, it's like a person going on a trip.

Before they leave, they pack a backpack with everything they might need:

Variables from their current location
Variables from their parent's house (outer function)
Even grandparents' stuff if needed

That backpack? That's a closure.

The function carries it everywhere, even after leaving home.

Example: Leaving Home But Keeping Memories

function parent() {
  const secret = "🔑 Secret key";

  function child() {
    console.log(secret); // Child still has access!
  }

  return child;
}

const myFunction = parent();
myFunction(); // Output: 🔑 Secret key

What just happened?

parent() created a variable called secret
parent() returned the child function
Even though parent() finished running, child still remembers secret!

Why? Because child packed it in its backpack (closure) before leaving home.

Real-World Example: A Counter

function createCounter() {
  let count = 0; // Private variable in the backpack

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log(counter.getCount()); // 1

Why is this useful?

count is private — you can't access it directly
Only the functions inside the closure can modify it
It's like data protection built into JavaScript!

Another Way to Think About It

Concept	Analogy
Outer function	Your home
Inner function	You leaving home
Variables	Stuff you might need
Closure	Your backpack
Returned function	You at your new location, still with your backpack

Try This in the Console

function makeGreeting(name) {
  const greeting = `Hello, ${name}!`;

  return function() {
    console.log(greeting);
  };
}

const greetAlice = makeGreeting("Alice");
const greetBob = makeGreeting("Bob");

greetAlice(); // Hello, Alice!
greetBob();   // Hello, Bob!

Why does this work?

Each time you call makeGreeting(), it creates a new closure
greetAlice has its own backpack with "Alice"
greetBob has its own backpack with "Bob"
They don't interfere with each other!

Common Pitfall: Loop Problem

This is where beginners get confused:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// Output: 3, 3, 3 (NOT 0, 1, 2)

Why?

All three functions share the same i
By the time they run, i is already 3!

Fix #1: Use `let` instead of `var`

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// Output: 0, 1, 2 ✅

let creates a new closure for each iteration!

Fix #2: Create a closure manually

for (var i = 0; i < 3; i++) {
  (function(num) {
    setTimeout(function() {
      console.log(num);
    }, 1000);
  })(i);
}
// Output: 0, 1, 2 ✅

When Are Closures Useful?

Private variables (like our counter example)
Factory functions (creating multiple instances)
Event handlers (remembering context)
Callbacks (preserving state)
Module pattern (organizing code)

TL;DR

Concept	Meaning
Closure	Function's backpack of variables
Outer function	Home where you pack stuff
Inner function	You with the backpack
Variables	Items in the backpack
Scope	What you can access

Final Thought

Closures aren't magic — they're just functions remembering where they came from.

Every function in JavaScript has a built-in backpack.

It automatically packs variables from its surroundings.

That backpack goes wherever the function goes.

Once you understand that, closures stop being confusing and start being powerful.

Got questions?

Drop them in the comments! I love explaining the "why" behind the weird JavaScript behaviors we all encounter.

Speed Up Your Frontend Work: AI-Powered n8n Workflows That Write Code and Save You Time

Tom Yahav — Thu, 23 Oct 2025 18:52:04 +0000

Frontend is changing fast—AI automation is now super useful for frontend devs, not just backend. In 2025, n8n got really popular because it lets you set up clear, visual workflows for everyday tasks. The coolest part: AI models like GPT-5 and Gemini now work easily with n8n to help with things frontend devs need all the time.

Why Use n8n for Frontend?

Automate simple stuff: Fetching data, processing forms, sending out notifications—do all this with easy visual steps
Use AI for feedback: Let AI scan user feedback and sort it, write summaries or quick replies
Build smart forms: AI checks if people fill out forms right before they even hit submit
Let your workflows get smarter: The more your workflow runs, the more it learns and does things better

Real Example: Using AI to Handle User Feedback

Say you launch a new feature—lots of feedback, but sorting it all takes ages.

n8n helps: Connect your feedback form to an AI sentiment checker (like OpenAI or Gemini), and n8n can spot unhappy users, let your team know in Slack, and even write a draft reply for you:

const sentimentScore = items[0].json.sentimentResult;
const userText = items[0].json.inputText;
let category = 'neutral', response = '';
if (sentimentScore > 0.7) {
  category = 'positive';
  response = `🎉 Glad you liked it: "${userText}". Anything else you'd like to see?`;
} else if (sentimentScore < 0.3) {
  category = 'negative';
  response = `😔 Sorry about that: "${userText}". Tell us more so we can help!`;
} else {
  response = `🙏 Thanks for your feedback: "${userText}". We're on it!`;
}
return [{ json: { sentiment: category, responseDraft: response } }];

Another Simple Thing: AI-Checked Forms

Forget tricky regular expressions—let AI check forms, qualify leads, or even start the onboarding flow automatically. Tools like AgentUI let you drag and drop smart fields, connect them to n8n, and start improving conversions with zero hassle.

Pro Tips

Use the visual editor: Branching and looping are super easy—no messing with complicated code
Webhook triggers: Start automation fast, even from static sites
Control your data: Want privacy? Self-host n8n and tweak it your way, no big company rules
Connect to anything: APIs, headless CMS, user analytics, AI models—n8n's HTTP node does it all
Let workflows learn: Feed outcome data to your AI nodes so each run gets smarter

Ready-To-Go Ideas

Auto-move bug reports, let AI sort and send updates to Jira
Look at session logs and let AI spot why users leave
Auto-share new content to social media and tag all contributors

Wrapping Up

n8n isn't just another tool—it's your automation buddy. In 2025, hooked up to AI, it saves frontend teams loads of time. Less boring tasks, more cool features. The future is visual, smart, and keeps getting better.

What quick AI-powered workflow should every frontend dev build? Share your ideas and let's swap setups!

How OpenAI's Agent Platform is Revolutionizing Frontend Development

Tom Yahav — Wed, 15 Oct 2025 10:32:51 +0000

Introduction

As Frontend developers, we're constantly seeking tools that make our workflows faster, smarter, and more efficient. Enter OpenAI's Agent Platform—a revolutionary ecosystem that enables developers to build, deploy, and optimize AI-powered agents that can transform how we approach frontend development.

In this post, I'll walk you through how OpenAI's Agent Platform (https://openai.com/agent-platform/) can be seamlessly integrated into your frontend workflow, with real-world examples that demonstrate its practical value.

What is the OpenAI Agent Platform?

The OpenAI Agent Platform is a comprehensive suite designed to help developers ship production-ready agents faster and more reliably. The platform includes:

AgentKit - Your Building Toolkit

Agent Builder: Design agents visually with drag-and-drop nodes, versioning, and guardrails
Agents SDK: Build agents in Node, Python, or Go with a type-safe library that's 4× faster than manual prompt-and-tool setups
Built-in Tools: Web search, file retrieval, image generation, code execution, and even browser agents that complete tasks on your behalf

ChatKit - Deploy UI Instantly

Launch fully integrated chat experiences with drag-and-drop customization—no need to spend weeks building custom front-end UI.

Evals - Optimize Performance

Run automated evaluations with custom graders
Automatic prompt optimization based on eval results
Trace grading for the last 100—or 1,000—executions of your workflow

According to OpenAI's data, organizations using the Agent Platform have seen:

70% reduction in iteration cycles
40% faster agent evaluation timelines
2 weeks of custom front-end UI work saved
75% less time to develop agentic workflows

How Frontend Developers Can Leverage Agent-Based Tools

1. Automate Repetitive Tasks

Agent-based tools can handle mundane tasks like code formatting, documentation generation, or dependency updates—freeing you to focus on creative problem-solving.

2. Improve UI Interaction

With access to web search, file retrieval, and code execution tools, agents can provide contextual assistance directly within your development environment.

3. Browser Automation

The platform includes browser agents that can complete browser-related tasks on your behalf—imagine automating testing workflows, data scraping, or UI testing scenarios.

4. Rapid Prototyping

Using ChatKit, you can deploy conversational interfaces in minutes, perfect for adding AI-powered support or interactive features to your applications.

Real-Life Examples for Frontend Developers

Let's explore three practical scenarios where OpenAI's Agent Platform can supercharge your frontend workflow:

Example 1: GPT-Powered UI Element Autocompletion in React/Vue

The Problem: Writing repetitive component boilerplate is time-consuming.

The Solution: Build an agent using the Agents SDK that analyzes your project structure and generates context-aware component snippets.

// Using the Agents SDK (Node)
import { Agent } from 'openai-agents-sdk';

const componentAgent = new Agent({
  name: 'React Component Generator',
  tools: ['file_retrieval', 'code_execution'],
  prompt: 'Analyze the existing components and generate a new component that follows the project patterns'
});

const newComponent = await componentAgent.run({
  input: 'Create a ProfileCard component with avatar, name, and bio'
});

Real Impact: Instead of manually creating files, importing dependencies, and setting up props, your agent handles it in seconds—complete with TypeScript types and styled-components if that's your pattern.

Example 2: Automated Dashboard Data Retrieval and Visualization

The Problem: Pulling data from multiple APIs and formatting it for dashboards requires significant glue code.

The Solution: Use a browser agent to automate data retrieval, transformation, and even generate visualization code.

Workflow:

Agent accesses internal APIs or web sources using web search and browser tools
Data is transformed and structured based on your requirements
Agent generates Chart.js or D3.js code tailored to your data
You review and integrate the visualization into your dashboard

Real Impact: What typically takes hours of API documentation reading, data wrangling, and chart configuration can be reduced to a 15-minute agent-assisted workflow.

Example 3: Agent-Based Error Detection and Prompt Optimization in Dev Tools

The Problem: Debugging cryptic error messages and optimizing user-facing prompts is tedious.

The Solution: Integrate the Agents SDK into your development workflow to automatically detect errors, suggest fixes, and optimize prompts.

Implementation:

Set up Evals to run automated tests on your agent workflows
Use trace grading to analyze the last 1,000 executions
Apply automatic prompt optimization based on eval results
Integrate findings directly into your IDE via SDK

# Using the Agents SDK (Python)
from openai_agents import Agent, Evals

agent = Agent(
    name="Error Detective",
    tools=["code_execution", "web_search"]
)

# Run evals with custom graders
eval_results = Evals.run(
    agent=agent,
    test_cases=your_test_suite,
    grader="pass_if_no_errors"
)

# Get optimized prompts
optimized_agent = agent.optimize_from_evals(eval_results)

Real Impact: Your error detection becomes 30% more accurate (per OpenAI's benchmarks), and you spend less time debugging and more time building.

Practical Tips for Getting Started

1. Start with Agent Builder

If you're new to agentic workflows, begin with the visual-first Agent Builder. Use templates to understand common patterns before diving into code.

2. Leverage Built-in Tools

Don't reinvent the wheel—use the platform's built-in tools for web search, file retrieval, and code execution. They're optimized and production-ready.

3. Experiment with ChatKit

If you need to add a conversational interface to your app, ChatKit saves weeks of development time. Deploy a prototype in hours, not sprints.

4. Use Evals from Day One

Set up automated evaluations early. The prompt optimization and trace grading features will help you iterate faster and catch issues before they reach production.

5. Explore the SDKs

The Agents SDK for Node, Python, and Go is type-safe and significantly faster than building from scratch. Check out the documentation at https://openai.com/agent-platform/.

Resources for Further Learning

Official Agent Platform: https://openai.com/agent-platform/
AgentKit Documentation: Explore Agent Builder, Agents SDK, and built-in tools
ChatKit Demo: See live examples of deployed chat interfaces
Evals Guide: Learn how to set up custom graders and optimize prompts

Why Every Frontend Dev Should Explore Agent Platforms

Here's the bottom line: the OpenAI Agent Platform helps you save time, increase accuracy, and deliver smarter applications.

Save Time

75% less time developing agentic workflows
2 weeks of front-end UI work saved per project
70% reduction in iteration cycles

Increase Accuracy

30% increased agent accuracy with evals
Built-in guardrails and versioning prevent mistakes
Automatic prompt optimization based on real-world performance

Deliver Smarter Apps

Integrate conversational AI directly into your products
Automate complex workflows that previously required manual intervention
Provide users with intelligent, context-aware experiences

The future of frontend development isn't just about writing code—it's about orchestrating intelligent systems that augment our capabilities. OpenAI's Agent Platform gives you the tools to make that future a reality, today.

Join the Conversation

Have you experimented with AI agents in your frontend projects? What tasks would you love to automate? Share your ideas, experiences, or questions in the comments below!

If you've already integrated agent-based tools into your workflow, I'd love to hear about your successes (and challenges). Let's learn from each other and push the boundaries of what's possible in frontend development.

Ready to get started? Visit https://openai.com/agent-platform/ and start building today.

What agent-powered tool would make your frontend workflow 10× better? Drop your thoughts below! 👇

Boost Your Dev Workflow: Top MCP Servers you should check now

Tom Yahav — Mon, 14 Jul 2025 20:05:19 +0000

What Is an MCP?

The Model Context Protocol (MCP) is an open, JSON-RPC–based standard released by Anthropic in November 2024 that allows LLM-powered apps to interact with external services—like files, browsers, APIs—via standardized, tool-like servers. Think of it as the “USB‑C port for AI”: universal, plug-and-play connectivity for LLMs across platforms like Cursor, Claude, and Windsurf.

Top 10 Verified MCP Servers

Each of these has confirmed MCP support, ready for integration into your projects.

Sequential Thinking

Function: Plan multi-step workflows via structured reasoning.
Verified: Listed in Cursor/Glama MCP directories.

Cursor use:

npm install mcp-sequential-thinking
cursor --mcp stdio mcp-sequential-thinking

Example:

"Plan a 5‑stage CI/CD pipeline…"

Returns a step-by-step plan.

Puppeteer

Function: Browser automation—scraping, UI testing.
Verified: Official MCP reference, GitHub listings.
Cursor use:

pip install mcp-puppeteer
cursor --mcp stdio mcp-puppeteer

Example:

"Get all headlines from example.com…"

Memory Bank

Function: Persist chat or project context across sessions.
Verified: Popular “memory” MCP implementations like Polymemory.

Cursor use:

npm install mcp-memory-bank
cursor --mcp stdio mcp-memory-bank

Example:

"Recall our database schema explained last session…"

Playwright

Function: Cross-browser automation (Chromium, Firefox, WebKit).
Verified: Listed in official GitHub MCP repos.

Cursor use:

pip install mcp-playwright
cursor --mcp stdio mcp-playwright

Example:

"Screenshot example.com in Firefox…"

GitHub

Function: Manage repos, PRs, issues, and CI.
Verified: Official implementation in Anthropic’s MCP repo .

Cursor use:

npm install mcp-github
GITHUB_TOKEN=… cursor --mcp stdio mcp-github

Example:

"List open PRs in repo X…”

DuckDuckGo

Function: Light, privacy-friendly web search.
Verified: Community-hosted MCP listings.

Cursor use:

npm install mcp-duckduckgo
cursor --mcp stdio mcp-duckduckgo

Example:

"Search React performance best practices…"

MCP Compass

Function: Discovery assistant for MCP servers.
Verified: Glama directory listing.

Cursor use:

pip install mcp-compass
cursor --mcp stdio mcp-compass

Example:

"Recommend an MCP for cloud SQL operations…"

Apidog

Function: API spec, testing, and SDK generation.
Verified: Official support from API-focused MCP sources.

Cursor use:

npm install mcp-apidog
cursor --mcp stdio mcp-apidog

Example:

"Test GET /users and generate client…"

File System Function: Read/write, refactor, and modify local files. Verified: Listed in MCP directories.

Cursor use:

pip install mcp-fs
cursor --mcp stdio mcp-fs

Example:

"Rename variable foo ➝ bar across .js files…"

Notion

Function: Read/write Notion docs and tasks.
Verified: Included in Anthropic’s MCP server repo.

Cursor use:

npm install mcp-notion
NOTION_TOKEN=… cursor --mcp stdio mcp-notion

Example:

"Create a meeting note under Project X…"

🎁 Bonus: Context7 MCP & More

Context7

Function: Injects latest version‑specific docs and code examples directly into prompts.
Verified: Supported in multiple MCP directories, GitHub, Upstash, Apidog.

Cursor integration via Smithery:

npx @smithery/cli install @upstash/context7-mcp --client cursor --key YOUR_KEY

Or add in Cursor settings:

Settings → MCP → Add new global MCP → select Context7

Usage:

"How do I use Next.js middleware? use context7"

Other Bonus Servers (community favorites)

Slack: Read/write Slack channels (great for asking teammates)
Sentry: Pull issue details for auto-debug workflows
Vector Search: Semantic search over your repos or docs

Integration Guide: MCP + Cursor

Add MCP servers via your ‘mcp.json’
or Cursor GUI:


{
  "servers": [
    { "name": "context7", "path": "context7-mcp" },
    { "name": "github", "path": "mcp-github", "env": { "GITHUB_TOKEN": "…" } },
    { "name": "fs", "path": "mcp-fs" }
  ]
}

Or start via CLI:

cursor \
  --mcp stdio context7-mcp \
  --mcp stdio mcp-github \
  --mcp stdio mcp-fs

In Cursor’s prompt:

"List open GitHub PRs, then update README, and show me the latest docs for React Query — use context7."

Cursor orchestrates between MCP servers to deliver results, modify code, and inject fresh documentation—all in one session.

MCP Security & Trust

MCP is open-source and adopted by Anthropic, OpenAI, DeepMind, Microsoft, etc. Still, security is vital: projects like MCP Guardian and academic audits highlight prompt/tool poisoning as major risk vectors.
Best practices:

Run servers locally or behind your firewall
Use permission scoping, token auth, and rate-limits
Verify servers from trusted registries (e.g. modelcontextprotocol.org)

TL;DR

MCP is the standardized way for LLMs to act: browse web, edit files, manage tasks, and more.
Today’s MCP ecosystem includes 10+ fully verified servers, with Context7 bringing live docs into your coding flow.
Use Cursor to wire up powerful toolchains in minutes. Code smarter, not harder!

Let me know if you’d like help setting up any of these in your team project 😊

Why Msty Might Be the Chat Client Devs Didn’t Know They Needed

Tom Yahav — Sun, 13 Jul 2025 12:23:21 +0000

Let’s face it — most of us are drowning in chat tools.

Slack at work. WhatsApp with family. Discord for side projects. Telegram because that one community swears by it. It’s chaos.

Then you stumble across Msty — a new chat client that doesn’t just simplify communication, it respects your time, privacy, and focus. And for developers? That’s gold.

🤝 Quick Note Before We Dive In

This is not a sponsored post.
I’m not affiliated with Msty, not being paid to write this, and I didn’t get any perks or swag in return.

I just tried it, liked it, and felt it deserved a proper write-up — especially for developers like me who are always hunting for tools that reduce noise and help us stay focused.

So, What Is Msty?

Msty is a privacy-first, distraction-free chat app that brings conversations back to basics — but with smart, modern touches.

No ads. No noise. No unnecessary features.

Just you, your conversations, and total control.

Why It’s Worth Your Attention

1. Clean UI, Zero Bloat

You open Msty, and it’s just… calm.

No overloaded sidebars, no ten different tabs for “spaces,” “huddles,” “threads,” or “reactions.” The UX is crisp, minimal, and gets out of your way.

It’s like the “clean code” of chat apps.

2. Built with Privacy in Mind

Everything’s end-to-end encrypted. No creepy tracking. No surprise data harvesting. You can even set messages to auto-delete after a time you choose.

As devs, we know how easy it is for platforms to misuse data. Msty flips the script.

Works Everywhere and Actually Syncs

Mac, Windows, Linux, iOS, Android, and the web — and yes, it just works.

Start a chat on your laptop, continue on your phone, then finish it from your iPad — all without syncing issues or “reconnect” errors.

Focus Mode That Respects Your Flow

You’re deep in code. The last thing you need is a blinking chat icon.

Msty’s Focus Mode holds your messages until you’re ready — like a “Do Not Disturb” that actually works. You can even automate it around your working hours.

5. Minimal Personalization, Maximum Clarity

Dark mode? Yep. Notification tweaks? Of course.

But it never overwhelms you with too many toggles. It’s thoughtful, not over-engineered — just like your favorite clean architecture pattern.

Designed with Empathy, Not Engagement Metrics

Most apps want to hook your attention. Msty? It lets you breathe.

No engagement traps. No “You missed this!” guilt. It’s made for humans — and especially for devs who value tools that stay out of the way.

Should You Try It?

If you’ve ever wished chat clients were:

Less noisy
More secure
Actually helpful in your workflow
Designed with devs (and humans) in mind

Then yes — Msty is worth exploring.

🟣 Check out Msty — and let me know what you think in the comments. I’m genuinely curious how others use it in their workflow.

Want more tools that make your dev life better? Follow me here on Dev.to — I write about AI, UI/UX for devs, and modern tooling that respects your brain.

AI‑Enhanced React: Build Your First Chatbot in less than 10 Minutes 🚀

Tom Yahav — Wed, 09 Jul 2025 19:00:00 +0000

Want a hands-on tutorial that shows you exactly how to build a React chatbot powered by OpenAI? Let’s dive in!

🧰 Why Do This?

Adds real AI interaction capability to your front-end.
Teaches prompt chaining and handling context.
Great portfolio piece and learning experience.

🔧 What You’ll Need

OpenAI API key
Node.js & npm or yarn
Create React App or Vite setup

1. Set Up Your React Project

npx create-react-app ai-chatbot
cd ai-chatbot
npm install openai

2. Secure Your API Key

Create .env.local:

REACT_APP_OPENAI_KEY=your_api_key_here

⚠️ Never commit this file.

3. Create a Simple Backend Proxy

Since we don’t want to expose API keys in the client, create a quick Express server:

npm install express openai dotenv

// server.js
import express from 'express'
import OpenAI from 'openai'
import 'dotenv/config'

const app = express()
app.use(express.json())
const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY })

app.post('/chat', async (req, res) => {
  const { messages } = req.body
  const resp = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages,
  })
  res.json({ reply: resp.choices[0].message.content })
})

app.listen(6000, () => console.log('API ready!'))

4. Connect Front‑end Chat UI

In src/App.js:

import React, { useState } from 'react'

function App() {
  const [msg, setMsg] = useState('')
  const [history, setHistory] = useState([])

  const sendMsg = async () => {
    const userMsg = { role: 'user', content: msg }
    const updated = [...history, userMsg]
    setHistory(updated)
    setMsg('')

    const resp = await fetch('/chat', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ messages: updated })
    }).then(r => r.json())

    setHistory([...updated, { role: 'assistant', content: resp.reply }])
  }

  return (
    <div>
      {history.map((m,i) =>
        <div key={i} className={m.role}>{m.content}</div>
      )}
      <input value={msg} onChange={e => setMsg(e.target.value)} />
      <button onClick={sendMsg}>Send</button>
    </div>
  )
}

export default App

5. Improve the UX

Add a system message for personality
Show loading state
Add auto-scroll to the bottom
Style the chat bubbles

✅ Customizing Tips

Switch model to gpt-4 if you have access.
Stream responses for a “typewriter effect” (like this tutorial suggests)
Consider deploying the Express server with Vercel or Heroku.

👏 What You’ve Built

You now have a chat interface that:

Takes input from the user
Sends prompts (with conversation history) to OpenAI
Receives and displays AI responses

All in a modern React app with clean separation of front/back-end logic.

🚀 What’s Next?

Add message persistence (localStorage or a DB)
Improve accessibility and UX
Integrate with React frameworks like Next.js
Deploy your chatbot and show it off!

From Static to Adaptive: How AI is Changing Responsive UI Design

Tom Yahav — Mon, 07 Jul 2025 19:45:00 +0000

For years, we’ve relied on responsive design to make sure our websites and apps look great on every screen. Media queries, flexible grids, and breakpoints have been our best friends.

But what if we could go one step further — and make our UIs adapt not just to screen size, but to what our users actually need in the moment?

That’s where AI-powered adaptive UIs come in. And it’s not science fiction anymore — it’s already starting to happen.

What’s the Difference?

You’ve probably heard these terms tossed around interchangeably, but they’re not the same:

Responsive UI adjusts layouts to the device — like a phone vs. a laptop.
Adaptive UI adjusts layouts, content, or features based on how the user is behaving, where they are, or what they’re trying to do.

Think of it like this:

Responsive: “Hey, you’re on a smaller screen — let me shrink things!”
Adaptive: “Hey, you seem lost — let me give you a hand.”

How Does AI Make UIs Smarter?

Modern AI models can look at how people use your app in real-time: Are they scrolling quickly up and down? Do they hover indecisively over buttons? Are they hesitating at checkout?

By analyzing these patterns, AI can predict what a user might want next — and adjust the UI accordingly.

Examples in the wild:

An online store that shows faster checkout options if you usually buy the same thing.
An educational site that simplifies exercises if it notices you struggling.
A dashboard that brings forward your most-used tools when you’re in a rush.

Let’s Build a Tiny Demo: Adaptive “Need Help?” Button

To see this in action, here’s a simple Vue 3 app that tracks your scrolling and shows a “Need Help?” button if you scroll like you’re lost. It’s not a production-level AI, but it shows the concept beautifully.

<template>
  <div class="container" ref="scrollContainer" @scroll="handleScroll">
    <h1>Adaptive UI Demo</h1>
    <p v-for="i in 100" :key="i">Line {{ i }}</p>
    <button v-if="showHelp" class="help-button">Need Help?</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const scrollEvents = ref([]);
const showHelp = ref(false);

function handleScroll() {
  const now = Date.now();
  scrollEvents.value.push(now);

  if (scrollEvents.value.length > 10) scrollEvents.value.shift();

  const interval = scrollEvents.value[scrollEvents.value.length - 1] - scrollEvents.value[0];

  // If 10 scrolls happened in under 3 seconds, user might be lost
  showHelp.value = interval < 3000;
}
</script>

<style scoped>
.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 1rem;
}
.help-button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.8rem 1.2rem;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

What’s happening here?

Every time you scroll, it logs the timestamp.
If you scroll quickly (lots of events in a short time), it shows the “Need Help?” button.
Replace this simple logic with a real AI call to predict user intent and you’ve got an adaptive UI.

What’s the Big Deal?

Adaptive UIs can:

Make your app feel more personal and helpful.
Reduce user frustration by offering the right help at the right time.
Boost engagement and conversions by removing friction before it becomes a problem.

And best of all: You can start small, like in the example above.

Don’t Forget the Human Side

As exciting as adaptive UIs are, remember:

Be transparent: Let users know if you’re personalizing their experience.
Respect privacy: Collect only what you need, and store it securely.
Give users control: Let them opt out if they prefer a static experience.

Ready to Explore?

Start by looking at your own app: Where do users drop off or get stuck?
Identify signals you’re already tracking — like clicks, scrolls, or time on page.
Experiment with small adaptations, measure their impact, and iterate.

DEV Community: Tom Yahav

Claude Code Is Burning Your Tokens — And That's a Symptom, Not the Problem

The Complaints Are Consistent (and Legit)

The "Vibe Coding" Trap

The Hard Truth

Reclaim the Keyboard

Final Thought

I Built a One-Command Tool to Migrate Your Entire Cursor Setup to VS Code

The Problem Nobody Talks About

⚡ The Fix: One Command

🔀 What Gets Migrated

🖥️ What It Looks Like in Your Terminal

🔧 One Step Before You Run It

🔒 It's Safe to Run

🧠 One Interesting Challenge: The Settings File

📦 Get It

I Built a Memory Layer for Claude Code — It Saves Me Hours Every Week

The Problem That Costs You More Than You Think

The Fix: Give Claude a Memory

Setup: 30 Seconds

What It Actually Does

Smart Features That Keep It Clean

Automatic Deduplication

Confidence Decay

CLAUDE.md Sync

The Compounding Effect

What It Doesn't Do

A Full Dashboard — Not Just a CLI

Monorepo? One Command.

Real Query Examples

Tech Stack

Get Started

I Built a Local Analytics Dashboard for Claude Code — Here's What I Learned About My AI Coding Habits

The Problem

What It Does

Overview Dashboard

Session Browser

Live Monitor

Cost Analytics

AI Insights — A Linter for Your AI Usage

Tools & Skills Analytics

Interactive Agent

Security: Not a Feature — An Architecture

Network Guard

PII Detection

Everything Else

Tech Stack

Quick Start

npx (no install)

Global install

From source

What I Learned About My Own Habits

Contributing

yahav10 / claude-code-dashboard

Local-first analytics dashboard for Claude Code usage. Zero telemetry. Zero outbound connections.

📊 Claude Code Dashboard

⚡ Quick Start

✨ Features

I Built a CLI That Turns Claude Code's /insights Report Into Actionable Skills, Rules, and Workflows

The Problem: /insights Gives You a Report, Then What?

What claude-insights Does

The Pipeline: Parse, Analyze, Generate

1. Parse

2. Analyze

3. Generate

What the Generated Skills Look Like

The CLAUDE.md Rules: Categorized and Annotated

The Prioritized To-Do List

Architecture

How It Compares to Existing Tools

Getting Started

Install globally

Or run directly with npx

With a specific output directory

Then follow the generated to-do list

Links

- License: MIT

Closures Explained in minutes (🎒 Backpack Analogy)

Closures

🎒 Think of a Function as a Person with a Backpack

Fix #1: Use `let` instead of `var`