Çizgi
Zaman içindeki değişimi gösterir.
Arayüz & Tasarım
Claude'a arayüz yaptırırken elinin altında olması gereken referanslar: stiller canlı örnekle, paletler kopyalanabilir kodla, font eşleşmeleri gerçek yazıyla.
Karta tıkla, arkasındaki hazır prompt'u kopyala.
Çizgi
Render this data as a çizgi chart using Recharts.
Use when: A continuous measure tracked over time.
Avoid when: Comparing across categories — use bars.
Accessibility: Color must not be the only cue; add line dashes or markers.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Çubuk
Kategorileri büyüklüğe göre karşılaştırır.
- Kullan
- Az sayıda kategori arasında fark gösteriyorsan.
- Kaçın
- Kategori sayısı 12'yi geçiyorsa — sıralı liste daha okunur.
- Erişilebilirlik
- Ekseni sıfırdan başlat, yoksa fark abartılır.
RechartsChart.js
Çubuk
Render this data as a çubuk chart using Recharts.
Use when: Showing difference between a small number of categories.
Avoid when: More than 12 categories — a ranked list reads better.
Accessibility: Start the axis at zero, otherwise the difference is exaggerated.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Yığılmış Çubuk
Toplamı ve bileşenlerini birlikte gösterir.
- Kullan
- Hem toplam hem parça oranı önemliyse.
- Kaçın
- Parçaları birbirleriyle karşılaştırman gerekiyorsa — gruplu çubuk kullan.
- Erişilebilirlik
- En fazla 4-5 seri; fazlası okunmaz.
RechartsChart.js
Yığılmış Çubuk
Render this data as a yığılmış çubuk chart using Recharts.
Use when: Both the total and the share of parts matter.
Avoid when: You need to compare parts against each other — use grouped bars.
Accessibility: At most 4-5 series; more becomes unreadable.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Alan
Hacim hissi veren çizgi grafiği.
- Kullan
- Büyüklüğün zamanla birikimini vurguluyorsan.
- Kaçın
- Birden çok seri üst üste biniyorsa — çizgiye dön.
- Erişilebilirlik
- Saydamlık kullan, alttaki seri kaybolmasın.
RechartsD3
Alan
Render this data as a alan chart using Recharts.
Use when: Emphasizing accumulation of a magnitude over time.
Avoid when: Multiple series overlap — go back to lines.
Accessibility: Use transparency so the series behind stays visible.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Pasta
Bütünün parçalarını oran olarak gösterir.
- Kullan
- En fazla 3-4 dilim varsa ve toplam %100 ise.
- Kaçın
- Dilimler yakın büyüklükteyse — göz farkı ayırt edemez.
- Erişilebilirlik
- Yüzdeyi dilimin üstüne yaz, sadece renge güvenme.
Chart.jsRecharts
Pasta
Render this data as a pasta chart using Chart.js.
Use when: At most 3-4 slices and the total is 100%.
Avoid when: Slices are close in size — the eye cannot tell them apart.
Accessibility: Write the percentage on the slice; do not rely on color alone.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Halka
Ortasında toplam gösterilebilen pasta.
- Kullan
- Tek bir ana sayıyı ve dağılımını birlikte veriyorsan.
- Kaçın
- Pasta için geçerli sınırlar burada da geçerli.
- Erişilebilirlik
- Merkezdeki sayı ekran okuyucuya da verilmeli.
Chart.jsRecharts
Halka
Render this data as a halka chart using Chart.js.
Use when: You show one headline number plus its breakdown.
Avoid when: Same limits as the pie chart apply here.
Accessibility: The center number must also reach screen readers.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Isı Haritası
İki boyutlu yoğunluğu renkle gösterir.
- Kullan
- Gün × saat, kategori × kategori gibi matrislerde.
- Kaçın
- Kesin değer okunması gerekiyorsa — tablo kullan.
- Erişilebilirlik
- Renk körlüğüne dayanıklı sıralı palet seç (viridis gibi).
D3Nivo
Isı Haritası
Render this data as a isı haritası chart using D3.
Use when: Matrices like day x hour or category x category.
Avoid when: Exact values must be read — use a table.
Accessibility: Pick a colorblind-safe sequential palette such as viridis.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Dağılım
İki değişken arasındaki ilişkiyi gösterir.
- Kullan
- Korelasyon veya kümelenme arıyorsan.
- Kaçın
- Nokta sayısı çok azsa anlam çıkmaz.
- Erişilebilirlik
- Nokta şeklini de seriye göre değiştir.
D3Recharts
Dağılım
Render this data as a dağılım chart using D3.
Use when: Looking for correlation or clustering.
Avoid when: Too few points to show a pattern.
Accessibility: Vary point shape by series, not only color.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Mini Grafik
Satır içinde eğilim gösteren küçük çizgi.
- Kullan
- Tablo satırında veya kartta yer darsa.
- Kaçın
- Kesin değer gerekiyorsa — sayıyı yanına yaz.
- Erişilebilirlik
- Eksen yok; mutlaka sayısal karşılığı da göster.
RechartsSVG
Mini Grafik
Render this data as a mini grafik chart using Recharts.
Use when: Space is tight, inside a table row or a card.
Avoid when: An exact value is needed — put the number next to it.
Accessibility: No axes; always show the numeric value alongside.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Huni
Aşamalar arası dönüşüm kaybını gösterir.
- Kullan
- Sıralı bir akışta her adımda kaç kişi kaldığını anlatıyorsan.
- Kaçın
- Adımlar sıralı değilse yanıltıcı olur.
- Erişilebilirlik
- Her aşamada hem sayı hem oran yaz.
RechartsD3
Huni
Render this data as a huni chart using Recharts.
Use when: Showing how many remain at each step of an ordered flow.
Avoid when: The steps are not ordered — it misleads.
Accessibility: Write both the count and the rate at every stage.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Gösterge
Tek bir değeri hedefe göre konumlandırır.
- Kullan
- Bir eşiğe ne kadar yaklaşıldığını gösteriyorsan.
- Kaçın
- Birden çok metrik varsa — yerine sayı kartları kullan.
- Erişilebilirlik
- Yeşil/kırmızı tek başına yeterli değil, etiket ekle.
Chart.jsD3
Gösterge
Render this data as a gösterge chart using Chart.js.
Use when: Showing how close a value is to a threshold.
Avoid when: Several metrics at once — use stat tiles instead.
Accessibility: Green/red alone is not enough; add a label.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Tablo
Grafik değil ama çoğu zaman doğru cevap.
- Kullan
- Kesin değerler karşılaştırılacaksa veya seri sayısı fazlaysa.
- Kaçın
- Eğilim anlatıyorsan — grafik daha hızlı okunur.
- Erişilebilirlik
- Sütun başlıklarını th ve scope ile işaretle.
TanStack TableHTML
Tablo
Render this data as a tablo chart using TanStack Table.
Use when: Exact values are compared or there are many series.
Avoid when: You are telling a trend — a chart reads faster.
Accessibility: Mark column headers with th and scope.
Rules:
- Label axes with units; never leave a bare number scale.
- Provide a text alternative (caption or table) conveying the same finding.
- Pick colors from the project palette; do not use the library's default rainbow.Arayüz işi yapan skill ve subagent'ları arıyorsan: kütüphanedeki UI kaynakları →