Imported from COBBANI/BETA-ART-PRIVAT (.claude/skills/on-brand/SKILL.md). Install upstream with npx skills add COBBANI/BETA-ART-PRIVAT --skill on-brand. Copyright stays with the author.

on-brand — QBLOGG marka denetçisi

Bu beceri bir üretim yöntemi değil, bir kapıdır: bu depoda üretilen her görsel çıktı (HTML/CSS) ve her metin çıktısı (blog, pazarlama, arayüz metni) buradan geçer. Kaynağı depodaki dört belge — docs/tasarim-sistemi.md, docs/figma-tasarim-kurallari.md, docs/konsept.md, .claude/skills/qblogg-blog-yazisi/SKILL.md — ve CLAUDE.md "Değişmez kurallar" 4/5/7. Çelişkide CLAUDE.md kazanır.

Neden bir kapı, bir kılavuz değil

Kural yazılı olması onun uygulanacağı anlamına gelmez. Bir bileşen isteği geldiğinde model "biraz mavi" ya da "ince bir vurgu rengi" gibi doğal dilden doğrudan hex üretme eğilimindedir — kural okunmuş olsa bile. Bu yüzden bu beceri iki parçadan oluşur: aşağıdaki kurallar (ne aranacak) ve Teslimden önce bölümündeki kontrol listesi (üretilen çıktının kendisine karşı çalıştırılan bir denetim). Kural olmadan kontrol listesi kördür, kontrol listesi olmadan kural unutulur.

1. Renk belirteçleri

Tek kaynak: assets/css/main.css → :root (açık) ve html[data-theme="dark"] (koyu). Kaynak: docs/tasarim-sistemi.md §1.

--bg / --bg-soft / --bg-card          /* zeminler */
--text / --text-muted / --border      /* metin ve çizgiler */
--brand: #082C54                      /* Midnight Navy — koyu temada #00D8C2'ye döner */
--brand-2: #00D8C2                    /* Electric Aqua — YALNIZCA vurgu/dekor, METİNDE ASLA */
--brand-2-ink: #0a7d72                /* aqua niyetli METİN rengi, beyazda 5,0:1 */
--on-brand / --logo-ink / --brand-soft / --danger

Kural: Ham hex/rgb yazılmaz — her zaman var(--…). --line diye bir belirteç yok, kenarlık her zaman --border.

Aqua tuzağı (en sık ihlal): #00D8C2 beyaz zeminde 1,9:1 kontrast verir — WCAG AA'nın (4,5:1) çok altında. Aqua'yı metin rengi, link rengi veya ikon rengi olarak kullanan her istek reddedilir; var(--brand-2-ink) önerilir. Koyu temada bu ayrım kalkar (--brand-2-ink: var(--brand-2)).

2. Tipografi

Sekiz basamak, kaynak: docs/tasarim-sistemi.md §1 / figma-tasarim-kurallari.md §1.

--fs-2xs .76rem  --fs-xs .8rem  --fs-sm .85rem  --fs-md .92rem
--fs-base .95rem --fs-lg 1rem   --fs-xl 1.12rem --fs-logo 1.16rem  (yalnız logo)

Kural: Ham rem/px font-size yazılmaz — en yakın basamağa yuvarlanır. İstisna: başlıkların clamp() değerleri, em cinsinden göreli boyutlar (ilk harf, code). Font ailesi her zaman var(--font) (Inter + sistem yığını); Google Fonts veya başka bir CDN bağlantısı asla kabul edilmez (GDPR gerekçesi docs/tasarim-sistemi.md §4'te kayıtlı).

3. Boşluk, radius, bileşen sınıfları

--radius: 16px   --radius-sm: 10px   --maxw: 1140px

Bileşen çatısı yok; tekrar eden sınıf adları kaynaktır (figma-tasarim-kurallari.md §2): .btn/.btn--primary/.btn--ghost, .card, .plan, .section/.section--soft, .wrap, .tag/.chip, .field, .article-body. Yeni bir bileşen isteniyorsa önce bu listede karşılığı olup olmadığına bakılır; yoksa yeni sınıf bu adlandırma diliyle (kısa, anlamsal, Türkçe-İngilizce karışık) türetilir — utility-first (Tailwind vb.) sınıf üretilmez, çatı/derleme adımı önerilmez.

Kesme noktaları sabit dörtlü: 1180px, 860px, 620px, 360px (hepsi max-width). Yeni bir kesme noktası önerilmeden önce bu dördüne oturmayı dener.

4. İkon kuralı

CLAUDE.md kural 4, docs/tasarim-sistemi.md §5. Emoji her zaman reddedilir — işletim sistemine göre üç farklı görünüm verir, marka görsel kontrolünü kaybeder. İstisna: → ↑ ☾ ☀ gibi tek renkli, yazı tipiyle çizilen ok/tema işaretleri (bunlar ikon değil, karakterdir).

Her ikon satır içi SVG:

24×24 ızgara · fill="none" · stroke="currentColor" · stroke-width="1.7" ·
stroke-linecap/linejoin="round"

Yazı ikonu isteniyorsa önce assets/js/app.js → ICONS kaydına bakılır (mevcut adlar: question, coin, blocks, phone, banknote, compass, bulb, chart, envelope, link, gear, linkedin, x, facebook, whatsapp); karşılığı yoksa aynı çizim kuralına uyan yeni bir yol tanımlanır, sabit renk yazılmaz (currentColor zorunlu — ikon tema değişince kendiliğinden döner).

5. RTL ve erişilebilirlik

Yön bağımlı CSS özelliği yazılmaz: margin-left/right yerine margin-inline-start/end, left/right yerine inset-inline-start/end, text-align:left yerine text-align:start. Yeni bir bölüm üretildiğinde Arapça (dir="rtl") gözden geçirilir. Dokunma hedefi ≥44px, gövde metni kontrastı ≥4,5:1, :focus-visible halkası korunur.

6. Metin: sözlükten gelir, gömülmez

CLAUDE.md kural 3. Sitede görünen her metin data-i18n (veya data-i18n-attr/title/content) ile i18n.js sözlüğünden gelir; HTML'e tek dilde metin gömmek en sık yapılan hatadır. Bir sayfa/bileşen isteği geldiğinde önce anahtar on dile birden açılır (tr, en, zh, hi, es, ar, fr, pt, ru, no) — dokuz dili "sonra eklerim" diye ertelemek, bu beceri kapsamında bir ihlaldir.

7. Ses ve içerik kuralları

Kaynak: docs/konsept.md ("uydurma yasağı"), qblogg-blog-yazisi/SKILL.md. Bu kurallar HTML/CSS'e değil, her metne (blog, pazarlama kopyası, brief e-postası, arayüz mikro-metni) uygulanır.

Kural	Anlamı
Uydurma yasak	Doğrulanmamış istatistik, müşteri hikâyesi, kurum şartı yazılmaz. Kaynağı olmayan iddia = yazılmaz, atlanır.
Rakamlar örnek işaretlenir	Fiyat/ücret/oran gibi sayılar "örnek başlangıç fiyatıdır" gibi bir ibareyle bağlamlandırılır; kesin vaat gibi sunulmaz.
Kaynak zorunluluğu	Para/kariyer konularında en az üç kaynak. Adresi doğrulanmamış kaynak uydurma bağlantıyla değil, adıyla ve `nu` gerekçesiyle yazılır.
Somut, genelin önüne geçer	Bir gerçek örnek, beş sıfattan iyidir. Soyut övgü ("lider", "devrimci", "en iyi") yerine ölçülebilir/somut ifade.
Abartı yok	"Kesinlikle", "garantili", "anında" gibi kesin-vaat dili; pazarlama metninde bile kullanılmaz — bu işte en pahalı hata olarak kayıtlı (CLAUDE.md kural 8).

Reddetme protokolü

Bir istek yukarıdaki kurallardan birini ihlal eden bir çıktı üretmeyi gerektiriyorsa (ör. "aqua renkte bir başlık yaz", "buraya bir emoji koy", "bu istatistiği kaynaksız ekle", "%40 artış garantisi yazalım"):

Sessizce uyma. İstenen hâliyle üretme.
Tek satır gerekçe ver — hangi kural, neden. Uzun ders verme.
Marka içi alternatifi hemen sun — reddetmek tek başına yardımcı değildir, aynı niyeti karşılayan uygun karşılığı üretip devam et.

Örnek:

İstek: "Fiyat kartının başlığını aqua (#00D8C2) yap." Yanıt: Reddediyorum — aqua beyaz zeminde 1,9:1 kontrast, metinde kullanılamaz (tasarim-sistemi.md §1). Bunun yerine var(--brand-2-ink) kullandım — aynı aile, 5,0:1 kontrast, aynı vurgu hissini veriyor.

İstek: "Bu yazıya '%300 büyüme sağladık' cümlesini ekle." Yanıt: Reddediyorum — kaynaksız/uydurma istatistik (konsept.md, uydurma yasağı). Elimde bu iddiayı destekleyecek ölçülü bir veri yok; ya gerçek bir kaynak/rakam verin ya da cümleyi somut ama doğrulanabilir bir ifadeyle ("kendi yayın hattımızda X hafta içinde Y" gibi, gerçek Y verildiğinde) değiştireyim.

Kural gerçekten belirsizse (yeni bir renk/durum kombinasyonu, sınırdaki bir kontrast) reddetmek yerine önce hesapla/ölç, sonra karar ver — tahmin etmek de bir tür uydurmadır.

Teslimden önce — kontrol listesi

Üretilen HTML/CSS veya metni teslim etmeden önce, gerçekten üretilen çıktının kendisine karşı bu listeyi çalıştır (kafanda değil, çıktıyı yeniden okuyarak):

Listedeki bir madde işaretlenemiyorsa (yani ihlal varsa) teslim etme — reddetme protokolünü uygula ve düzelterek teslim et.

Kapsam dışı

Bu beceri renk/tipografi/boşluk/ikon/ses kurallarını uygular. Marka varlıklarının (logo, favicon) üretimi ayrı bir iştir — scripts/marka-uret.py ve docs/logo-sistemi.md konusudur, elle SVG/PNG çizilmez; bu beceri yalnızca üretilmiş varlıkların kullanımını (ör. --logo-ink) denetler. Marka tescili/hukuki konular docs/marka-tescili.md'dedir, bu beceri kapsamında değildir.

on-brand

About