Component Library Spec

---
description: Create a component library spec with structured process, quality checks, and system integration
---

# Component Library Spec

## Amaç

Eyleme dönüştürülebilir, ölçülebilir sonuçlar sunan kapsamlı bir component library spec oluşturun. Bu beceri, her seferinde profesyonel düzeyde çıktı sağlayan, kalite doğrulamalı yapılandırılmış bir süreç sunar.

**Kategori**: Tasarım ve Yaratıcılık & Creative

## Girdiler

### Zorunlu
- **Hedef**: Bu çıktı ile neyi başarmak istiyorsunuz
- **Bağlam**: İlgili arka plan bilgileri

### İsteğe Bağlı
- **Kısıtlamalar**: Dikkate alınması gereken sınırlamalar veya gereksinimler
- **Mevcut Çalışma**: Üzerine inşa edilecek önceki belgeler veya veriler

## Sistem Bağlamı

Başlamadan önce:
- Mevcut proje bağlamı ve öncelikleri için `memory.md`'yi oku
- İlgili öğrenilmiş kurallar veya kısıtlamalar için `knowledge-base.md`'yi kontrol et
- Projedeki mevcut ilgili belgeleri gözden geçir
- Bu çıktı ile ilgili `.claude/workspace/TaskBoard.md`'deki aktif görevleri not et

## Süreç

### Adım 1: Bağlam ve Araştırma
- Projedeki mevcut component library spec belgelerini gözden geçir
- İlgili öğrenilmiş kurallar veya kısıtlamalar için `knowledge-base.md`'yi kontrol et
- Mevcut proje bağlamı ve öncelikleri için `memory.md`'yi kontrol et
- Kilit paydaşları ve gereksinimlerini belirle
- En uygun çerçeveyi seç: Design Thinking (5 stages), Double Diamond, Atomic Design

### Adım 2: Analiz ve Çerçeve Uygulaması
- component library spec yapılandırmak için seçilen çerçeveyi uygula
- Boşlukları, fırsatları ve riskleri belirle
- Başarı metriklerini tanımla: Task Completion Rate, Time on Task, Error Rate, System Usability Scale (SUS)
- Varsayımları ve bağımlılıkları belgele
- Yaklaşımı sektör en iyi uygulamalarına göre doğrula

### Adım 3: Çıktıyı Oluştur
- component library spec aşağıdaki çıktı formatını kullanarak yapılandır
- Genel tavsiyeler değil, spesifik ve eyleme dönüştürülebilir öneriler ekle
- Uygulanabilir yerlerde somut rakamlar, zaman çizelgeleri ve kıyaslamalar ekle
- Tutarlılık için mevcut proje belgeleriyle çapraz referans yap
- Her bölümün değer kattığından emin ol — dolgu içeriği çıkar

### Adım 4: Kalite Doğrulama
- [ ] Tüm zorunlu girdiler ele alındı
- [ ] Öneriler spesifik ve eyleme dönüştürülebilir (belirsiz değil)
- [ ] Rakamlar ve kıyaslamalar gerçekçi ve kaynaklı
- [ ] Çıktı formatı aşağıdaki spesifikasyona uyuyor
- [ ] Bilgi tabanı kurallarıyla çelişki yok
- [ ] En iyi pratiği izliyor: Start with user research, not aesthetics

## Çıktı Formatı

```markdown
# Component Library Spec

## Yönetici Özeti
[Çıktının ve temel önerilerin 2-3 cümlelik özeti]

## Bağlam ve Hedefler
- **Hedef**: [Bunun neyi başardığı]
- **Hedef Kitle**: [Bunun kimin için olduğu]
- **Zaman Çizelgesi**: [Bunun ne zaman geçerli olduğu]

## Analiz
[Seçilen çerçeve kullanılarak yapılandırılmış analiz]

## Öneriler
1. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
2. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]
3. [Beklenen etkisiyle spesifik, eyleme dönüştürülebilir öneri]

## Uygulama
| Eylem | Sorumlu | Zaman Çizelgesi | Öncelik |
|--------|-------|----------|----------|
| [Eylem maddesi] | [Kim] | [Ne zaman] | [Yüksek/Orta/Düşük] |

## Başarı Metrikleri
| Metrik | Mevcut | Hedef | Ölçüm Yöntemi |
|--------|---------|--------|-------------------|
| [KPI] | [Başlangıç] | [Hedef] | [Nasıl ölçülür] |

## Riskler ve Azaltmalar
| Risk | Olasılık | Etki | Azaltma |
|------|-----------|--------|------------|
| [Risk] | [Y/O/D] | [Y/O/D] | [Eylem] |

## Sonraki Adımlar
- [ ] [Hemen yapılacak eylem]
- [ ] [Takip eylemi]
- [ ] [Gözden geçirme tarihi]
```

## Uygulanabilir Çerçeveler
- Design Thinking (5 stages)
- Double Diamond
- Atomic Design
- Design Sprint
- Material Design / Human Interface Guidelines
- WCAG 2.1 AA

## Temel Metrikler
- Task Completion Rate
- Time on Task
- Error Rate
- System Usability Scale (SUS)
- Accessibility Score
- Design System Adoption Rate

## En İyi Pratikler
- Start with user research, not aesthetics
- Maintain a living design system
- Test with 5 users to find 85% of usability issues
- Accessibility is not optional — design for it from day one
- Document design decisions and rationale

## Tamamlandıktan Sonra

- Bu çıktı proje bağlamını veya önceliklerini değiştiriyorsa `memory.md`'yi güncelle
- Yeniden kullanılabilir öğrenmeleri `knowledge-nominations.md`'ye ekle
- Takip eylemleri belirlendiyse bunları `.claude/workspace/TaskBoard.md`'ye ekle
- Ek çalışma gerekiyorsa ilgili skill'leri öner