本文へ移動
cccskills
無料GitHub で公開

brand-identity

Voice framework, visual identity standards, color palette management, typography specs, brand consistency

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Brand Identity

Marka kimligini olusturma ve koruma rehberi. Tutarlilik her seydir.

Voice Framework

Voice vs Tone

KavramTanimOrnek
VoiceMarkanin kalici kisilik ozellikleri"Profesyonel ama samimi"
ToneDuruma gore degisen ifade bicimiHata mesajinda: empatik, basaride: kutlamaci

Personality Traits Matrisi

Markanin 4 eksenini tanimla:

EksenSol UcSag UcSenin Pozisyon (1-5)
FormaliteResmi, kurumsalSamimi, konusma dili?
EnerjiSakin, olculuHeyecanli, enerjik?
MizahCiddi, agirbasliEglenceli, espirili?
TeknikBasit, herkes icinUzman, teknik dil?

Voice Checklist

  • 3-5 kelimelik voice tanimi var (orn: "Guvenilir, samimi, net")
  • Her voice ozelliginin "yapma" karsiligi var
  • Ornek cumleler var (ana sayfa, hata mesaji, onboarding)
  • Tone varyasyonlari tanimli (basari, hata, bekleme, bilgi)

Visual Identity Standards

Logo Kullanim Kurallari

KuralDetay
Clear spaceLogo etrafinda min logo yuksekligi kadar bosluk
Min boyutDijitalde min 24px yukseklik
Arka planHangi renklerde kullanilabilir, hangilerinde degil
VaryasyonlarFull color, monochrome, reversed (dark bg)
YasaklarStretch etme, renk degistirme, efekt ekleme

Color Palette Management

3-Katman Token Mimarisi

LAYER 1: Primitive (Ham renkler)
  blue-500: #3b82f6
  blue-600: #2563eb
  gray-100: #f3f4f6

LAYER 2: Semantic (Anlam tasiyan)
  color-primary: {blue-600}
  color-danger: {red-600}
  color-surface: {white}
  color-text: {gray-900}

LAYER 3: Component (Kullanim yeri)
  button-primary-bg: {color-primary}
  button-primary-hover: {blue-700}
  card-bg: {color-surface}
  input-border: {gray-300}

Palette Kurallari

KuralDetay
Ana renklerMax 3 (primary, secondary, accent)
Notral tonlar1 gray skalasi (50-950)
Durum renkleriSuccess (yesil), Warning (sari), Danger (kirmizi), Info (mavi)
Dark modeHer semantic token'in dark varyanti
KontrastTum text/bg kombinasyonlari WCAG AA (4.5:1)

Typography Specifications

KullanimFontAgirlikBoyutSatir Yuksekligi
DisplayPrimaryBold (700)48-72px1.1
H1PrimarySemibold (600)36-48px1.2
H2PrimarySemibold (600)24-36px1.25
H3PrimaryMedium (500)20-24px1.3
BodyPrimaryRegular (400)16px1.5
SmallPrimaryRegular (400)14px1.4
CaptionPrimaryRegular (400)12px1.3
CodeMonoRegular (400)14px1.5

Font Pairing Rehberi

BaslikGovdeKarakter
InterInterNotr, profesyonel
Cal SansInterModern, teknoloji
Playfair DisplaySource SansLuks, editoryal
Space GroteskDM SansYaratici, modern
FrauncesWork SansSicak, organik

Iconography

KuralDetay
Stil tutarliligiTek icon seti sec (Lucide, Heroicons, Phosphor)
Boyut skalasi16, 20, 24, 32px (text ile orantili)
Cizgi kalinligiSet icinde tutarli (1.5px veya 2px)
Filled vs OutlinedBirini sec, karistirma

Brand Consistency Checklist

Dijital Urunler

  • Primary font tanimli ve yuklendi
  • Color token'lari CSS variable olarak tanimli
  • Logo tum varyasyonlarda mevcut (SVG)
  • Favicon ve og:image marka tutarli
  • Button, input, card stilleri tutarli
  • Hata mesajlari marka voice'una uygun
  • Empty state illust/copy marka ile uyumlu
  • Loading animasyonu marka ile uyumlu
  • 404 sayfasi marka ile uyumlu

Iletisim

  • Email template'leri marka tutarli
  • Bildirim mesajlari voice rehberine uygun
  • Onboarding akisi marka tonunda
  • Dokumantasyon stili tutarli

Islem Akisi

  1. Kesfet: Marka degerlerini, hedef kitleyi, rakipleri analiz et
  2. Tanimla: Voice, renk, tipografi, ikon standartlarini belirle
  3. Dokumante et: Token'lari, kurallari, ornekleri yaz
  4. Uygula: Design system'e entegre et
  5. Denetle: Tutarlilik kontrolu yap, sapmalari duzelt

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

Steam-style achievement system with XP, levels, streaks, and skill trees. Gamifies the development workflow. 25 achievements across 5 categories.

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

Framework for measuring and tracking agent response quality over time. Detects regressions before they reach production. Use when evaluating agent changes, auditing quality, or establishing performance baselines.

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

Agent Context Isolation

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

Agent ve skill dosyalarinin yapisal dogrulamasi. Frontmatter kontrol, naming convention, zorunlu bolum kontrolu, tutarlilik denetimi. Yeni agent/skill eklendiginde veya mevcut dosyalar duzenlediginde otomatik calistirilir.

日本語の概要は準備中です。原文の説明を表示しています。

vibeeval/vibecosystem5332026年8月9日 更新

vibeeval のスキルをすべて見る

このスキルの問題を報告する