.agents/skills folder in Lobehub codebase

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

.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. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

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

.agents/skills folder in Lobehub codebase - Part 1.1

Prerequisite: