.agents/skills folder in Lobehub codebase - Part 1.1

#opensource #agents #skills #ai

In this article, we review .agents/skills folder in the Lobehub codebase. You will understand the following:

.agents/skills folder in Lobehub.

Prerequisite:

AGENTS.md , a README.md for agents.

.agents/skills folder in Lobehub

.agents/skills folder in Lobehub has 12+ skills defined. I would like to consider 2 skills and review the instructions in this article.

skills/data-fetching/SKILL.md

In data-fetching/SKILL.md, you will find the following metadata:

I picked the below Architecture overview from the docs:

┌─────────────┐
│  Component  │
└──────┬──────┘
       │ 1. Call useFetchXxx hook from store
       ↓
┌──────────────────┐
│  Zustand Store   │
│  (State + Hook)  │
└──────┬───────────┘
       │ 2. useClientDataSWR calls service
       ↓
┌──────────────────┐
│  Service Layer   │
│  (xxxService)    │
└──────┬───────────┘
       │ 3. Call lambdaClient
       ↓
┌──────────────────┐
│  lambdaClient    │
│  (TRPC Client)   │
└──────────────────┘

There are layers to how the data is fetched on Lobehub and these layers are defined in this SKILL.md

This SKILL.md also provides a complete example about how to add a new feature and it had these steps:

Step 1: Create service
Step 2: Create reducer
Step 3: Create store slice
Step 4: Integrate into store
Step 5: Create selectors
Step 6: Use in component

This SKILL.md is so detailed that I recommend checking out the table of contents at high level for you to get an idea about what you can define in your SKILL.md when the time comes.

Similarly, now let’s review another SKILL.md. I chose store-data-structures/SKILL.md because this was mentioned in the data-fetching skill.

skills/store-data-structures/SKILL.md

In store-data-structures/SKILL.md, you will find the following metadata:

I found Core Principles section common in data-fetching and store skills. There is also a pattern definition that I found common.

However, in the store skill, I found below:

State Structure Pattern
Reducer Pattern

In the data-fetching skill, there was a section that demonstrated the common patterns for the data-fetching.

Decision tree

Need to store data?
│
├─ Is it a LIST for display?
│  └─ ✅ Use simple array: `xxxList: XxxListItem[]`
│     - May include computed fields
│     - Refreshed as a whole
│     - No optimistic updates needed
│
└─ Is it DETAIL page data?
   └─ ✅ Use Map: `xxxDetailMap: Record<string, Xxx>`
      - Cache multiple details
      - Support optimistic updates
      - Per-item loading states
      - Requires reducer for mutations

There is a Checklist section in the store skill.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com