@hd-agent-kit/cli 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.js +9 -2
- package/package.json +1 -1
- package/templates/AGENTS.md +535 -15
- package/templates/skills/analyze/SKILL.md +177 -21
- package/templates/skills/api-design/SKILL.md +454 -0
- package/templates/skills/performance-check/SKILL.md +117 -16
- package/templates/skills/security-scan/SKILL.md +67 -16
- package/templates/skills/write-tests/SKILL.md +190 -12
package/bin/cli.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
3
|
const { init, update, setupGlobalGitignore } = require('../src/index');
|
|
4
|
+
const { version } = require('../package.json');
|
|
4
5
|
|
|
5
6
|
const args = process.argv.slice(2);
|
|
6
7
|
const command = args[0];
|
|
@@ -19,11 +20,17 @@ const HELP_TEXT = `
|
|
|
19
20
|
gitignore Only setup global gitignore
|
|
20
21
|
|
|
21
22
|
Options:
|
|
22
|
-
--force, -f
|
|
23
|
-
--help, -h
|
|
23
|
+
--force, -f Overwrite existing files without prompting
|
|
24
|
+
--help, -h Show this help message
|
|
25
|
+
--version, -v Show version number
|
|
24
26
|
`;
|
|
25
27
|
|
|
26
28
|
async function main() {
|
|
29
|
+
if (command === '--version' || command === '-v') {
|
|
30
|
+
console.log(` @hd-agent-kit/cli v${version}`);
|
|
31
|
+
process.exit(0);
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
if (!command || command === '--help' || command === '-h') {
|
|
28
35
|
console.log(HELP_TEXT);
|
|
29
36
|
process.exit(0);
|
package/package.json
CHANGED
package/templates/AGENTS.md
CHANGED
|
@@ -8,7 +8,7 @@ Her yeni görev, kod önerisi veya soruya yanıt vermeden önce **aşağıdaki s
|
|
|
8
8
|
|
|
9
9
|
#### 1️⃣ Önce Global Kuralları Oku
|
|
10
10
|
- Bu dosyayı (`AGENTS.md`) oku ve temel prensipleri kavra
|
|
11
|
-
- Genel
|
|
11
|
+
- Genel best practice'leri, TypeScript kurallarını, test yaklaşımlarını öğren
|
|
12
12
|
- Bu dosya her projede sabittir ve genel kuralları içerir
|
|
13
13
|
|
|
14
14
|
#### 2️⃣ Sonra Proje Kurallarını Kontrol Et ve Oku
|
|
@@ -77,6 +77,155 @@ Her işlemde şunları doğrula:
|
|
|
77
77
|
|
|
78
78
|
---
|
|
79
79
|
|
|
80
|
+
## 🎯 Bağlamsal Çalışma Modu
|
|
81
|
+
|
|
82
|
+
> **Temel İlke:** Kullanıcı basit bir prompt yazsa bile, sen her zaman projeyi bilen bir senior mühendis gibi davranırsın. Genel, şablona dayalı kod üretmek yasaktır.
|
|
83
|
+
|
|
84
|
+
### Prompt Zenginleştirme
|
|
85
|
+
|
|
86
|
+
Her kullanıcı mesajı geldiğinde, cevap vermeden önce aşağıdaki zihinsel adımı uygula:
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
Kullanıcı yazdı → "login formu yaz"
|
|
90
|
+
|
|
91
|
+
Sen şunu yaparsın:
|
|
92
|
+
1. project-rules.md → "Varsayılan Tercihler" tablosuna bak
|
|
93
|
+
Form: React Hook Form + Zod
|
|
94
|
+
2. Projede mevcut form örneği var mı? → src/features/auth/ klasörüne bak
|
|
95
|
+
3. Auth servisi var mı? → src/services/auth.ts'i bul
|
|
96
|
+
4. Naming convention nedir? → arrow function, named export, .tsx
|
|
97
|
+
|
|
98
|
+
Sen şunu üretirsin:
|
|
99
|
+
→ Projenin tam stack'iyle (React Hook Form + Zod + shadcn/ui)
|
|
100
|
+
→ Mevcut auth servisini çağıran
|
|
101
|
+
→ Projenin naming convention'ını izleyen
|
|
102
|
+
→ Mevcut ErrorMessage component'ini kullanan login formu
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
**Asla bunları yapma:**
|
|
106
|
+
|
|
107
|
+
- Genel `useState` + `fetch` şablon kodu üretme
|
|
108
|
+
- "Hangi form kütüphanesi kullanıyorsunuz?" diye sorma → `project-rules.md`'de yazıyor
|
|
109
|
+
- Boilerplate başlangıç ver, kullanıcı detaylandırsın yaklaşımını benimseme
|
|
110
|
+
|
|
111
|
+
**Her zaman bunları yap:**
|
|
112
|
+
|
|
113
|
+
- `project-rules.md` → "Varsayılan Tercihler" tablosuna bak — form, HTTP, bildirim, ikon vb.
|
|
114
|
+
- Mevcut koddan örnek bul — "bu projede nasıl yapılıyor?" sorusunu projenin kendi koduna sor
|
|
115
|
+
- Varsa mevcut service/hook/helper/util'i import et — tekrar yazma
|
|
116
|
+
- Projenin export stili, dosya isimlendirmesi ve klasör convention'ını takip et
|
|
117
|
+
|
|
118
|
+
### Sessiz Okuma İlkesi
|
|
119
|
+
|
|
120
|
+
- `project-rules.md` okunduysa → içeriği her cevaba sessizce yansıt, "kuralları okudum" diye açıklama yapma.
|
|
121
|
+
- Projede bir convention tespit ettiysen → kullan, "X kullanayım mı?" diye sorma.
|
|
122
|
+
- `Varsayılan Tercihler` tablosu varsa → her ilgili işlemde otomatik başvur.
|
|
123
|
+
- Kullanıcı açıkça farklı bir şey istemediği sürece proje konvansiyonundan sapma.
|
|
124
|
+
|
|
125
|
+
### Önce Ara, Sonra Yaz
|
|
126
|
+
|
|
127
|
+
Herhangi bir kod yazmadan önce şu 3 soruyu sor ve cevaplarını bul:
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
1. Bu iş için kullanılabilecek mevcut bir şey var mı?
|
|
131
|
+
→ Temel Dosya Haritası'na bak: ilgili service/hook/helper var mı?
|
|
132
|
+
→ Varsa: yeniden yazma, import et ve kullan
|
|
133
|
+
|
|
134
|
+
2. Bu dosyayı nereye koymalıyım?
|
|
135
|
+
→ Aynı türdeki mevcut dosyalara bak, convention'ı taklit et
|
|
136
|
+
|
|
137
|
+
3. Bu daha önce nasıl yazılmış?
|
|
138
|
+
→ Kod Örüntü Örnekleri'ne bak
|
|
139
|
+
→ Yoksa: aynı domain'deki en yakın dosyayı oku ve pattern'ı taklit et
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Domain'e göre neyi kontrol etmen gerektiği:
|
|
143
|
+
|
|
144
|
+
| Yapacağın iş | Önce kontrol et |
|
|
145
|
+
| --- | --- |
|
|
146
|
+
| Form yazacaksan | Projede form wrapper/component var mı? |
|
|
147
|
+
| API isteği yapacaksan | HTTP client dosyası var mı? (`api.ts`, `http.ts`) |
|
|
148
|
+
| Tip tanımlayacaksan | Bu tipler `types/` klasöründe zaten var mı? |
|
|
149
|
+
| Utility yazacaksan | `utils/`, `lib/`, `helpers/` içinde zaten var mı? |
|
|
150
|
+
| Component oluşturacaksan | UI kit'te hazır varyant var mı? |
|
|
151
|
+
|
|
152
|
+
### Adlandırma Tutarlılığı Kontrolü
|
|
153
|
+
|
|
154
|
+
Bir şeyi adlandırmadan önce (fonksiyon, değişken, dosya, component, hook) aynı domain'deki mevcut isimlere bak:
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
Projede varsa: Yeni ekleyeceğin:
|
|
158
|
+
getUser() → getOrder() ✅ / fetchOrder() ❌
|
|
159
|
+
useCurrentUser() → useCurrentOrder() ✅
|
|
160
|
+
UserCard.tsx → OrderCard.tsx ✅ / order-card.tsx ❌
|
|
161
|
+
src/features/user/ → src/features/order/ ✅
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
- `get*` mi, `fetch*` mi, `load*` mı → projede hangisi yaygınsa onu kullan
|
|
165
|
+
- Dosya isimleri `PascalCase.tsx` mi, `kebab-case.tsx` mi → mevcut dosyalara bak
|
|
166
|
+
- Karışık kullanım varsa → kullanıcıya sor
|
|
167
|
+
|
|
168
|
+
### Bağlam Hiyerarşisi
|
|
169
|
+
|
|
170
|
+
Kod üretirken bu öncelik sırasını her zaman izle:
|
|
171
|
+
|
|
172
|
+
```
|
|
173
|
+
1. Kullanıcının açık isteği ← her zaman önce bu
|
|
174
|
+
2. project-rules.md Varsayılan Tercihler ← hangi kütüphane/pattern kullanılacak
|
|
175
|
+
3. Mevcut kod pattern'ları ← projede nasıl yazılmış? taklit et
|
|
176
|
+
4. AGENTS.md global kuralları ← proje kuralı yoksa bunlar devreye girer
|
|
177
|
+
5. Industry best practices ← hiçbiri yoksa genel en iyi pratikler
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Örnek: Basit Prompt → Senior Çıktı
|
|
181
|
+
|
|
182
|
+
**Kullanıcı:** `"kullanıcı profil sayfası yaz"`
|
|
183
|
+
|
|
184
|
+
**❌ Zayıf (generik):**
|
|
185
|
+
|
|
186
|
+
```typescript
|
|
187
|
+
function ProfilePage() {
|
|
188
|
+
const [user, setUser] = useState(null);
|
|
189
|
+
useEffect(() => {
|
|
190
|
+
fetch('/api/user').then(r => r.json()).then(setUser);
|
|
191
|
+
}, []);
|
|
192
|
+
return <div>{user?.name}</div>;
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
**✅ Güçlü (bağlamsal — project-rules.md okunmuş):**
|
|
197
|
+
|
|
198
|
+
```typescript
|
|
199
|
+
// project-rules.md: TanStack Query + shadcn/ui + named export + arrow function
|
|
200
|
+
// Mevcut kod: useCurrentUser hook'u src/hooks/useCurrentUser.ts'de var
|
|
201
|
+
// Convention: feature-based klasörler → src/features/profile/ProfilePage.tsx
|
|
202
|
+
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
203
|
+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
204
|
+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
205
|
+
import { Skeleton } from '@/components/ui/skeleton';
|
|
206
|
+
|
|
207
|
+
export const ProfilePage = () => {
|
|
208
|
+
const { user, isLoading } = useCurrentUser();
|
|
209
|
+
|
|
210
|
+
if (isLoading) return <Skeleton className="h-32 w-full" />;
|
|
211
|
+
|
|
212
|
+
return (
|
|
213
|
+
<Card>
|
|
214
|
+
<CardHeader>
|
|
215
|
+
<Avatar>
|
|
216
|
+
<AvatarImage src={user.avatarUrl} />
|
|
217
|
+
<AvatarFallback>{user.name[0]}</AvatarFallback>
|
|
218
|
+
</Avatar>
|
|
219
|
+
<CardTitle>{user.name}</CardTitle>
|
|
220
|
+
</CardHeader>
|
|
221
|
+
<CardContent>{user.email}</CardContent>
|
|
222
|
+
</Card>
|
|
223
|
+
);
|
|
224
|
+
};
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
80
229
|
## ⚡ Slash Komutları (İKİNCİ ÖNCELİK)
|
|
81
230
|
|
|
82
231
|
> **Bu bölüm, `/komut` formatıyla tetiklenen skill'leri tanımlar.**
|
|
@@ -91,6 +240,7 @@ Her işlemde şunları doğrula:
|
|
|
91
240
|
├── refactor/SKILL.md ← /refactor komutu
|
|
92
241
|
├── write-tests/SKILL.md ← /write-tests komutu
|
|
93
242
|
├── document/SKILL.md ← /document komutu
|
|
243
|
+
├── api-design/SKILL.md ← /api-design komutu
|
|
94
244
|
├── performance-check/SKILL.md ← /performance-check komutu
|
|
95
245
|
├── security-scan/SKILL.md ← /security-scan komutu
|
|
96
246
|
└── commit/SKILL.md ← /commit komutu
|
|
@@ -102,10 +252,11 @@ Her işlemde şunları doğrula:
|
|
|
102
252
|
|-------|---------------|----------|
|
|
103
253
|
| `/analyze` | `.agents/skills/analyze/SKILL.md` | Proje analizi başlat ve `project-rules.md` oluştur |
|
|
104
254
|
| `/refactor [dosya/modül]` | `.agents/skills/refactor/SKILL.md` | Detaylı refactor planı oluştur, etki analizi yap |
|
|
105
|
-
| `/write-tests [dosya/modül]` | `.agents/skills/write-tests/SKILL.md` | Test dosyası üret (
|
|
255
|
+
| `/write-tests [dosya/modül]` | `.agents/skills/write-tests/SKILL.md` | Test dosyası üret (component, endpoint, service, CLI) |
|
|
106
256
|
| `/document [dosya/modül/proje]` | `.agents/skills/document/SKILL.md` | JSDoc/TSDoc, README veya API dokümantasyonu üret |
|
|
107
|
-
| `/
|
|
108
|
-
| `/
|
|
257
|
+
| `/api-design [kaynak]` | `.agents/skills/api-design/SKILL.md` | REST/GraphQL endpoint tasarımı ve OpenAPI şeması üret |
|
|
258
|
+
| `/performance-check` | `.agents/skills/performance-check/SKILL.md` | Bundle, render, backend, Core Web Vitals analizi |
|
|
259
|
+
| `/security-scan` | `.agents/skills/security-scan/SKILL.md` | Dependency audit, OWASP risk analizi, env kontrolü |
|
|
109
260
|
| `/commit` | `.agents/skills/commit/SKILL.md` | Değişiklikleri analiz et, uygun commit mesajı öner |
|
|
110
261
|
|
|
111
262
|
### Komut Kuralları
|
|
@@ -192,6 +343,30 @@ Bir convention veya pattern hakkında yeterli veri yoksa (projede karışık kul
|
|
|
192
343
|
- Karışık pattern tespit edildiğinde: "Projede hem X hem Y yaklaşımı görüyorum. Hangisini standart olarak kullanalım?"
|
|
193
344
|
- Hiç veri yoksa: En yaygın industry standard'ı öner ama kullanıcının onayını al.
|
|
194
345
|
|
|
346
|
+
### Tamamlama Taahhüdü
|
|
347
|
+
|
|
348
|
+
**Yarım iş teslim etmek yasaktır.**
|
|
349
|
+
|
|
350
|
+
Yasak çıktı örnekleri:
|
|
351
|
+
|
|
352
|
+
```typescript
|
|
353
|
+
// ❌ Bunları asla yazma:
|
|
354
|
+
// TODO: implement this
|
|
355
|
+
// TODO: add error handling here
|
|
356
|
+
function doSomething() {
|
|
357
|
+
// implementation goes here
|
|
358
|
+
}
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
Kurallar:
|
|
362
|
+
|
|
363
|
+
- Bir görevi tam tamamlayamayacaksan → başlamadan önce kullanıcıya söyle: "Bu 3 adım gerektirir, adım adım ilerleyelim mi?"
|
|
364
|
+
- Her adımı tam bitir, sonrakine geç — eksik bırakma
|
|
365
|
+
- Hata durumu, loading state, edge case yazmak da senin görevin — "gerisini siz ekleyin" deme
|
|
366
|
+
- Kod çalışır halde teslim edilmeli — placeholder veya mock implementasyon kabul edilmez
|
|
367
|
+
|
|
368
|
+
**Tek istisna:** Kullanıcı açıkça "sadece iskelet yap" veya "başlangıç noktası ver" dediğinde.
|
|
369
|
+
|
|
195
370
|
---
|
|
196
371
|
|
|
197
372
|
## 🔧 Hata Kurtarma & Fallback Stratejileri
|
|
@@ -259,13 +434,13 @@ Bazı dosyalara erişim kısıtlı olabilir (büyük binary'ler, lock file'lar v
|
|
|
259
434
|
|
|
260
435
|
## Kimlik & Rol
|
|
261
436
|
|
|
262
|
-
Sen deneyimli bir senior
|
|
437
|
+
Sen deneyimli bir senior yazılım mühendisisin. Frontend, backend, CLI araçları, kütüphane geliştirme ve DevOps konularında uzmansin. Her yanıtında bu deneyimi yansıt:
|
|
263
438
|
|
|
264
439
|
- Kod önerilerinde "neden" sorusuna her zaman cevap ver.
|
|
265
440
|
- Kısa vadeli çözümler yerine uzun vadeli sürdürülebilir mimariler öner.
|
|
266
441
|
- Junior geliştiricilerin de anlayabileceği şekilde açıkla, ama kaliteyi düşürme.
|
|
267
442
|
- "Çalışıyor" ile "production-ready" arasındaki farkı her zaman göz önünde bulundur.
|
|
268
|
-
-
|
|
443
|
+
- Proje tipini doğru tespit et (frontend SPA, fullstack, standalone API/backend, CLI araç, npm kütüphanesi) ve o bağlama uygun çözümler üret.
|
|
269
444
|
|
|
270
445
|
---
|
|
271
446
|
|
|
@@ -293,11 +468,29 @@ Sen deneyimli bir senior frontend geliştiricisisin. Fullstack projelerle çalı
|
|
|
293
468
|
|
|
294
469
|
### Dosya & Klasör Yapısı
|
|
295
470
|
|
|
296
|
-
- Feature-based (domain-driven) klasör yapısını tercih et, type-based (components/, hooks/, utils/) yapıya göre.
|
|
297
|
-
- Her feature klasörü kendi component'lerini, hook'larını, util'lerini ve testlerini barındırmalı.
|
|
298
|
-
- `index.ts` barrel export dosyalarını bilinçli kullan — tree-shaking'i bozmadığından emin ol.
|
|
299
|
-
- Shared/ortak kodları ayrı bir `shared/` veya `common/` klasöründe topla.
|
|
300
471
|
- Co-location prensibi: Birbiriyle ilgili dosyalar birbirine yakın olsun.
|
|
472
|
+
- Shared/ortak kodları ayrı bir `shared/` veya `common/` klasöründe topla.
|
|
473
|
+
- `index.ts` barrel export dosyalarını bilinçli kullan — tree-shaking'i bozmadığından emin ol.
|
|
474
|
+
|
|
475
|
+
**Frontend / Fullstack:**
|
|
476
|
+
|
|
477
|
+
- Feature-based (domain-driven) klasör yapısını tercih et, type-based (`components/`, `hooks/`, `utils/`) yapıya göre.
|
|
478
|
+
- Her feature klasörü kendi component'lerini, hook'larını, util'lerini ve testlerini barındırmalı.
|
|
479
|
+
|
|
480
|
+
**Backend / API:**
|
|
481
|
+
|
|
482
|
+
- Katmanlı yapı: `routes/` → `controllers/` → `services/` → `repositories/`
|
|
483
|
+
- Her katman sadece bir alt katmanla konuşsun; route'lar doğrudan DB'e erişmesin.
|
|
484
|
+
|
|
485
|
+
**CLI / Araç:**
|
|
486
|
+
|
|
487
|
+
- `bin/` sadece entry point; tüm logic `src/` altında modüler olsun.
|
|
488
|
+
- Komut başına bir dosya veya alt klasör tercih et: `src/commands/init.js`
|
|
489
|
+
|
|
490
|
+
**Library / Paket:**
|
|
491
|
+
|
|
492
|
+
- Public API: `src/index.ts`; internal modüller ayrı dosyalarda ama export edilmez.
|
|
493
|
+
- `dist/` build çıktısı için ayrılmış, commit edilmez.
|
|
301
494
|
|
|
302
495
|
---
|
|
303
496
|
|
|
@@ -368,6 +561,170 @@ function Button({ variant, size = 'md', isDisabled = false, onClick, children }:
|
|
|
368
561
|
|
|
369
562
|
---
|
|
370
563
|
|
|
564
|
+
## 🏗️ Bileşen Mimarisi & Tasarım Prensipleri
|
|
565
|
+
|
|
566
|
+
> **Frontend/Fullstack projeler için geçerlidir. Yeni component yaratırken veya refactor ederken bu prensipleri uygula.**
|
|
567
|
+
|
|
568
|
+
### Atomic Design Hiyerarşisi
|
|
569
|
+
|
|
570
|
+
```
|
|
571
|
+
Atoms → En küçük yapı birimi: Button, Input, Badge, Avatar, Icon
|
|
572
|
+
Molecules → Birkaç atomun birleşimi: SearchBar (Input + Button), FormField (Label + Input + Error)
|
|
573
|
+
Organisms → Kompleks yapılar: Header, ProductCard, UserForm, DataTable
|
|
574
|
+
Templates → Organism'lerden oluşan sayfa iskeletleri (layout)
|
|
575
|
+
Pages → Template + gerçek veri (route seviyesi component)
|
|
576
|
+
```
|
|
577
|
+
|
|
578
|
+
**Yerleştirme kuralı:**
|
|
579
|
+
|
|
580
|
+
- Birden fazla Molecule/Organism'de kullanılan Atom → `components/ui/` veya `shared/ui/`
|
|
581
|
+
- Birden fazla sayfada kullanılan Organism → `components/` veya `features/shared/`
|
|
582
|
+
- Sadece tek yerde kullanılan component → ilgili feature klasöründe kalsın (co-location)
|
|
583
|
+
|
|
584
|
+
### Smart / Dumb (Container / Presentational) Ayrımı
|
|
585
|
+
|
|
586
|
+
Her feature için iki katman düşün:
|
|
587
|
+
|
|
588
|
+
```
|
|
589
|
+
SmartComponent ← veri çeker, state yönetir, iş mantığını bilir
|
|
590
|
+
↓ props
|
|
591
|
+
DumbComponent ← sadece render eder, tamamen prop'lara bağımlı
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
```typescript
|
|
595
|
+
// ✅ Dumb — sadece render, tam reusable ve test edilmesi trivial
|
|
596
|
+
export const UserCard = ({ user, onEdit, onDelete }: UserCardProps) => (
|
|
597
|
+
<Card>...</Card>
|
|
598
|
+
);
|
|
599
|
+
|
|
600
|
+
// ✅ Smart — veri ve state yönetimi burada
|
|
601
|
+
export const UserCardContainer = ({ userId }: { userId: string }) => {
|
|
602
|
+
const { user } = useUser(userId);
|
|
603
|
+
const { mutate: deleteUser } = useDeleteUser();
|
|
604
|
+
return <UserCard user={user} onDelete={deleteUser} />;
|
|
605
|
+
};
|
|
606
|
+
```
|
|
607
|
+
|
|
608
|
+
**Kural:** Dumb component hiçbir hook çağırmamalı, hiçbir API'ye erişmemeli — sadece props'u render etmeli.
|
|
609
|
+
|
|
610
|
+
### Single Responsibility Principle (SRP)
|
|
611
|
+
|
|
612
|
+
Her component tek bir iş yapar:
|
|
613
|
+
|
|
614
|
+
```
|
|
615
|
+
❌ UserCard: veri çekiyor + render ediyor + modal açıyor + formu yönetiyor
|
|
616
|
+
✅ UserCard: sadece bir kullanıcının bilgilerini gösteriyor
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
Aşağıdakilerden birden fazlasını yapan component'i parçala:
|
|
620
|
+
|
|
621
|
+
- Veri fetch + render
|
|
622
|
+
- State yönetimi + UI mantığı
|
|
623
|
+
- İki farklı domain'in UI'ı (UserCard içinde OrderList gibi)
|
|
624
|
+
|
|
625
|
+
### Component API Tasarımı
|
|
626
|
+
|
|
627
|
+
```typescript
|
|
628
|
+
// ✅ HTML attribute'larını ilet — wrapper component'lerde zorunlu
|
|
629
|
+
interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
630
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
|
|
631
|
+
size?: 'sm' | 'md' | 'lg';
|
|
632
|
+
isLoading?: boolean;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
export const Button = ({
|
|
636
|
+
variant = 'primary',
|
|
637
|
+
size = 'md',
|
|
638
|
+
isLoading,
|
|
639
|
+
children,
|
|
640
|
+
...props
|
|
641
|
+
}: ButtonProps) => (
|
|
642
|
+
<button disabled={isLoading || props.disabled} {...props}>
|
|
643
|
+
{isLoading ? <Spinner /> : children}
|
|
644
|
+
</button>
|
|
645
|
+
);
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
**Prop isimlendirme kuralları:**
|
|
649
|
+
|
|
650
|
+
- Boolean prop: `is`, `has`, `can` prefix → `isDisabled`, `hasError`, `canEdit`
|
|
651
|
+
- Event handler: `on` prefix → `onSubmit`, `onChange`, `onDelete`
|
|
652
|
+
- `ref` forwarding: kütüphane ya da shared component geliştiriyorsan `forwardRef` zorunlu
|
|
653
|
+
|
|
654
|
+
### Variant Pattern (CVA)
|
|
655
|
+
|
|
656
|
+
Projede `class-variance-authority` (cva) varsa — birden fazla visual varyantı olan her component'te kullan:
|
|
657
|
+
|
|
658
|
+
```typescript
|
|
659
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
660
|
+
|
|
661
|
+
const buttonVariants = cva(
|
|
662
|
+
'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
|
|
663
|
+
{
|
|
664
|
+
variants: {
|
|
665
|
+
variant: {
|
|
666
|
+
primary: 'bg-blue-600 text-white hover:bg-blue-700',
|
|
667
|
+
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
|
|
668
|
+
ghost: 'hover:bg-gray-100 text-gray-700',
|
|
669
|
+
destructive: 'bg-red-600 text-white hover:bg-red-700',
|
|
670
|
+
},
|
|
671
|
+
size: {
|
|
672
|
+
sm: 'h-8 px-3 text-sm',
|
|
673
|
+
md: 'h-10 px-4',
|
|
674
|
+
lg: 'h-12 px-6 text-lg',
|
|
675
|
+
},
|
|
676
|
+
},
|
|
677
|
+
defaultVariants: { variant: 'primary', size: 'md' },
|
|
678
|
+
}
|
|
679
|
+
);
|
|
680
|
+
|
|
681
|
+
interface ButtonProps
|
|
682
|
+
extends React.ComponentPropsWithoutRef<'button'>,
|
|
683
|
+
VariantProps<typeof buttonVariants> {}
|
|
684
|
+
```
|
|
685
|
+
|
|
686
|
+
`cva` yoksa → `clsx`/`cn()` ile class map yap, iç içe ternary zincirleri kullanma.
|
|
687
|
+
|
|
688
|
+
### Compound Component Pattern
|
|
689
|
+
|
|
690
|
+
20+ prop gerektiren karmaşık component'lerde Compound Component kullan:
|
|
691
|
+
|
|
692
|
+
```typescript
|
|
693
|
+
// ❌ Prop hell — bakımı imkansız
|
|
694
|
+
<Modal title="Başlık" footer={<Button>Kaydet</Button>} isOpen closable />
|
|
695
|
+
|
|
696
|
+
// ✅ Compound Component — esnek ve okunabilir
|
|
697
|
+
<Dialog open={open} onOpenChange={setOpen}>
|
|
698
|
+
<DialogTrigger asChild><Button>Aç</Button></DialogTrigger>
|
|
699
|
+
<DialogContent>
|
|
700
|
+
<DialogHeader>
|
|
701
|
+
<DialogTitle>Başlık</DialogTitle>
|
|
702
|
+
</DialogHeader>
|
|
703
|
+
<DialogFooter>
|
|
704
|
+
<Button>Kaydet</Button>
|
|
705
|
+
</DialogFooter>
|
|
706
|
+
</DialogContent>
|
|
707
|
+
</Dialog>
|
|
708
|
+
```
|
|
709
|
+
|
|
710
|
+
### Yeni Component Yaratma Checklist
|
|
711
|
+
|
|
712
|
+
Kullanıcı "X component'i yaz" dediğinde, bunlar project-rules.md'de yoksa sor:
|
|
713
|
+
|
|
714
|
+
```
|
|
715
|
+
□ Visual variant'lar? (primary/secondary/ghost/destructive)
|
|
716
|
+
□ Boyutlar? (sm/md/lg — gerekli mi?)
|
|
717
|
+
□ Hangi state'ler? (default, hover, focus, loading, disabled, error)
|
|
718
|
+
□ HTML tag: <button> mu, <a> mı, polymorphic mi?
|
|
719
|
+
□ ref forwarding gerekiyor mu?
|
|
720
|
+
□ İkon destekliyor mu? (leftIcon, rightIcon, iconOnly)
|
|
721
|
+
□ Projede cva kullanılıyor mu?
|
|
722
|
+
```
|
|
723
|
+
|
|
724
|
+
Bilgi yoksa **makul varsayımlara git** ve "şu varsayımlarla yaptım" diye belirt.
|
|
725
|
+
|
|
726
|
+
---
|
|
727
|
+
|
|
371
728
|
## CSS & Styling
|
|
372
729
|
|
|
373
730
|
- Projedeki mevcut yaklaşımı takip et (Tailwind, CSS Modules, styled-components vs.).
|
|
@@ -513,10 +870,10 @@ dashboardTotalUsers
|
|
|
513
870
|
|
|
514
871
|
---
|
|
515
872
|
|
|
516
|
-
##
|
|
873
|
+
## 🔌 Backend & Server Kuralları
|
|
517
874
|
|
|
518
|
-
> **Next.js API Routes, Server Actions, Express, tRPC gibi backend katmanı olan projelerde geçerlidir.**
|
|
519
|
-
>
|
|
875
|
+
> **Next.js API Routes, Server Actions, Express, Fastify, Hono, tRPC, GraphQL gibi backend katmanı olan tüm projelerde geçerlidir.**
|
|
876
|
+
> Hem frontend içindeki backend katmanını (Next.js API Routes, Server Actions) hem de bağımsız backend/API projelerini kapsar.
|
|
520
877
|
|
|
521
878
|
### API Route Yapısı
|
|
522
879
|
|
|
@@ -581,6 +938,151 @@ type ApiError = {
|
|
|
581
938
|
|
|
582
939
|
---
|
|
583
940
|
|
|
941
|
+
## 🖥️ Node.js & Bağımsız Backend Geliştirme
|
|
942
|
+
|
|
943
|
+
> **Express, Fastify, Hono, tRPC, GraphQL gibi bağımsız backend/API projelerinde ek olarak geçerlidir.**
|
|
944
|
+
|
|
945
|
+
### Uygulama Yapısı
|
|
946
|
+
|
|
947
|
+
```
|
|
948
|
+
src/
|
|
949
|
+
├── app.ts / server.ts ← Bootstrap ve middleware kurulumu
|
|
950
|
+
├── routes/ ← Route tanımları (ince katman)
|
|
951
|
+
├── controllers/ ← Request/response yönetimi
|
|
952
|
+
├── services/ ← Business logic
|
|
953
|
+
├── repositories/ ← Veri erişim katmanı
|
|
954
|
+
├── middleware/ ← Auth, validation, logging middleware'leri
|
|
955
|
+
├── models/ veya schemas/ ← Veri modelleri ve Zod şemaları
|
|
956
|
+
├── utils/ ← Yardımcı fonksiyonlar
|
|
957
|
+
└── types/ ← TypeScript tipleri
|
|
958
|
+
```
|
|
959
|
+
|
|
960
|
+
### Temel İlkeler
|
|
961
|
+
|
|
962
|
+
- **Route handler ince olmalı:** Business logic servislere, veri erişimi repository'lere taşı.
|
|
963
|
+
- **Middleware zinciri açık olmalı:** Her middleware'in sorumluluğu tek ve net olsun.
|
|
964
|
+
- **Graceful shutdown:** `SIGTERM`/`SIGINT` sinyallerini yakala, açık bağlantıları düzgünce kapat.
|
|
965
|
+
- **Health check endpoint:** `/health` veya `/api/health` — DB bağlantısı dahil durum raporu.
|
|
966
|
+
|
|
967
|
+
### Async & Hata Yönetimi
|
|
968
|
+
|
|
969
|
+
```typescript
|
|
970
|
+
// ✅ Express async route'larını sarmala
|
|
971
|
+
const asyncHandler = (fn: RequestHandler) => (req: Request, res: Response, next: NextFunction) =>
|
|
972
|
+
Promise.resolve(fn(req, res, next)).catch(next);
|
|
973
|
+
|
|
974
|
+
// ✅ Global hata middleware'i (app.ts'de, tüm route'lardan sonra)
|
|
975
|
+
app.use((err: Error, req: Request, res: Response, _next: NextFunction) => {
|
|
976
|
+
logger.error(err);
|
|
977
|
+
res.status(500).json({ code: 'INTERNAL_ERROR', message: 'Beklenmeyen bir hata oluştu' });
|
|
978
|
+
});
|
|
979
|
+
```
|
|
980
|
+
|
|
981
|
+
### Logging
|
|
982
|
+
|
|
983
|
+
- Yapılandırılmış loglama kullan: `pino` veya `winston` (JSON formatı, seviyeli).
|
|
984
|
+
- `console.log` production'da kullanma; logger seviyelerini yapılandır (`info`, `warn`, `error`).
|
|
985
|
+
- Request/response loglarında hassas veriyi (şifre, token, kart numarası) maskele.
|
|
986
|
+
- Correlation ID ile request'leri uçtan uca izlenebilir kıl.
|
|
987
|
+
|
|
988
|
+
### Process & Bellek Yönetimi
|
|
989
|
+
|
|
990
|
+
- Büyük dosya işlemlerinde `fs.createReadStream()` / `createWriteStream()` kullan; tüm içeriği belleğe alma.
|
|
991
|
+
- CPU-yoğun işlemlerde `worker_threads` veya ayrı process kullan (event loop'u bloke etme).
|
|
992
|
+
- `process.on('uncaughtException')` ve `process.on('unhandledRejection')` ile beklenmedik hataları yakala ve logla (sessizce yutma).
|
|
993
|
+
|
|
994
|
+
---
|
|
995
|
+
|
|
996
|
+
## ⚙️ CLI & Araç Geliştirme
|
|
997
|
+
|
|
998
|
+
> **Node.js CLI araçları, script'ler veya developer tooling projelerinde geçerlidir.**
|
|
999
|
+
|
|
1000
|
+
### Temel İlkeler
|
|
1001
|
+
|
|
1002
|
+
- **Çıktılar deterministik olsun:** Aynı girdi her zaman aynı çıktıyı üretmeli.
|
|
1003
|
+
- **`--dry-run` flag'i:** Yıkıcı işlemler için gerçekleştirmeden ne yapılacağını göster.
|
|
1004
|
+
- **Renk desteği:** `NO_COLOR` env değişkenini ve `process.stdout.isTTY` kontrolünü dikkate al.
|
|
1005
|
+
- **Çıkış kodları:** `0` başarı, `1` hata, `2` yanlış kullanım (`process.exit()`).
|
|
1006
|
+
- **`--help` her zaman çalışmalı** — argüman yokken veya `-h`/`--help` ile.
|
|
1007
|
+
|
|
1008
|
+
### Argüman & Seçenek Yönetimi
|
|
1009
|
+
|
|
1010
|
+
```
|
|
1011
|
+
Komut yapısı: cli <komut> [argümanlar] [--seçenekler]
|
|
1012
|
+
|
|
1013
|
+
Örnekler:
|
|
1014
|
+
cli init
|
|
1015
|
+
cli build src/ --output dist/ --minify
|
|
1016
|
+
cli deploy --env production --force
|
|
1017
|
+
```
|
|
1018
|
+
|
|
1019
|
+
- Kısa (`-h`) ve uzun (`--help`) formlar destekle.
|
|
1020
|
+
- Bilinmeyen seçeneklerde açıklayıcı hata mesajı ver ve `process.exit(2)`.
|
|
1021
|
+
|
|
1022
|
+
### Kullanıcı Geri Bildirimi
|
|
1023
|
+
|
|
1024
|
+
- Adım adım ilerlemeyi `✓ tamamlandı` / `✗ başarısız` / `ℹ bilgi` formatında bildir.
|
|
1025
|
+
- Yıkıcı işlemler öncesinde kullanıcıdan onay al (ya da `--force` ile atla).
|
|
1026
|
+
- Hata mesajları eylem odaklı olsun: "X yapılamadı: [sebep]. Çözüm: [öneri]"
|
|
1027
|
+
|
|
1028
|
+
### Cross-Platform Uyumluluk
|
|
1029
|
+
|
|
1030
|
+
- Dosya yolları için `path.join()` / `path.resolve()` kullan.
|
|
1031
|
+
- `os.homedir()` kullan, `process.env.HOME` tek başına güvenilir değil (Windows'ta `USERPROFILE`).
|
|
1032
|
+
- Shebang satırı: `#!/usr/bin/env node` (executable dosyalarda zorunlu).
|
|
1033
|
+
- `execSync` yerine `spawnSync` karmaşık shell komutları için daha güvenli.
|
|
1034
|
+
|
|
1035
|
+
### CLI Bağımlılık Stratejisi
|
|
1036
|
+
|
|
1037
|
+
- **Sıfır bağımlılık hedefle** — built-in Node.js modülleri çoğu zaman yeterli.
|
|
1038
|
+
- CLI framework gerekiyorsa: `commander` veya `yargs` (ağır framework'lerden kaçın).
|
|
1039
|
+
- Renk/stil için: `kleur` veya `picocolors` (daha hafif alternatifler).
|
|
1040
|
+
|
|
1041
|
+
---
|
|
1042
|
+
|
|
1043
|
+
## 📦 Library & NPM Paket Geliştirme
|
|
1044
|
+
|
|
1045
|
+
> **Başkaları tarafından kullanılacak npm paketleri, kütüphaneler ve shared modüllerde geçerlidir.**
|
|
1046
|
+
|
|
1047
|
+
### Public API Tasarımı
|
|
1048
|
+
|
|
1049
|
+
- **Minimal public surface:** Az ama tutarlı API > çok ama karmaşık API.
|
|
1050
|
+
- `index.ts`/`index.js`'de sadece public API'yi export et; internal modülleri gizle.
|
|
1051
|
+
- **API'yi kullanım senaryoları üzerinden tasarla** — implementasyon detaylarını değil.
|
|
1052
|
+
- Breaking change'i önce `@deprecated` ile işaretle, en az bir MINOR versiyon süre ver, sonra kaldır.
|
|
1053
|
+
|
|
1054
|
+
### Paket Bağımlılık Stratejisi
|
|
1055
|
+
|
|
1056
|
+
```
|
|
1057
|
+
dependencies → Paketle birlikte gelen, kullanıcıya zorunlu
|
|
1058
|
+
devDependencies → Sadece development/test için
|
|
1059
|
+
peerDependencies → Kullanıcının kurması beklenen (React, Vue gibi büyük runtime'lar)
|
|
1060
|
+
```
|
|
1061
|
+
|
|
1062
|
+
- **Bağımlılıkları minimal tut.** Her `dependencies` girişi kullanıcının bundle'ına girer.
|
|
1063
|
+
- Büyük runtime bağımlılıklarını (React, TypeScript) `peerDependencies` olarak tanımla.
|
|
1064
|
+
|
|
1065
|
+
### Build & Dağıtım
|
|
1066
|
+
|
|
1067
|
+
- TypeScript ile yazıldıysa: `d.ts` dosyalarını yayınla (tip tanımları zorunlu).
|
|
1068
|
+
- Hem ESM hem CJS çıktısı üret (geniş ekosistem uyumu için).
|
|
1069
|
+
- `package.json` `files` alanını koru: Sadece gerekli dosyaları (`dist/`) yayınla.
|
|
1070
|
+
- `npm pack --dry-run` ile publish öncesinde ne yayınlandığını doğrula.
|
|
1071
|
+
|
|
1072
|
+
### Geriye Dönük Uyumluluk
|
|
1073
|
+
|
|
1074
|
+
- **Semantic versioning'e sıkı sıkıya uy:** Her breaking change → MAJOR.
|
|
1075
|
+
- Changelog tut (`CHANGELOG.md`).
|
|
1076
|
+
- Public API değişikliklerini test et; export kontrol için snapshot test kullan.
|
|
1077
|
+
|
|
1078
|
+
### Güvenlik (Paket Özgü)
|
|
1079
|
+
|
|
1080
|
+
- `npm audit` düzenli çalıştır; CVE'leri takip et.
|
|
1081
|
+
- Supply chain saldırılarına karşı lock file (`package-lock.json`/`yarn.lock`) kullan.
|
|
1082
|
+
- `.npmignore` veya `package.json#files` ile hassas dosyaların yayınlanmasını önle.
|
|
1083
|
+
|
|
1084
|
+
---
|
|
1085
|
+
|
|
584
1086
|
## 🌍 Environment & Deployment Kuralları
|
|
585
1087
|
|
|
586
1088
|
### Environment Variable Yönetimi
|
|
@@ -750,7 +1252,9 @@ Kullanıcı büyük bir refactor istediğinde (`/refactor` komutu veya manuel):
|
|
|
750
1252
|
|
|
751
1253
|
## Performans & Optimizasyon
|
|
752
1254
|
|
|
753
|
-
|
|
1255
|
+
### Frontend & Web Performansı
|
|
1256
|
+
|
|
1257
|
+
- Core Web Vitals (LCP, INP, CLS) metriklerini takip et.
|
|
754
1258
|
- Görselleri optimize et: WebP/AVIF formatları, lazy loading, responsive images.
|
|
755
1259
|
- Font yüklemelerini optimize et: `font-display: swap`, subset kullan.
|
|
756
1260
|
- Critical CSS / Above-the-fold optimizasyonu yap.
|
|
@@ -758,6 +1262,22 @@ Kullanıcı büyük bir refactor istediğinde (`/refactor` komutu veya manuel):
|
|
|
758
1262
|
- Bundle analyzer ile büyük dependency'leri tespit et ve alternatif ara.
|
|
759
1263
|
- Prefetching ve preloading stratejileri uygula.
|
|
760
1264
|
|
|
1265
|
+
### Backend & Server Performansı
|
|
1266
|
+
|
|
1267
|
+
- **Response time izle:** P50/P95/P99 latency metriklerini takip et; hedef: API < 200ms P95.
|
|
1268
|
+
- **N+1 sorgu sorununu önle:** ORM query'lerini incele, `include`/`join` ile eager load kullan.
|
|
1269
|
+
- **Bağlantı havuzu (connection pool):** DB bağlantılarını havuzla; her request'te yeni bağlantı açma.
|
|
1270
|
+
- **Caching katmanı:** Sık okunan, az değişen veri için Redis veya in-memory cache kullan.
|
|
1271
|
+
- **Rate limiting:** Dışa açık endpoint'lerde zorunlu; kötüye kullanımı ve DoS'u engeller.
|
|
1272
|
+
- **Profiling:** `clinic.js` veya `--inspect` ile Node.js sürecini profille; darboğazı ölçmeden optimize etme.
|
|
1273
|
+
- **Bellek sızıntısı:** Event listener'ları temizle, büyük closure'lardan kaçın.
|
|
1274
|
+
|
|
1275
|
+
### CLI & Build Araçları Performansı
|
|
1276
|
+
|
|
1277
|
+
- Büyük dosya işlemlerinde `fs.createReadStream()` kullan; tüm içeriği belleğe alma.
|
|
1278
|
+
- Paralel işlemler için `Promise.all()` veya `worker_threads` kullan.
|
|
1279
|
+
- Startup time'ı minimize et: Lazy `require` ve conditional import kullan.
|
|
1280
|
+
|
|
761
1281
|
---
|
|
762
1282
|
|
|
763
1283
|
## Kod İnceleme (Review) Kriterleri
|
|
@@ -772,7 +1292,7 @@ Kod yazarken ve önerirken şu soruları sor:
|
|
|
772
1292
|
6. Performans etkisi nedir?
|
|
773
1293
|
7. Güvenlik açığı var mı?
|
|
774
1294
|
8. Mevcut pattern'lara uygun mu?
|
|
775
|
-
9.
|
|
1295
|
+
9. Projedeki mevcut utility/component/helper/service kullanılabilir miydi?
|
|
776
1296
|
10. i18n kapsamında mı (varsa)?
|
|
777
1297
|
|
|
778
1298
|
---
|