Forem: Ramu Narasinga

skills folder in Langfuse codebase.

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

In this article, we review skills folder in Langsude codebase. You will learn:

vercel-react-best-practices
vercel-composition-patterns

Skills

I review skills in the OSS codebases to identify the best practices that go into defining the skills that are used in a codebase. When I write about skills, I tend to keep it to the meta and overview of the sections defined.

vercel-react-best-practices

This skill is defined in web/.agents/skills folder and it has the following metadata:

---
name: vercel-react-best-practices
description: "React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements."
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

The description defined the following things:

When this skill should be used:

should be used when writing, reviewing, or refactoring React/Next.js code

2. When this skill should be triggered:

Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements

Usually, you can expect the rest of skills document elaborating on description in metadata.

There’s also rules folder where it has

rules/async-parallel.md
rules/bundle-barrel-imports.md

vercel-composition-patterns

This skill is defined in web/.agents/skills and it has the following metadata:

---
name: vercel-composition-patterns
description:
  React composition patterns that scale. Use when refactoring components with
  boolean prop proliferation, building flexible component libraries, or
  designing reusable APIs. Triggers on tasks involving compound components,
  render props, context providers, or component architecture. Includes React 19
  API changes.
license: MIT
metadata:
  author: vercel
  version: '1.0.0'
---

The description defined the following things:

When this skill should be used?

Use when refactoring components with boolean prop proliferation, etc., or
Building flexible component libraries or
Designing reusable APIs.

2. When this skill should be triggered?

Triggers on tasks involving compound components etc.,

Usually, you can expect the rest of skills document elaborating on description in metadata.

This skill also has rules folder:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

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

State management in Twenty codebase - Part 1.2

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

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

This article focuses only on the state management in Twenty codebase.

Why learn this pattern?

Let’s be honest, your useState code is probably a mess. Mine was too.

Look, we’ve all written this:

const [websites, setWebsites] = useState([]);

const addWebsite = async (data) => {
  const newWebsite = await api.post('/websites', data);
  setWebsites([...websites, newWebsite]); 
};

We all start the same way, useState for everything. Throw in Context API when passing props gets annoying. Works fine until your app grows.

Then you’re debugging why:

Your app is slow because state is everywhere
The UI shows old data after mutations
Clicking fast causes weird race conditions
You have to manually refresh data in 10 places

Production apps like Twenty don’t have these problems because they use different patterns.

Let me show you what I learned from studying their code.

Prerequisite

State management in Twenty codebase — Part 1.0
State management in Twenty codebase — Part 1.1

Approach

The approach we take is simple:

Pick a route, for example, {id}.twenty.com/settings/billing
Locate this route in Twenty codebase.
Review how the state is managed.
We repeat this process for 3+ pages to establish a common pattern, see if there’s any exceptions.

In this part 1.2, you will learn about the state management in the settings/billing route for a workspace. We will find out what libraries Twenty used, how the files are structured, how the data flows to manage its state.

I reviewed the billing route and I found that the following components give us a clear picture about the state management.

SettingsBilling.tsx

In this SettingsBilling.tsx component, currentWorkspace and isPlanLoaded are defined as shown below:

const currentWorkspace = useAtomStateValue(currentWorkspaceState);

const { isPlansLoaded } = usePlans();

Twenty uses Jotai to manage its state. Learn more about Jotai. We also reviewed this useAtomStateValue briefly in part 1.1.

If there is current workspace and isPlansLoaded, then SettingsBillingContent is shown

{currentWorkspace && isPlansLoaded ? <SettingsBillingContent /> : <></>}

usePlans.ts

import { useQuery } from '@apollo/client/react';
import { ListPlansDocument } from '~/generated-metadata/graphql';
import { isDefined } from 'twenty-shared/utils';

export const usePlans = () => {
  const { data, loading, error } = useQuery(ListPlansDocument);

  const isPlansLoaded = isDefined(data?.listPlans);

  const listPlans = () => {
    if (!data) throw new Error('plans is undefined');
    return data.listPlans;
  };

  return { loading, error, isPlansLoaded, listPlans };
};

usePlans.ts is a hook that fetches the plans and it returns the isPlansLoaded.

SettingsBillingContent.tsx

In the SettingsBillingContent.tsx, the following are defined:

SettingsBillingSubscriptionInfo
SettingsBillingCreditsSection

and there’s also other components defined using primitive components H2, Button so I did not list them here and we consider only above two for review.

SettingsBillingSubscriptionInfo

This above shown screenshot is from the Twenty billing, this component SettingsBillingSubscriptionInfo renders this info.

It has the following props:

<SettingsBillingSubscriptionInfo
  currentWorkspace={currentWorkspace}
  currentBillingSubscription={
    currentWorkspace.currentBillingSubscription
  }
/>

And this currentWorkspace is defined as follows:

const currentWorkspace = useAtomStateValue(currentWorkspaceState);

SettingsBillingCreditsSection

SettingsBillingCreditsSection is defined as shown below:

{hasNotCanceledCurrentSubscription &&
  currentWorkspace &&
  currentWorkspace.currentBillingSubscription &&
  isGetMeteredProductsUsageQueryLoaded && (
  <SettingsBillingCreditsSection
    currentBillingSubscription={
      currentWorkspace.currentBillingSubscription
    }
  />
)}

isGetMeteredProductsUsageQueryLoaded is defined as shown below:

const { isGetMeteredProductsUsageQueryLoaded } =
    useGetWorkflowNodeExecutionUsage();

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

TypeBox, a JSON schema type builder

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

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

What is TypeBox?
TypeBox usage in pi-mono codebase

What is TypeBox?

TypeBox is a JSON schema type builder with static type resolution for TypeScript. Below is an usage example:

import Type from 'typebox'

const T = Type.Object({                     // const T = {
  x: Type.Number(),                         //   type: 'object',
  y: Type.Number(),                         //   properties: {
  z: Type.Number()                          //     x: { type: 'number' },
})                                          //     y: { type: 'number' },
                                            //     z: { type: 'number' }
                                            //   },
                                            //   required: ['x', 'y', 'z']
                                            // }

type T = Type.Static<typeof T>              // type T = {
                                            //   x: number,
                                            //   y: number,
                                            //   z: number
                                            // }

TypeBox is a runtime type system that creates in-memory JSON Schema objects that infer as TypeScript types. The schematics produced by this library are designed to match the static type checking rules of the TypeScript compiler. TypeBox offers a unified type system that can be statically checked by TypeScript and validated at runtime using standard JSON Schema.

This library is designed to allow JSON Schema to compose similar to how types compose within TypeScript’s type system. It can be used as a simple tool to build up complex schematics or integrated into REST and RPC services to help validate data received over the wire.

Learn more about TypeBox.

TypeBox usage in pi-mono codebase

I found TypeBox references in pi-mono codebase. pi-mono is an AI agent toolkit providing coding agent CLI, unified LLM API, TUI & web UI libraries, Slack bot, vLLM pods

agent/types

In the agent/types.ts, I found some references:

...
import type { Static, TSchema } from "@sinclair/typebox";
...
/** Tool definition used by the agent runtime. */
export interface AgentTool<TParameters extends TSchema = TSchema, TDetails = any> extends Tool<TParameters> {
 /** Human-readable label for UI display. */
 label: string;
 /**
  * Optional compatibility shim for raw tool-call arguments before schema validation.
  * Must return an object that matches `TParameters`.
  */
 prepareArguments?: (args: unknown) => Static<TParameters>;
 /** Execute the tool call. Throw on failure instead of encoding errors in `content`. */
 execute: (
  toolCallId: string,
  params: Static<TParameters>,
  signal?: AbortSignal,
  onUpdate?: AgentToolUpdateCallback<TDetails>,
 ) => Promise<AgentToolResult<TDetails>>;
}

coding-agent/core/extensions/types.ts

/**
 * Tool definition for registerTool().
 */
export interface ToolDefinition<TParams extends TSchema = TSchema, TDetails = unknown, TState = any> {
 /** Tool name (used in LLM tool calls) */
 name: string;
 /** Human-readable label for UI */
 label: string;
 /** Description for LLM */
 description: string;
 /** Optional one-line snippet for the Available tools section in the default system prompt. Custom tools are omitted from that section when this is not provided. */
 promptSnippet?: string;
 /** Optional guideline bullets appended to the default system prompt Guidelines section when this tool is active. */
 promptGuidelines?: string[];
 /** Parameter schema (TypeBox) */
 parameters: TParams;

 /** Optional compatibility shim to prepare raw tool call arguments before schema validation. Must return an object conforming to TParams. */
 prepareArguments?: (args: unknown) => Static<TParams>;

 /** Execute the tool. */
 execute(
  toolCallId: string,
  params: Static<TParams>,
  signal: AbortSignal | undefined,
  onUpdate: AgentToolUpdateCallback<TDetails> | undefined,
  ctx: ExtensionContext,
 ): Promise<AgentToolResult<TDetails>>;

 /** Custom rendering for tool call display */
 renderCall?: (args: Static<TParams>, theme: Theme, context: ToolRenderContext<TState, Static<TParams>>) => Component;

 /** Custom rendering for tool result display */
 renderResult?: (
  result: AgentToolResult<TDetails>,
  options: ToolRenderResultOptions,
  theme: Theme,
  context: ToolRenderContext<TState, Static<TParams>>,
 ) => Component;
}

TSchema here is a generic type.

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

mom, a Slack bot powered by an LLM, in pi-mono codebase.

Ramu Narasinga — Tue, 07 Apr 2026 13:30:00 +0000

In this article, we review mom (Master Of Mischief). You will learn:

What is mom?
Features

What is mom?

A Slack bot powered by an LLM that can execute bash commands, read/write files, and interact with your development environment. Mom is self-managing. She installs her own tools, programs CLI tools (aka “skills”) she can use to help with your workflows and tasks, configures credentials, and maintains her workspace autonomously.

Features

Minimal by Design: Turn mom into whatever you need. She builds her own tools without pre-built assumptions
Self-Managing: Installs tools (apk, npm, etc.), writes scripts, configures credentials. Zero setup from you
Slack Integration: Responds to @mentions in channels and DMs
Full Bash Access: Execute any command, read/write files, automate workflows
Docker Sandbox: Isolate mom in a container (recommended for all use)
Persistent Workspace: All conversation history, files, and tools stored in one directory you control
Working Memory & Custom Tools: Mom remembers context across sessions and creates workflow-specific CLI tools (aka “skills”) for your tasks
Thread-Based Details: Clean main messages with verbose tool details in threads

Check out the slack app setup.

I also looked into its source code and found this below function that has core features:

function createSlackContext(event: SlackEvent, slack: SlackBot, state: ChannelState, isEvent?: boolean) {

  message: {
   text: event.text,
   rawText: event.text,
   user: event.user,
   userName: user?.userName,
   channel: event.channel,
   ts: event.ts,
   attachments: (event.attachments || []).map((a) => ({ local: a.local })),
  },
  channelName: slack.getChannel(event.channel)?.name,
  store: state.store,
  channels: slack.getAllChannels().map((c) => ({ id: c.id, name: c.name })),
  users: slack.getAllUsers().map((u) => ({ id: u.id, userName: u.userName, displayName: u.displayName })),

  respond: async (text: string, shouldLog = true) => {
   ...
  },

  replaceMessage: async (text: string) => {
   ...
  },

  respondInThread: async (text: string) => {
   ...
  },

  setTyping: async (isTyping: boolean) => {
   ...
  },

  uploadFile: async (filePath: string, title?: string) => {
   await slack.uploadFile(event.channel, filePath, title);
  },

  setWorking: async (working: boolean) => {
   ...
  },

  deleteMessage: async () => {
   ...
  },

}

This is in packages/mom/src/main.ts.

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

State management in Twenty codebase — Part 1.1

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

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

This article focuses only on the state management in Twenty codebase.

Prerequisite

State management in Twenty codebase — Part 1.0

Approach

The approach we take is simple:

Pick a route, for example, {id}.twenty.com/settings/profile
Locate this route in Twenty codebase.
Review how the state is managed.
We repeat this process for 3+ pages to establish a common pattern, see if there’s any exceptions.

In this part 1.1, you will learn about the state management in the settings/general route for a workspace. We will find out what libraries Twenty used, how the files are structured, how the data flows to manage its state.

I reviewed the settings/profile route, I found that the following components give us a clear picture about the state management.

Please note that there are other components in this SettingsProfile component that make up the below route, but we are analyzing 3 components in this route.

SettingsProfile

SettingsProfile.tsx has 98LOC and uses the following components to render the page.

WorkspaceMemberPictureUploader
NameFields
EmailField
SettingsCard
SetOrChangePassword
DeleteAccount

These are individual components that are rendered in this /profile page.

WorkspaceMemberPictureUploader

WorkspaceMemberPictureUploader.tsx has 144LOC. This handles picture upload for the workspace.

The following code handles uploading the file:

...
const [uploadPicture] = useMutation(
  UploadWorkspaceMemberProfilePictureDocument,
);

const { updateOneRecord } = useUpdateOneRecord();
...
const handleUpload = async (file: File) => {
    if (isUndefinedOrNull(file) || !canEdit) {
      return;
    }

    const controller = new AbortController();
    setUploadController(controller);
    setIsUploading(true);
    setErrorMessage(null);

    let newAvatarUrl: string | null = null;
    try {
      const { data } = await uploadPicture({
        variables: { file },
        context: {
          fetchOptions: {
            signal: controller.signal,
          },
        },
      });

      const signedFile = data?.uploadWorkspaceMemberProfilePicture;
      if (!isDefined(signedFile)) {
        throw new Error('Avatar upload failed');
      }

      await updateOneRecord({
        objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
        idToUpdate: workspaceMemberId,
        updateOneRecordInput: { avatarUrl: signedFile.url },
      });

      newAvatarUrl = signedFile.url;

      if (isEditingSelf && isDefined(currentWorkspaceMember)) {
        setCurrentWorkspaceMember({
          ...currentWorkspaceMember,
          avatarUrl: newAvatarUrl,
        });
      }

      if (isDefined(onAvatarUpdated)) {
        onAvatarUpdated(newAvatarUrl);
      }

      setUploadController(null);
      setErrorMessage(null);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : t`Failed to upload picture`;
      setErrorMessage(t`An error occurred while uploading the picture.`);
      enqueueErrorSnackBar({ message });
    } finally {
      setIsUploading(false);
    }
  };

Once the upload is complete, there’s a check if the file exists. So how is the state managed here?

const [currentWorkspaceMember, setCurrentWorkspaceMember] = useAtomState(
  currentWorkspaceMemberState,
);
...
newAvatarUrl = signedFile.url;

if (isEditingSelf && isDefined(currentWorkspaceMember)) {
  setCurrentWorkspaceMember({
    ...currentWorkspaceMember,
    avatarUrl: newAvatarUrl,
  });
}

When you use setCurrentWorkspaceMember, this state is also available in other parts of your codebase because Twenty uses Jotai to manage state and useAtomState is a hook defined in jotai/hooks/useAtomState.

NameFields

Let’s find out how the NameFields are updated. You will find the below code in NameFields.tsx

const [firstName, setFirstName] = useState(
    currentWorkspaceMember?.name?.firstName ?? '',
  );
  const [lastName, setLastName] = useState(
    currentWorkspaceMember?.name?.lastName ?? '',
  );

  const { updateOneRecord } = useUpdateOneRecord();

  // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
  const debouncedUpdate = useDebouncedCallback(async () => {
    try {
      if (!currentWorkspaceMember?.id) {
        throw new Error('User is not logged in');
      }

      if (autoSave) {
        await updateOneRecord({
          objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
          idToUpdate: currentWorkspaceMember?.id,
          updateOneRecordInput: {
            name: {
              firstName: firstName,
              lastName: lastName,
            },
          },
        });

        setCurrentWorkspaceMember({
          ...currentWorkspaceMember,
          name: {
            firstName,
            lastName,
          },
        });
      }
    } catch (error) {
      logError(error);
    }
  }, 500);

useUpdateOneRecord is commonly used here. There is a debounced update to the name fields, first and last names. The state is set again using the setCurrentWorkspaceMember defined as shown below:

const [currentWorkspaceMember, setCurrentWorkspaceMember] = useAtomState(
  currentWorkspaceMemberState,
);

This is a consistent pattern that can be reused in the other components within this route or in other settings related routes.

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

Web Worker for background JSON parsing in Langfuse codebase.

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

In this article, we review how Langfuse parses JSON using web workers in the background. You will learn:

What is Web Worker?
json-parser.worker.ts
useParsedTrace.ts

What is Web Worker?

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

A worker is an object created using a constructor (e.g., Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread.

Worker

The Worker interface of the Web Workers API represents a background task that can be created via script, which can send messages back to its creator.

Creating a worker is done by calling the Worker("path/to/worker/script") constructor.

Workers may themselves spawn new workers, as long as those workers are hosted at the same origin as the parent page.

Learn more about Web Worker.

json-parser.worker.ts

In the json-parser.worker.ts in Langfuse codebase, you will find this comment.

/**
 * Web Worker for background JSON parsing
*
* Parses large JSON data off the main thread using the iterative
* deepParseJsonIterative function to prevent UI blocking.
*/
import { deepParseJsonIterative } from "@langfuse/shared";
export interface ParseRequest {
id: string;
input: unknown;
output: unknown;
 metadata: unknown;
}
export interface ParseResponse {
  id: string;
  parsedInput: unknown;
  parsedOutput: unknown;
  parsedMetadata: unknown;
  parseTime: number;
}
self.onmessage = function (e: MessageEvent<ParseRequest>) {
  const { id, input, output, metadata } = e.data;

  const startTime = performance.now();
try {
    // Parse with high limits since we're off the main thread
    const parsedInput = deepParseJsonIterative(input, {
      maxDepth: Infinity,
      maxSize: 10_000_000, // 10MB
    });
const parsedOutput = deepParseJsonIterative(output, {
  maxDepth: Infinity,
  maxSize: 10_000_000,
});

const parsedMetadata = deepParseJsonIterative(metadata, {
  maxDepth: Infinity,
  maxSize: 10_000_000,
});
 const elapsed = performance.now() - startTime;

    const response: ParseResponse = {
      id,
      parsedInput,
      parsedOutput,
      parsedMetadata,
      parseTime: elapsed,
    };
  self.postMessage(response);
  } catch (error) {
    console.error("[json-parser.worker] Parse error:", error);
    // Send back unparsed data on error
    self.postMessage({
      id,
 parsedInput: input,
      parsedOutput: output,
      parsedMetadata: metadata,
      parseTime: performance.now() - startTime,
      error: error instanceof Error ? error.message : String(error),
    });
  }
};

Langfuse uses the web workers to parse large JSON. This deepParseJsonIterative function is imported as shown below:

import { deepParseJsonIterative } from "@langfuse/shared";

useParsedTrace.ts

When I searched for json-parse.worker. I found two instances:

In the useParsedTrace.ts, the following code is defined to create a worker

function getOrCreateWorker(): Worker | null {
  if (typeof window === "undefined" || !window.Worker) {
    return null; // SSR or no Worker support
  }

  if (!workerInstance) {
    try {
      // Next.js will bundle this as a separate chunk
      workerInstance = new Worker(
        new URL("@/src/workers/json-parser.worker.ts", import.meta.url),
      );
   workerInstance.onmessage = (e: MessageEvent<ParseResponse>) => {
        const callback = pendingCallbacks.get(e.data.id);
        if (callback) {
          callback(e.data);
          pendingCallbacks.delete(e.data.id);
        }
      };
 workerInstance.onerror = (error) => {
        console.error("[useParsedTrace] Worker error:", error);
      };
    } catch (error) {
      console.error("[useParsedTrace] Failed to create worker:", error);
      return null;
    }
  }

You will find that this is used in components/sessions/index.tsx

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

Create instant Docs and SDKs for your API using Fern.

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

In this article, we review Fern. You will learn the following:

What is Fern?
Fern usage in Langfuse codebase.

What is Fern?

Fern helps you create instant docs and sdks for your API. Start with an API spec. Generate SDKs in multiple languages and interactive API documentation tailored to your brand.

How SDK generation works?

Import your API spec
Select language and generate using the fern generate command
Add custom code, if you want
Publish packages

Check out the quick start guide.

Fern usage in Langfuse codebase.

I found the folder named fern in the Langfuse codebase and it led me to read more about Fern and write this article.

fern/fern.config.json

In the quick start guide, this is mentioned in the step 3 about this fern.config.json

This fern folder has the following structure:

All these three folder have the same file structure:

definition folder
generators.yml file

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

skills folder in DeepAgentsJS codebase.

Ramu Narasinga — Sat, 28 Mar 2026 15:30:00 +0000

In this article, we review skills folder in DeepAgents codebase. You will learn:

eval-creator
langsmith-trace

Skills

skills/eval-creator

The following is the meta info defined for the skills/eval-creator.

---
name: eval-writer
description: "Create new eval suites for the deepagentsjs monorepo. Handles dataset design, test case scaffolding, scoring logic, vitest configuration, and LangSmith integration. Use when the user asks to: (1) create an eval, (2) write an evaluation, (3) add a benchmark, (4) build an eval suite, (5) evaluate agent behaviour, (6) add test cases for a capability, or (7) implement an existing benchmark (e.g. oolong, AgentBench, SWE-bench). Trigger on phrases like 'create eval', 'new eval', 'add eval', 'benchmark', 'evaluate', 'eval suite', 'write evals for'."
---

I like this description. It lists out clearly when this skill should get triggered, depending on what user asks.

There is also Before you start section, that mentions what the Copilot should refer to, to understand existing patterns.

The following are the sections defined:

Understand the eval requirements
Create the eval package
Design test cases
Write scoring logic
Wire up the test file
Install and verify
Update documentation
Parity with Python deepagents evals
Reference: ls.test.each API
Reference: LangSmith integration

So I see that whatever is mentioned in the list about when this skill should triggered, is explained deeply with examples, code snippets etc.,

skills/langsmith-trace

The following is the meta info defined for the skills/langsmith-trace.

---
name: langsmith-trace
description: "INVOKE THIS SKILL when working with LangSmith tracing OR querying traces. Covers adding tracing to applications and querying/exporting trace data. Uses the langsmith CLI tool."
---

This one’s description is straight forward. This just defines when this skills is supposed to be triggered and what it covers and what it uses.

There is no table of content as such in this skill but this focuses mainly on:

Adding tracing
Querying traces

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:

State management in Twenty codebase — Part 1.0

Ramu Narasinga — Sat, 28 Mar 2026 15:00:00 +0000

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

You might be wondering:

What is Twenty?
What is state management?

Let’s find out.

Press enter or click to view image in full size

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 state management?

In the context of frontend development, state management is about how you manage your application’s state. Whether its component specific or application wide, you need to use a common pattern across your codebase to avoid issues like props drilling, lifting state up or worse, causing re-renders too many times.

You can manage a component’s state using hooks like useState that React provides. For the global state management, you want to use libraries like Zustand or server cache state strategy. In the OSS, I found these libraries (Zustand or server cache state strategy) used commonly to manage state.

In this series, you will learn how Twenty manages its state. We will find out what libraries Twenty uses, how the components and files are structured, how the data flows to manage its state, in the following pages:

{id}.twenty.com/settings/general
{id}.twenty.com/settings/billing

Fun fact: Only few pages are open source in the Twenty codebase. You can confirm this in the pages folder.

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

What is Agent Client Protocol?

Ramu Narasinga — Fri, 27 Mar 2026 14:30:00 +0000

In this article, we review what ACP is. You will learn:

What is Agent Client Protocol?
ACP in DeepAgents codebase.

Press enter or click to view image in full size

What is Agent Client Protocol?

The Agent Client Protocol (ACP) standardizes communication between code editors/IDEs and coding agents and is suitable for both local and remote scenarios.

Why ACP?

AI coding agents and editors are tightly coupled but interoperability isn’t the default. Each editor must build custom integrations for every agent they want to support, and agents must implement editor-specific APIs to reach users. This creates several problems:

Integration overhead: Every new agent-editor combination requires custom work
Limited compatibility: Agents work with only a subset of available editors
Developer lock-in: Choosing an agent often means accepting their available interfaces

ACP solves this by providing a standardized protocol for agent-editor communication, similar to how the Language Server Protocol (LSP) standardized language server integration.Agents that implement ACP work with any compatible editor. Editors that support ACP gain access to the entire ecosystem of ACP-compatible agents. This decoupling allows both sides to innovate independently while giving developers the freedom to choose the best tools for their workflow.

Learn more about Agent Client Protocol.

ACP in DeepAgents codebase.

ACP is defined as a folder in libs/acp. There is a mention of Zed in its README. I checked the zed website and you should too. Zed is a minimal code editor crafted for speed and collaboration with humans and AI.

deepagents-mcp usage from their README:

// ~/.config/zed/settings.json
{
  "agent": {
    "profiles": {
      "deepagents": {
        "name": "DeepAgents",
        "command": "npx",
        "args": ["deepagents-acp"]
      }
    }
  }
}

Below is another example for programmatic usage:

import { startServer } from "deepagents-acp";

await startServer({
  agents: {
    name: "coding-assistant",
    description: "AI coding assistant with filesystem access",
  },
  workspaceRoot: process.cwd(),
});

I checked the DeepAgents docs to find some proper usecase and found the below examples:

Handle complex, multi-step tasks that require planning and decomposition
Manage large amounts of context through file system tools
Swap filesystem backends to use in-memory state, local disk, durable stores, sandboxes, or your own custom backend
Delegate work to specialized subagents for context isolation
Persist memory across conversations and threads

Learn more about Deep Agents.

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:

.codespellignore file in DeepAgentsJS codebase

Ramu Narasinga — Wed, 25 Mar 2026 15:30:00 +0000

In this article, we review the .codespellignore file in DeepAgentsJS. You will learn the following:

What is .codespellignore file?
.codespellignore file in DeepAgentsJS

What is .codespellignore file?

To understand what this .codespellignore is, you need to know about CodeSpell.

CodeSpell

Fix common misspellings in text files. It’s designed primarily for checking misspelled words in source code (backslash escapes are skipped), but it can be used with other files as well. It does not check for word membership in a complete dictionary, but instead looks for a set of common misspellings. Therefore it should catch errors like “adn”, but it will not catch “adnasdfasdf”. This also means it shouldn’t generate false-positives when you use a niche term it doesn’t know about.

Learn more about CodeSpell.

.codespellignore

This is a file where you can define the files and folders that need to be skipped for spell check.

.codespellignore file in DeepAgentsJS

Now that we understand what .codespellignore is, let’s see how DeepAgentsJs defined it.

datas
afterAll
Nd
Ll

and this file is used in .github/workflows/ci.yml as shown below.

readme-spelling: name: Check README spelling runs-on: ubuntu-latest steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 - uses: codespell-project/actions-codespell@8f01853be192eb0f849a5c7d721450e7a467c579 # v2.2 with: ignore_words_file: .codespellignore path: README.md
check-spelling: name: Check code spelling runs-on: ubuntu-latest steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 - uses: codespell-project/actions-codespell@8f01853be192eb0f849a5c7d721450e7a467c579 # v2.2 with: ignore_words_file: .codespellignore path: libs

So this is one way to setup the codespell. I also read this article — Adding codespell as a pre-commit and CI where it shows an example of Github Action as well.

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:

API layer in Twenty codebase — Part 1.3

Ramu Narasinga — Tue, 24 Mar 2026 15:30:00 +0000

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

This article focuses only on the API layer in Twenty codebase.

Prerequisite

Approach

The approach we take is simple:

Pick a route
Locate this route in Twenty codebase.
Review how the api layer is implemented.
We repeat this process for 3 pages to establish a common pattern, see if there’s any exceptions.

In this part 1.3, you will learn the API layer in the /create/profile route and see what library is used to create a profile, where these files are located.

I reviewed the /create/profile route and found that the following files give us a clear picture about API layer.

CreateProfile.tsx

CreateProfile is defined as shown below:

...
export const CreateProfile = () => {
  ...
  const { updateOneRecord } = useUpdateOneRecord();
  ...
  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 updateOneRecord({
          objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
          idToUpdate: currentWorkspaceMember?.id,
          updateOneRecordInput: {
            name: {
              firstName: data.firstName,
              lastName: data.lastName,
            },
            colorScheme: 'System',
          },
        });

        setCurrentWorkspaceMember((current) => {
          if (isDefined(current)) {
            return {
              ...current,
              name: {
                firstName: data.firstName,
                lastName: data.lastName,
              },

              colorScheme: 'System',
            };
          }
          return current;
        });

        setCurrentUser((current) => {
          if (isDefined(current)) {
            return {
              ...current,
              firstName: data.firstName,
              lastName: data.lastName,
            };
          }
          return current;
        });

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

}

There’s four things happening onSubmit.

updateOneRecord
setCurrentWorkspaceMember
setCurrentUser
setNextOnboardingStatus

updateOneRecord is from the following hook

import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
...
const { updateOneRecord } = useUpdateOneRecord();

useUpdateOneRecord.ts

useUpdateOneRecord.ts is a common hook used in the codebase to update a single record. This is evident from the below screenshot.

And this hook has 273 LOC a the time of writing this article.

This function’s declaration is as shown below:

const updateOneRecord = async <
    UpdatedObjectRecord extends ObjectRecord = ObjectRecord,
  >({
    objectNameSingular,
    idToUpdate,
    updateOneRecordInput,
    optimisticRecord,
    recordGqlFields,
  }: UpdateOneRecordArgs<UpdatedObjectRecord>) => {

This is a common function that takes objectNameSingular and id to perform update operations.

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