DEV Community: Ramu Narasinga

Here is how you can render HTML-based videos using AI coding agent.

Ramu Narasinga — Thu, 21 May 2026 15:30:00 +0000

In this article, we review HyperFrames. You will learn:

What is HyperFrames?
HyperFrames vs Remotion

What is HyperFrames?

Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions - with first-class support for AI agents.

Getting Started

You want to install the HyperFrames skills:

npx skills add heygen-com/hyperframes

and then, define your prompt. Below is an example prompt:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.

Hyperframes also provides to create a project manually.

npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser (live reload)
npx hyperframes render # render to MP4

I highly recommend reading the HyperFrames README..

HyperFrames vs Remotion

Hyperframes is inspired by Remotion.- we used Remotion at HeyGen in production, learned a ton from it, and kept attribution comments in the source for the patterns it pioneered (Chrome launch flags, image2pipe → FFmpeg streaming, frame buffering). Both tools drive headless Chrome and both are deterministic. They differ on one decision: what the primary author writes. Remotion's bet is React components; Hyperframes' bet is HTML.

I copied this info from the README.

Remotion.also has a feature -Prompt a video.

I also did write an article about how Remotion uses Degit to download template..

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

attw script in CopilotKit codebase.

Ramu Narasinga — Thu, 14 May 2026 15:30:00 +0000

In this article, we review attw script in CopilotKit codebase. You will learn:

What is attw?
attw script in CopilotKit

What is attw?

attw is a CLI for arethetypeswrong.github.io..This project attempts to analyze npm package contents for issues with their TypeScript types, particularly ESM-related module resolution issues. The following kinds of problems can be detected in the node10, node16, and bundler module resolution modes:

💀 Resolution failed.

❌ No types.

🎭 Masquerading as CJS.

👺 Masquerading as ESM.

⚠️ ESM (dynamic import only).

🐛 Used fallback condition.

🤨 CJS default export.

❗️ Incorrect default export.

❓ Missing export =.

🚭 Unexpected module syntax.

🥴 Internal resolution error.

🕵️‍♂️ Named exports.

Below is a check I ran on my npm package, thinkthroo and these were the issues found

attw script in CopilotKit

Since now that we understand what attw does, let’s review how CopilotKit uses this in the package.json script.

I the CopilotKit/packages/agentcore-runner/package.json,. you will find the below code nsippet:

"scripts": {
    ...
    "attw": "attw --pack . --profile node16"
  },

This has two arguments/options/flags passed.

pack

Specify a directory to run npm pack in (instead of specifying a tarball filename), analyze the resulting tarball, and delete it afterwards.

attw --pack .

profile

Profiles select a set of resolution modes to require/ignore. All are evaluated but failures outside of those required are ignored.

The available profiles are:

strict - requires all resolutions
node16 - ignores node10 resolution failures
esm-only - ignores CJS resolution failures

In the CLI: --profile

The script in CopilotKit ignores the node10 resolution failures.

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

Publint usage in CopilotKit codebase.

Ramu Narasinga — Tue, 12 May 2026 15:30:00 +0000

In this article, we review Publint package. You will learn:

What is Publint?
Publint script in CopilotKit codebase.

What is Publint?

publint lints npm packages to ensure the widest compatibility across environments, such as Vite, Webpack, Rollup, Node.js, etc.

How it works?

Given an npm package, the site downloads the tarball and runs publint against it in a web worker. For larger packages, it may take a while to download and lint.

Below are Publint examples, demonstrating how Publint works. This is applied on the Semver package.

Publint script in CopilotKit codebase.

I found the Publint script in the copilotkit/packages/agentcore-runner/package.json.

 "scripts": {
    ...
    "publint": "publint .",
    ...
  },

This script runs publint against the current package, agentcore-runner.

Below is a comment I found above the AgentCoreRunner.

/**
 * AgentCore stores conversation history server-side via AgentCoreMemorySaver /
 * AgentCoreMemorySessionManager. When CopilotKit reconnects to an existing
 * thread (e.g. page refresh), two issues arise that this runner fixes:
 *
 * 1. Unknown threads — CopilotKit may call `connect()` for a thread that has
 *    never had a `run()` (first load). The base runner would error; we emit an
 *    empty snapshot instead so the UI initialises cleanly.
 * 2. Missing tool-call results — AgentCore's replayed history contains assistant
 *    messages with tool calls but no corresponding TOOL_CALL_RESULT events.
 *    CopilotKit needs those to reconcile its message state, so we synthesise
 *    empty results for each past tool call before the snapshot.
 */

Below is another example of Publint on uuid

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

Error handling in Twenty codebase — part 1.1

Ramu Narasinga — Fri, 08 May 2026 15:30:00 +0000

Inspired by BulletProof React,.
I applied its codebase architecture concepts to thestructured, Twenty codebase..

This article focuses only on the error handling strategies used in Twenty codebase..

Approach

In part 1.0, I mentioned that Bulletproof React mentions three ways of error handling:

API errors
In app errors
Error tracking

In this article, I want to provide examples and references to how Twenty handled in-app errors. The approach we take is simple:

Pick onSubmit method in CreateProfile.tsx file..
Review how the error is handled.

In this part 1.0, we review the onSubmit method in CreateProfile.tsx file..

CreateProfile.tsx

CreateProfile modal is rendered during the onboarding on the twenty.com. platform, we will review the onSubmit method:

const onSubmit: SubmitHandler<Form> = useCallback(
    async (data) => {
      try {
        if (!currentWorkspaceMember?.id) {
          throw new Error('User is not logged in');
        }
        if (!data.firstName || !data.lastName) {
          throw new Error('First name or last name is missing');
        }

        await updateWorkspaceMemberSettings({
          ...
        });

        setCurrentWorkspaceMembers((members) =>
          ...
        );

        setCurrentUser((current) => {
          ...
        });

        setNextOnboardingStatus();
      } catch (error: any) {
        enqueueErrorSnackBar({
          apolloError: CombinedGraphQLErrors.is(error) ? error : undefined,
        });
      }
    },
    [
      ...
    ],
  );

This function is wrapped in a try/catch block and the error in the catch block is used in the enqueuErrorSnackBar. What’s this function for? let’s find out.

enqueueErrorSnackBar

enqueueErrorSnackBar is defined as shown below:

import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
...
const { enqueueErrorSnackBar } = useSnackBar();

useSnackBar is defined in feedback/snack-bar-manager/hooks/useSnackBar.ts. and it returns the following functions:

return {
    handleSnackBarClose,
    enqueueSuccessSnackBar,
    enqueueErrorSnackBar,
    enqueueInfoSnackBar,
    enqueueWarningSnackBar,
};

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

Custom agents in Microsoft/skills codebase.

Ramu Narasinga — Thu, 07 May 2026 15:30:00 +0000

In this article, we review custom agents in Microsoft/skills repository. You will learn:

What are custom agents?
github/agents in Microsoft skills repo.

What are custom agents?

Custom agents enable you to configure the AI to adopt different personas tailored to specific development roles and tasks. For example, you might create agents for a security reviewer, planner, solution architect, or other specialized roles. Each persona can have its own behavior, available tools, and instructions.

You can also use handoffs to create guided workflows between agents. Transition seamlessly from one specialized agent to another with a single select. For example, move from a planning agent directly into an implementation agent, or hand off to a code reviewer with the relevant context.

I picked the above info from the Custom Agents VS Code docs.. Learn more about how you can
Create Custom agents..

Below is a planning agent example provided in the docs:

---
description: "Generate an implementation plan for new features or refactoring existing code."
name: Planner
tools: ['web/fetch', 'search/codebase', 'search/usages']
model: ['Claude Opus 4.5', 'GPT-5.2']  # Tries models in order
handoffs:
  - label: Implement Plan
    agent: agent
    prompt: Implement the plan outlined above.
    send: false
---
### Planning instructions
You are in planning mode. Your task is to generate an implementation plan for a new feature or for refactoring existing code.
Don't make any code edits, just generate a plan.

The plan consists of a Markdown document that describes the implementation plan, including the following sections:

* Overview: A brief description of the feature or refactoring task.
* Requirements: A list of requirements for the feature or refactoring task.
* Implementation Steps: A detailed list of steps to implement the feature or refactoring task.
* Testing: A list of tests that need to be implemented to verify the feature or refactoring task.

There is a section about how the custom agent file should be structured, Check it out.

I wanted to provide references to custom agents in the OSS repos and I found Microsoft/skills.

Microsoft/skills

Skills repo in Microsoft org provides Skills, MCP servers, Custom Agents, Agents.md for SDKs to ground Coding Agents.

.github/agents in Microsoft skills repo.

I found the following agents defined in the Microsoft/skills repo..

backend.agent.md
frontend.agent.md
infrastructure.agent.md
planner.agent.md
presenter.agent.md
scaffolder.agent.md

frontend.agent.md

In the frontend.agent.md,. below is the structure defined:

---
name: Frontend Developer
description: React/TypeScript specialist for CoreAI DIY frontend development with React Flow, Zustand, and Tailwind CSS
tools: ["read", "edit", "search", "execute"]
---

And has the above table of contents.

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

Here is how the Github bot is built in Background Agents codebase.

Ramu Narasinga — Tue, 05 May 2026 15:30:00 +0000

In this article, we review the Github bot in Background Agents codebase. You will learn:

What is Background Agents?
What is this Github bot?

What is Background Agents?

Background Agents is an open-source background agents coding system.

Features

Let your whole team ship code. Not just engineers.
Anyone can start. No configuration required.
Requests become PRs, not backlogs
Scale your team without scaling headcount
Meet agents where you work
Every session is collaborative

Learn more about Background Agents..

What is a Github bot?

In the Background Agents codebase, there is a coding agent that uses this Github bot. You will find the below comment in the background-agents/packages/github-bot/src/index.ts.

/**
 * Open-Inspect GitHub Bot Worker
 *
 * Cloudflare Worker that handles GitHub webhook events and provides
 * automated code review and comment-triggered actions via the coding agent.
 */

So this Github bot does the code review and handles actions triggered via comments on the PR.
In this dispatch handler function, you can see the cases handled:

function dispatchHandler(
  env: Env,
  log: Logger,
  event: string | undefined,
  p: Record<string, unknown>,
  payload: unknown,
  traceId: string
): Promise<HandlerResult> {
  switch (event) {
    case "pull_request":
      if (p.action === "opened") {
        return handlePullRequestOpened(env, log, payload as PullRequestOpenedPayload, traceId);
      }
      if (p.action === "review_requested") {
        return handleReviewRequested(env, log, payload as ReviewRequestedPayload, traceId);
      }
      return Promise.resolve({
        outcome: "skipped",
        skip_reason: "unsupported_action",
      });
    case "issue_comment":
      if (p.action === "created") {
        return handleIssueComment(env, log, payload as IssueCommentPayload, traceId);
      }
      return Promise.resolve({
        outcome: "skipped",
        skip_reason: "unsupported_action",
      });
    case "pull_request_review_comment":
      if (p.action === "created") {
        return handleReviewComment(env, log, payload as ReviewCommentPayload, traceId);
      }
      return Promise.resolve({
        outcome: "skipped",
        skip_reason: "unsupported_action",
      });
    default:
      return Promise.resolve({
        outcome: "skipped",
        skip_reason: "unsupported_event",
      });
  }
}

How is Github bot built?

Background agents use Cloudflare Worker to handle GitHub webhook events.

It has these 2 endpoints defined:

app.get("/health", (c) => c.json({ status: "healthy", service: "open-inspect-github-bot" }));

app.post("/webhooks/github", async (c) => {

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

Get started for free - thinkthroo.com.

References:

util.promisify in Roo-Code codebase.

Ramu Narasinga — Thu, 30 Apr 2026 16:00:00 +0000

In this article, we review promisify method. You will learn:

What is util.promisify?
What is Roo-Code?
Usage example.

What is util.promisify?

Util is a NodeJS API. It has a lot of method defined. Check the util page. We are interested in promisify.

Promisify

Promisify takes a function following the common error-first callback style, i.e. taking an (err, value) => ... callback as the last argument, and returns a version that returns promises.

Below is an example picked from the docs:

import { promisify } from 'node:util';
import { stat } from 'node:fs';

const promisifiedStat = promisify(stat);
promisifiedStat('.').then((stats) => {
  // Do something with `stats`
}).catch((error) => {
  // Handle the error.
});

Learn more about promisify.

What is Roo-Code?

Roo Code gives you a whole dev team of AI agents in your code editor.

What Can Roo Code Do For YOU?

Generate Code from natural language descriptions and specs
Adapt with Modes: Code, Architect, Ask, Debug, and Custom Modes
Refactor & Debug existing code
Write & Update documentation
Answer Questions about your codebase
Automate repetitive tasks
Utilize MCP Servers

Modes

Roo Code adapts to how you work:

Code Mode: everyday coding, edits, and file ops
Architect Mode: plan systems, specs, and migrations
Ask Mode: fast answers, explanations, and docs
Debug Mode: trace issues, add logs, isolate root causes
Custom Modes: build specialized modes for your team or workflow

Learn more about Roo-Code.

Usage example

In the Roo-Code codebase, there is a file, worktree-service.ts. It has promisify imported as shown below, at the top of the file:

import { promisify } from "util"

How is this used? Roo-Code is making two methods return as a promise as shown below:

import { exec, execFile } from "child_process"
import { promisify } from "util"
...
const execAsync = promisify(exec)
const execFileAsync = promisify(execFile)

and then this promisified functions are used in the WorktreeService class as shown below:

/**
 * Service for managing git worktrees.
 * All methods are platform-agnostic and don't depend on VSCode APIs.
 */
export class WorktreeService {
 /**
  * Check if git is installed on the system
  */
 async checkGitInstalled(): Promise<boolean> {
  try {
   await execAsync("git --version")
   return true
  } catch {
   return false
  }
 }
...

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

References:

Mediabunny, complete media toolkit.

Ramu Narasinga — Thu, 30 Apr 2026 15:30:00 +0000

In this article, we review Mediabunny. You will learn:

What is Mediabunny?
Mediabunny usage in Supersplat

What is Mediabunny?

Mediabunny is a JavaScript library for reading, writing, and converting video and audio files. Directly in the browser, and faster than anybunny else.

Read any media file

Mediabunny allows you efficiently read data from any video or audio file, no matter the size: duration, resolution, rotation, tracks, codecs and other metadata, as well as raw or decoded media data from anywhere in the file. Load only what you need.

const input = new Input({
  source: new UrlSource('./bigbuckbunny.mp4'),
  formats: ALL_FORMATS, // .mp4, .webm, .wav, ...
});

const duration = await input.computeDuration();

const videoTrack = await input.getPrimaryVideoTrack();
const { displayWidth, displayHeight, rotation } = videoTrack;

const audioTrack = await input.getPrimaryAudioTrack();
const { sampleRate, numberOfChannels } = audioTrack;

// Get the frame halfway through the video
const sink = new VideoSampleSink(videoTrack);
const frame = await sink.getSample(duration / 2);

// Loop over all frames of the video
for await (const frame of sink.samples()) {
  // ...
}

Learn more about Mediabunny.

Mediabunny usage in supersplat.

I found Mediabunny being imported in supersplat/src/render.ts.

import { 
  BufferTarget, 
  EncodedPacket, 
  EncodedVideoPacketSource, 
  MkvOutputFormat, 
  MovOutputFormat, 
  Mp4OutputFormat, 
  Output, 
  StreamTarget, 
  WebMOutputFormat 
} from 'mediabunny';

You might be wondering what Supersplat is. Well, remember how I pick a trending repo every week and share the patterns and packages used? Yeah, Superslat is listed as one of the trending repos.

Superslat is a 3D Gaussian Splat Editor.

superslat/render.ts has registerRenderEvents defined for the following events:

render.video
render.image
render.offscreen

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns..

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com.

References:

Error handling in Twenty codebase - part 1.0

Ramu Narasinga — Thu, 23 Apr 2026 15:30:00 +0000

Inspired by BulletProof React, I applied its codebase architecture concepts to the Umami codebase.

You might be wondering:

What is Twenty?
What is error handling?

Let’s find out.

What is Twenty?

Twenty is an open-source CRM that gives you the building blocks to create exactly what your business needs.

Main Features

Calendar & Emails: Sync your mailbox and calendar to see all communications on your CRM records. Learn more.
Data Model: Create custom objects and fields to match your unique business processes. Explore.
Data Migration: Import and export your data via CSV or API. Get started.
Views & Pipelines: Organize your data with table views, kanban boards, and sales pipelines. Discover.
Workflows: Automate your business processes and integrate with external tools. Build automations.
AI: Enhance your CRM with AI-powered features and agents. Explore AI.
Dashboards: Track performance with custom reports and visualizations. View dashboards.
Permissions & Access: Control who can view, edit, and manage your data with role-based permissions. Configure access.
Notes & Tasks: Create notes and tasks linked to your records for better collaboration.
API & Webhooks: Connect to other apps and build custom integrations. Start integrating.

I copied the above info from the Twenty documentation.

What is error handling?

If you take a look at Bulletproof React’s Error Handling guide, you will find the following sections:

We will find out how Twenty has implemented these error handlers in the next articles.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References:

MerkleDAG class in claude-context codebase.

Ramu Narasinga — Wed, 22 Apr 2026 15:30:00 +0000

In this article, we review MerkleDAG class. You will learn:

What is MerkleDAG?
MerkleDAG class in claude-context

Press enter or click to view image in full size

What is MerkleDAG?

A Merkle DAG is a DAG where each node has an identifier, and this is the result of hashing the node’s contents — any opaque payload carried by the node and the list of identifiers of its children — using a cryptographic hash function like SHA256. This brings some important considerations:

Merkle DAGs can only be constructed from the leaves, that is, from nodes without children. Parents are added after children because the children’s identifiers must be computed in advance to be able to link them.
Every node in a Merkle DAG is the root of a (sub)Merkle DAG itself, and this subgraph is contained in the parent DAG.
Merkle DAG nodes are immutable. Any change in a node would alter its identifier and thus affect all the ascendants in the DAG, essentially creating a different DAG.

DAG stands for Directed Acyclic Graphs.

Learn more about MerkleDAG.

MerkleDAG class in claude-context

MerkleDAG class in claude-context has the functions defined shown in the below image:

and has this declaration:

export class MerkleDAG {
    nodes: Map<string, MerkleDAGNode>;
    rootIds: string[];

But the real important question here is, where is this used? one of the applications of MerkleDAG is Git itself.

In the claude-context codebase, I saw the below reference to MerkleDAG in the README.

⚡ Incremental Indexing: Efficiently re-index only changed files using Merkle trees.

This MerkleDAG is instantiated in synchronizer.ts:

private buildMerkleDAG(fileHashes: Map<string, string>): MerkleDAG {
        const dag = new MerkleDAG();
        const keys = Array.from(fileHashes.keys());
        const sortedPaths = keys.slice().sort(); // Create a sorted copy

this buildMerkleDAG is called in checkForChanges method, this method name is aligned with what is mentioned in the README.

public async checkForChanges(): Promise<{ added: string[], removed: string[], modified: string[] }> {
    console.log('[Synchronizer] Checking for file changes...');

    const newFileHashes = await this.generateFileHashes(this.rootDir);
    const newMerkleDAG = this.buildMerkleDAG(newFileHashes);

    // Compare the DAGs
    const changes = MerkleDAG.compare(this.merkleDAG, newMerkleDAG);

    // If there are any changes in the DAG, we should also do a file-level comparison
    if (changes.added.length > 0 || changes.removed.length > 0 || changes.modified.length > 0) {
        console.log('[Synchronizer] Merkle DAG has changed. Comparing file states...');
        const fileChanges = this.compareStates(this.fileHashes, newFileHashes);

        this.fileHashes = newFileHashes;
        this.merkleDAG = newMerkleDAG;
        await this.saveSnapshot();

        console.log(`[Synchronizer] Found changes: ${fileChanges.added.length} added, ${fileChanges.removed.length} removed, ${fileChanges.modified.length} modified.`);
        return fileChanges;
    }

    console.log('[Synchronizer] No changes detected based on Merkle DAG comparison.');
    return { added: [], removed: [], modified: [] };
}

and this checkForChanges is called in core/context.ts

and this reindexByChange is invoked in syncCommand.ts, in VSCode extension.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

AstCodeSplitter in claude-context codebase.

Ramu Narasinga — Mon, 20 Apr 2026 15:30:00 +0000

In this article, we review AstCodeSplitter class in claude-context codebase. You will learn:

What is Claude Context?
AstCodeSplitter class.
tree-sitter package.

What is Claude Context?

Claude Context is an MCP plugin that adds semantic code search to Claude Code and other AI coding agents, giving them deep context from your entire codebase.

🧠 Your Entire Codebase as Context: Claude Context uses semantic search to find all relevant code from millions of lines. No multi-round discovery needed. It brings results straight into the Claude’s context.

💰 Cost-Effective for Large Codebases: Instead of loading entire directories into Claude for every request, which can be very expensive, Claude Context efficiently stores your codebase in a vector database and only uses related code in context to keep your costs manageable.

Architecture

Below is the architecture from README.md.

I wanted to learn how the re-indexing is done, I found this in the README.

⚡ Incremental Indexing: Efficiently re-index only changed files using Merkle trees.

Learn more about Claude Context.

AstCodeSplitter class

AstCodeSplitter implements Splitter interface.

export class AstCodeSplitter implements Splitter {

and this interface is defined as shown below:

export interface Splitter {
    /**
     * Split code into code chunks
     * @param code Code content
     * @param language Programming language
     * @param filePath File path
     * @returns Array of code chunks
     */
    split(code: string, language: string, filePath?: string): Promise<CodeChunk[]>;

    /**
     * Set chunk size
     * @param chunkSize Chunk size
     */
    setChunkSize(chunkSize: number): void;

    /**
     * Set chunk overlap size
     * @param chunkOverlap Chunk overlap size
     */
    setChunkOverlap(chunkOverlap: number): void;
}

You will find these three functions defined in the AstSplitter class.

It also has the below private defined that are used in the interface methods implemented.

tree-sitter package

extractChunks function has its first parameter type as Parser.SyntaxNode. Parser is imported as shown below:

import Parser from 'tree-sitter';

So what’s tree-sitter? I read this npm package description and found this below example:

const Parser = require('tree-sitter');
const JavaScript = require('tree-sitter-javascript');

const parser = new Parser();
parser.setLanguage(JavaScript);

// parse some code:
const sourceCode = 'let x = 1; console.log(x);';
const tree = parser.parse(sourceCode);

// and inspect the syntax tree.

console.log(tree.rootNode.toString());

// (program
//   (lexical_declaration
//     (variable_declarator (identifier) (number)))
//   (expression_statement
//     (call_expression
//       (member_expression (identifier) (property_identifier))
//       (arguments (identifier)))))

const callExpression = tree.rootNode.child(1).firstChild;
console.log(callExpression);

// {
//   type: 'call_expression',
//   startPosition: {row: 0, column: 16},
//   endPosition: {row: 0, column: 30},
//   startIndex: 0,
//   endIndex: 30
// }

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

andrej-karpathy-skills, A single CLAUDE.md file to improve Claude Code behavior.

Ramu Narasinga — Thu, 16 Apr 2026 15:30:00 +0000

In this article, we review the repo, andrej-karpath-skills. You will learn:

Karpathy inspired claude code guidelines
Four principles

Karpathy inspired claude code guidelines

I found this repo on Github Trending and skimmed thru the repo to find these Karpathy inspired claude code guidelines. I read thru its README.md:

A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.

The problems

Listed below is the problems mentioned in the README. These problems were from Andrej’s post:

“The models make wrong assumptions on your behalf and just run along with them without checking. They don’t manage their confusion, don’t seek clarifications, don’t surface inconsistencies, don’t present tradeoffs, don’t push back when they should.”

“They really like to overcomplicate code and APIs, bloat abstractions, don’t clean up dead code… implement a bloated construction over 1000 lines when 100 would do.”

“They still sometimes change/remove comments and code they don’t sufficiently understand as side effects, even if orthogonal to the task.”

I mean, I have personally faced these problems when writing code using AI. You say something and then interprets something else. While testing you realize the output is wrong and restart all over again.

There are four principles that address these problems.

Four principles

These four principles address the issues that were mentioned in Andrej’s post:

Think Before Coding
Simplicity First
Surgical Changes
Goal-Driven Execution

Learn more about these principles.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com