DEV Community

MATKARIM MATKARIMOV
MATKARIM MATKARIMOV

Posted on

Claude Code'ni multi-agent dev jamoaga qanday aylantirdim

#ai #react #nextjs #development


Claude Code'ning maxsus agentlari bilan multi-agent ishlab chiqish workflow'ini qurish bo'yicha amaliy qo'llanma — arxitekturadan implementatsiyagacha, real konfiguratsiyalar bilan.

Claude Code'ni 12 ta ixtisoslashtirilgan sub-agentga qanday ajratganim

Men Claude Code (Anthropic'ning CLI vositasi) ni asosiy kodlash yordamchisi sifatida ishlataman. Asl holatda u bitta umumiy maqsadli agent. Lekin men uni 12 ta ixtisoslashtirilgan sub-agentga ajratdim — har birining o'z vazifasi, maxsus vositalari va loyiha konvensiyalarini chuqur bilishi bor.

Natija: hamma narsani yuzaki biladigan bitta agent o'rniga, o'z sohasini chuqur biladigan mutaxassislar jamoasi bor.

Bitta AI agent bilan muammo

Bitta AI agentni hamma narsa uchun ishlatsangiz — kod yozish, review qilish, debug qilish, tiplar yaratish, git boshqarish — oldindan aytish mumkin bo'lgan muammolarga duch kelasiz:

  1. Kontekst suyulanishi: Agent hamma narsa bo'lishga urinadi va har bir vazifada o'rtacha natija beradi
  2. Nomuvofiq patternlar: Qat'iy nazorat bo'lmasa, bir xil pattern turli featurelarda turlicha implement qilinadi
  3. Separation of concerns yo'q: Bir xil agent kod yozadi va uni review qiladi — ikkinchi fikr yo'q
  4. Context window isrof bo'lishi: Har bir prompt barcha ko'rsatmalarning to'liq og'irligini ko'taradi, hatto faqat bitta imkoniyat kerak bo'lsa ham

Yechim aniq edi: kodda ishlatadigan separation of concerns tamoyilini AI workflow'imga ham qo'llash.

Arxitektura: Sub-agentlar qanday ishlaydi

Claude Code ~/.claude/agents/ papkasidagi markdown fayllar orqali maxsus agentlarni qo'llab-quvvatlaydi. Har bir agent asosiy sessiya vazifa topshira oladigan subprocess hisoblanadi.

Asosiy Claude sessiyasi (orkestrator)
  |
  |-- "bu feature'ni qur" topshiradi --> senior-dev agent
  |-- "kodni review qil" topshiradi --> code-reviewer agent
  |-- "tiplar yarat" topshiradi --> schema-type-generator agent
  |-- "commit qil" topshiradi --> git-workflow agent
  |
  (agentlar bir-biri bilan gaplasha olmaydi — faqat asosiy sessiya orqali)
Enter fullscreen mode Exit fullscreen mode

Asosiy cheklovlar:

  • Agentlar faqat asosiy sessiya bilan muloqot qiladi, hech qachon bir-biri bilan bevosita emas
  • Har bir agentning o'z tizim prompti, vositalar ruxsati va model tanlovi bor
  • Asosiy sessiya orkestrator sifatida ishlaydi — qaysi agent qaysi vazifani bajarishini u hal qiladi
  • Agentlar mustaqil ishlar uchun parallel ishlashi mumkin

12 ta agent

Mana agentlarning to'liq ro'yxati — vazifalari, modellari va vositalari bilan:

Agent Model Rang Vazifasi
senior-dev inherit (Opus) yashil Asosiy kod yozuvchi — featurelarni boshidan oxirigacha quradi
component-architect Sonnet ko'k-yashil Implementatsiyadan oldin komponent ierarxiyasini loyihalaydi
code-reviewer Sonnet qizil Kod sifatini tekshiradi, xatolarni topadi, patternlarni nazorat qiladi
debugger inherit (Opus) sariq Runtime xatolar va build muvaffaqiyatsizliklarini tashxislaydi
api-integrator inherit (Opus) ko'k Frontendni backend API'larga ulaydi
schema-type-generator Sonnet binafsha TypeScript tiplari va Zod schemalarni yaratadi
test-writer inherit (Opus) yashil Vitest + Testing Library testlar yozadi
git-workflow Haiku ko'k Commitlar, branchlar, PR'larni boshqaradi
performance-optimizer Sonnet sariq Performance muammolarini tashxislaydi va tuzatadi
security-auditor Sonnet qizil Xavfsizlik tekshiruvlari va zaiflik skanerlash
refactorer inherit (Opus) binafsha Mavjud xatti-harakatni saqlab kodni qayta tuzadi
documentation-creator Sonnet ko'k-yashil Texnik hujjatlar, JSDoc, README fayllar yozadi
coding-rules inherit (Opus) binafsha-rang CLAUDE.md'dagi barcha kodlash standartlarini nazorat qiladi

Nima uchun turli modellar?

Har bir vazifa eng kuchli (va qimmat) modelni talab qilmaydi:

  • Opus — chuqur fikrlash kerak bo'lgan vazifalar uchun: murakkab featurelar yozish, debugging, refaktoring
  • Sonnet — pattern matching va izchillik kerak bo'lgan vazifalar uchun: kod review, tip generatsiya, xavfsizlik audit
  • Haiku — oddiy, takroriy vazifalar uchun: git operatsiyalari (commit xabarlari, branch yaratish)

Bu sifatga zarar bermasdan xarajatlarni kamaytiradi.

Agent anatomiyasi: Har bir agent faylining ichida nima bor

Har bir agent — YAML frontmatter va batafsil tizim promptli markdown fayl. Mana tuzilishi:

---
name: agent-nomi
description: >
  Bu agentni qachon ishlatish kerak. Claude buni qaysi
  agentga topshirishni hal qilish uchun o'qiydi.
model: inherit | sonnet | haiku
color: green
tools: Read, Write, Grep, Glob, Bash
memory: user
---

[Loyihaga xos patternlar, bosqichma-bosqich workflow'lar,
 kod misollari va sifat cheklistlari bilan batafsil tizim prompt]
Enter fullscreen mode Exit fullscreen mode

description maydoni muhim — u asosiy Claude sessiyasiga qachon bu agentni ishlatishni aytadi. Uni routing qoidasi deb o'ylang.

Chuqur tahlil: Asosiy agentlar

1. senior-dev — Implementatsiya ishchisi

Bu production kod yozadigan agent. Uning tizim prompti mening aniq stek va patternlarimni kodlaydi:

## Ish tartibi

### 1-bosqich: Tushunish
Bitta qator kod yozishdan oldin:
1. Talabni diqqat bilan o'qing
2. Noaniq bo'lsa, aniqlashtiruvchi savollar bering

### 2-bosqich: O'rganish
3. Codebase'da o'xshash komponentlarni topish uchun Glob ishlating
4. Bir xil patternga amal qiladigan 2-3 ta mavjud faylni o'qing
5. Qayta ishlatilishi mumkin bo'lgan umumiy utilitalarni tekshiring

### 3-bosqich: Rejalashtirish
6. Yaratadigan yoki o'zgartiradigan barcha fayllarni sanab o'ting
7. Davom etishdan oldin bu rejani foydalanuvchiga taqdim eting

### 4-bosqich: Qurish
9.  Avval tiplar va enumlarni yarating (data kontrakti)
10. i18n validatsiya bilan Zod schemalar yarating
11. Service layerni quríng (ENDPOINTS + featureService)
12. TanStack Query hooklarni quríng (key factory + hooklar)
13. UI komponentlarni eng oxirida quríng

### 5-bosqich: Tekshirish
15. Xatolarni topish uchun har bir faylni qayta o'qing
16. Tip tekshiruvi uchun tsc --noEmit ishga tushiring
17. Formatlash uchun Biome ishga tushiring
Enter fullscreen mode Exit fullscreen mode

Asosiy tushuncha: agent pastdan yuqoriga quradi — avval tiplar, keyin schemalar, keyin servicelar, keyin hooklar, keyin UI. Har bir qatlam faqat o'zidan pastdagi qatlamlarga bog'liq. Bu tartib yuqoridan pastga qurishda paydo bo'ladigan kaskad tip xatolarining oldini oladi.

Har bir pattern aniq kod misollarini o'z ichiga oladi. Mana service layer pattern agent prompti ichida qanday ko'rinadi:

const ENDPOINTS = {
  LIST: '/users/list',
  CREATE: '/users/create',
  UPDATE: (id: number) => `/users/${id}/update`,
  DELETE: (id: number) => `/users/${id}/delete`,
  DETAIL: (id: number) => `/users/${id}`,
} as const;

export const userService = {
  getList: async (filter: UserFilter): Promise<UserListResponse> => {
    const { data } = await axiosClient.post(ENDPOINTS.LIST, filter);
    return data;
  },
  // ... boshqa metodlar
};
Enter fullscreen mode Exit fullscreen mode

Agent "user boshqaruvini qur" so'rovini ko'rganda improvizatsiya qilmaydi — u aynan shu patternga amal qiladi, chunki misollar uning ko'rsatmalariga joylashtirilgan.

2. code-reviewer — Ikkinchi ko'z

Bu agent ataylab Sonnetda (Opus emas) ishlaydi. Kod review — bu pattern matching: bu kod qoidalarga amal qiladimi? Sonnet tezroq, arzonroq va bunga juda yaxshi.

Review jarayoni sistematik:

## Review jarayoni

### 2-qadam: Xato tahlili
Sistematik tekshiring:

**Null/Undefined xavflari:**
- Potentsial undefined qiymatlarda optional chaining yo'q
- TanStack Query `data` ga `isLoading` tekshirmasdan murojaat qilish

**Mantiqiy xatolar:**
- useEffect yoki TanStack Query queryFn'da eskirgan closurelar
- Noto'g'ri skipToken shartlari

**TypeScript muammolari:**
- `any` tip ishlatish (`unknown` yoki aniq tip bo'lishi kerak)
- Zod schemalarida `satisfies z.ZodType<Type>` yo'q

### 5-qadam: Pattern muvofiqlik
Har bir patternni sistematik tekshiring:
- Service layer: ENDPOINTS as const + featureService + axiosClient
- TanStack Query: key factorylar + skipToken + keepPreviousData
- Zod: createSchema(t: TFunction) + satisfies
- CVA: cva() + VariantProps + cn()
- Enumlar: const as const + tip ajratish
Enter fullscreen mode Exit fullscreen mode

Uning chiqishi jiddiylik darajalari bilan tuzilgan:

## Kritik muammolar
- **[BUG]** `user.service.ts:45` - API javobida null tekshiruv yo'q

## Pattern buzilishlar
- **[QUERY]** `use-users.ts:12` - Sahifalangan so'rovda keepPreviousData yo'q

## Xulosa
**O'ZGARISH TALAB QILINADI** - 2 ta kritik xato topildi
Enter fullscreen mode Exit fullscreen mode

3. debugger — Xato detektivi

Biror narsa buzilganda, bu agent qat'iy tashxis jarayoniga amal qiladi. Uning prompti mening stekimga xos har bir keng tarqalgan xato patternini o'z ichiga oladi:

## Management-System'ga xos xato patternlari

### Axios Interceptor xatolari
**Token yangilash muvaffaqiyatsizligi (cheksiz 401 sikli):**
- Asosiy sabab: Token yangilash so'rovi 401 qaytaradi, bu yana yangilashni boshlaydi
- Tekshiring: src/lib/axios.ts dagi Axios interceptorni o'qing
- Tuzatish: Bir vaqtda yangilashlarning oldini olish uchun isRefreshing bayrog'i qo'shing

### TanStack Query xatolari
**skipToken noto'g'ri ishlatilishi (so'rov kerak bo'lmaganda ishlaydi):**
- Asosiy sabab: queryFn undefined parametr oladi, chunki skipToken sharti noto'g'ri
- Tekshiring: skipToken sharti aynan param mavjud bo'lmaganda mos kelishi kerak

### React Hook Form + Zod xatolari
**Schema validatsiya ishlamayapti:**
- Asosiy sabab: createSchema t funksiyasiz chaqirilgan
- Tuzatish: Schema'ni t mavjud bo'lgan komponent ichida yarating
Enter fullscreen mode Exit fullscreen mode

Taxmin qilish o'rniga, agent xatoni ma'lum patternlarga moslashtiradi va asosiy sababni dalillar bilan kuzatadi.

4. schema-type-generator — Tiplar va validatsiya

Bu agent bitta narsaga ixtisoslashgan: loyihaning aniq konvensiyalariga amal qiladigan TypeScript tiplari va Zod schemalar yaratish.

// U enum patternini biladi
export const DepartmentStatus = {
  Active: 'ACTIVE',
  Inactive: 'INACTIVE',
  Archived: 'ARCHIVED',
} as const;

export type DepartmentStatus = (typeof DepartmentStatus)[keyof typeof DepartmentStatus];
export const DepartmentStatusValues = Object.values(DepartmentStatus);

// U schema factory patternini biladi
export const createDepartmentSchema = (t: TFunction) =>
  z.object({
    name: z.string({ message: t('validation.required') })
      .min(2, t('validation.minLength', { min: 2 })),
    status: z.enum(DepartmentStatusValues as [string, ...string[]], {
      message: t('validation.required'),
    }),
  }) satisfies z.ZodType<DepartmentInput>;

export type DepartmentFormValues = z.infer<ReturnType<typeof createDepartmentSchema>>;
Enter fullscreen mode Exit fullscreen mode

Nima uchun tiplar uchun alohida agent? Chunki tip ta'riflari qatlamlar orasidagi kontrakt hisoblanadi. Agar tiplar noto'g'ri bo'lsa, pastdagi hamma narsa buziladi. Loyihaning tip patternlarini (ayniqsa const as const enum pattern va createSchema(t) factory pattern) chuqur tushunadigan mutaxassisga ega bo'lish tipga bog'liq xatolarni sezilarli darajada kamaytiradi.

5. git-workflow — Xavfsiz commit qiluvchi

Bu Haikuda — eng arzon, eng tez modelda ishlaydi. Git operatsiyalari formulaga asoslangan: statusni tekshirish, fayllarni staging'ga qo'shish, conventional commit xabar yozish, push qilish.

## Xavfsizlik qoidalari (HECH QACHON buzilmasin)
- HECH QACHON main/master'ga force push qilmang
- HECH QACHON foydalanuvchining aniq tasdig'isiz git reset --hard ishlatmang
- HECH QACHON .env fayllar yoki credentiallarni staging'ga qo'shmang
- DOIMO commit qilishdan oldin staging'dagi o'zgarishlarni ko'rib chiqing
- DOIMO git add'da aniq fayl yo'llarini ishlating (git add . emas)
Enter fullscreen mode Exit fullscreen mode

Commit xabar formati majburiy:

feat(departments): add department creation form with validation
fix(table): correct column resize handle position
refactor(api): extract shared error handling to Axios interceptor
Enter fullscreen mode Exit fullscreen mode

Orkestratsiya oqimi

Mana oddiy feature so'rovi agentlar orqali qanday o'tadi:

Foydalanuvchi: "CRUD bilan bo'limlar boshqaruvi sahifasini qo'sh"

1. Asosiy sessiya so'rovni tahlil qiladi
2. component-architect'ga topshiradi:
   "Bo'limlar feature uchun komponent ierarxiyasini loyihala"
   -> Qaytaradi: komponent daraxti, proplar, state egaligi xaritasi

3. schema-type-generator'ga topshiradi:
   "Bo'limlar uchun tiplar va Zod schemalar yarat"
   -> Qaytaradi: types.ts + department.schema.ts

4. senior-dev'ga topshiradi:
   "Arxitektura rejasiga amal qilib bo'limlar feature'ni implement qil"
   -> Qaytaradi: service, hooklar, komponentlar, sahifa

5. code-reviewer'ga topshiradi:
   "Barcha yangi bo'limlar feature fayllarini review qil"
   -> Qaytaradi: muammolar bilan review

6. Agar muammolar topilsa, senior-dev'ga qaytaradi:
   "Kod review'dagi muammolarni tuzat"

7. git-workflow'ga topshiradi:
   "Bo'limlar feature'ni commit qil"
   -> Qaytaradi: conventional commit yaratildi
Enter fullscreen mode Exit fullscreen mode

2 va 3-qadamlar mustaqil bo'lgani uchun parallel ishlashi mumkin. Asosiy sessiya ketma-ketlikni boshqaradi.

Umumiy bilim qatlami: coding-rules agent

Bitta maxsus agent hamma narsani birlashtiradi: coding-rules. Bu loyihamning barcha kodlash standartlarini kodlaydigan 2700+ qatorli hujjat:

## Agent identifikatsiyasi

Siz kodlash standartlarini nazorat qilish mutaxassisisiz.
Siz hech qachon yangi patternlar o'ylab topmaysiz — faqat mavjudlarini qat'iy nazorat qilasiz.

Sizning falsafangiz:
- Afzalliklarga nisbatan izchillik
- Avval pattern, keyin implementatsiya
- Improvizatsiya yo'q
- Ishonchsiz bo'lganda agentlarga murojaat qiling
Enter fullscreen mode Exit fullscreen mode

Bu agent boshqa agentlar murojaat qiladigan "haqiqat manbai" vazifasini bajaradi. senior-dev komponent qurganda, u code-reviewer tekshiradigan bir xil CVA patternga amal qiladi va bu coding-rulesdagi misollar bilan mos keladi.

Sozlash: Konfiguratsiya

Agent fayllari

Har bir agent ~/.claude/agents/ da joylashgan:

~/.claude/agents/
  senior-dev.md
  code-reviewer.md
  component-architect.md
  debugger.md
  api-integrator.md
  schema-type-generator.md
  test-writer.md
  git-workflow.md
  performance-optimizer.md
  security-auditor.md
  refactorer.md
  documentation-creator.md
  coding-rules.md
Enter fullscreen mode Exit fullscreen mode

CLAUDE.md — Loyiha konteksti

~/.claude/CLAUDE.md fayli barcha agentlar meros qilib oladigan loyiha darajasidagi kontekstni ta'minlaydi:

# Tech Stack
- React 19 + TypeScript 5.9 + Vite 7
- TanStack Query v5, TanStack Table v8
- React Hook Form + Zod (i18n validation)
- Axios (auth interceptors, token refresh)
- i18next (en, ru, uz, uz-Cyrl)
- Biome (linter + formatter)

# Quick Reference
- TypeScript: strict mode, interface for objects, type for unions
- Service Layer: ENDPOINTS as const + featureService + axiosClient
- TanStack Query: key factories, skipToken, keepPreviousData
- Zod: createSchema(t: TFunction), satisfies z.ZodType<T>
- Files: feature-based src/features/[name]/
Enter fullscreen mode Exit fullscreen mode

Ruxsatlar

~/.claude/settings.json agentlarning nima qila olishini boshqaradi:

{
  "permissions": {
    "allow": [
      "Bash(npm:*)", "Bash(pnpm:*)", "Bash(git:*)",
      "Bash(biome:*)", "Bash(vitest:*)", "Bash(tsc:*)",
      "WebSearch", "WebFetch"
    ],
    "defaultMode": "acceptEdits"
  }
}
Enter fullscreen mode Exit fullscreen mode

Agentlar bu ruxsatlarni meros qilib oladi. code-reviewer faqat Read, Grep, Glob, Bash ga ega — tahlil qila oladi lekin yoza olmaydi. senior-dev to'liq vositalar ruxsatiga ega.

Nimalarni o'rgandim

1. Agent descriptionlari routing qoidalari

YAML frontmatterdagi description maydoni Claude qaysi agentni ishlatishni hal qilish usuli. Uni funksiya signaturasi kabi yozing: aniq kirishlar, aniq foydalanish holatlari.

# Yomon
description: Kod bilan yordam beradi

# Yaxshi
description: >
  Ekspert kod review agenti. Kod sifatini tekshiradi, xatolarni topadi,
  TypeScript tip xavfsizligini tasdiqlaydi va loyiha patternlariga
  (service layer, TanStack Query, Zod i18n, CVA, Biome) muvofiqligini tekshiradi.
  Kod o'zgarishlaridan keyin yoki commitlardan oldin proaktiv ishlating.
Enter fullscreen mode Exit fullscreen mode

2. Aniq misollar abstrakt qoidalardan ustun

"To'g'ri TypeScript patternlar ishlating" o'rniga, aniq kodni joylashtiring:

// Bu agent promptining ichida:
export const Role = {
  Admin: 'ADMIN',
  User: 'USER',
} as const;

export type Role = (typeof Role)[keyof typeof Role];
Enter fullscreen mode Exit fullscreen mode

Agent bu patternni aynan qayta ishlab chiqaradi.

3. Model tanlovi narx uchun muhim

Mening git-workflow agentim oyiga yuzlab marta ishlaydi. Oddiy commit xabarlari uchun Opus o'rniga Haiku ishlatish sifat yo'qolishisiz sezilarli xarajatni tejaydi.

4. Reviewerlar uchun faqat o'qish vositalari

code-reviewer agentida faqat Read, Grep, Glob, Bash bor — Write yoki Edit yo'q. Bu ataylab. Reviewer tahlil qilishi va hisobot berishi kerak, tuzatish emas. Tuzatish senior-devga qaytadi.

5. Memory sessiyalar aro o'rganishni yoqadi

Har bir agentda memory: user bor, ya'ni ular sessiyalar bo'ylab patternlar va afzalliklarni eslab qolishi mumkin. debugger agenti qaysi xato patternlarni ko'rganini eslaydi; senior-dev sizning afzal qiladigan komponent tuzilmangizni eslaydi.

Oldin va keyin

Oldin (bitta agent):

  • "Users sahifasini qur" → Umumiy implementatsiya, loyiha patternlari yo'q
  • Pattern buzilishlarni topish uchun qo'lda review kerak
  • Featurelar bo'ylab nomuvofiq kod
  • Har bir prompt konvensiyalarni takrorlashni talab qiladi

Keyin (12 ta ixtisoslashtirilgan agent):

  • "Users sahifasini qur" → senior-dev aniq patternlarga amal qiladi, pastdan yuqoriga quradi
  • code-reviewer buzilishlarni avtomatik topadi
  • Har bir feature bir xil patternlarga amal qiladi
  • Konvensiyalar agent promptlariga joylashtirilgan, hech qachon takrorlanmaydi

O'zingiz sinab ko'ring

  1. Loyihangizning asosiy patternlarini aniqlang (eng ko'p nazorat qiladigan 3-5 ta pattern)
  2. Birinchi agentingizni yarating: senior-dev — kod yozuvchidan boshlang
  3. Patternlaringizga qarshi tekshiradigan code-reviewer qo'shing
  4. Qaysi vazifalar fokuslantirilgan promptlardan foyda ko'rishini payqaganingizda asta-sekin mutaxassislar qo'shing
  5. Haqiqat manbai sifatida umumiy coding-rules agentini saqlang

Birinchi kundan 12 ta agent kerak emas. 2-3 tadan boshlang va patternlaringiz mustahkamlanganida agentlarni o'shiring.

Bu setup hali takomillashtirilmoqda — men hali ham agent promptlarini yaxshilayapman, model tanlovlarini sozlayapman. Agar takliflaringiz bo'lsa, kamchilik sezgan bo'lsangiz yoki boshqacha yondashuv bilan o'xshash narsa qurgan bo'lsangiz, izohlarda yozishingiz mumkin.

Top comments (0)