@atezer/figma-mcp-bridge 1.7.24 → 1.7.25

package/skills/code-design-mapper/SKILL.md

@@ -0,0 +1,370 @@
+---
+name: code-design-mapper
+description: Figma tasarım bileşenlerini iOS, Android ve Web platformlarındaki kod bileşenlerine eşler. Bir Figma component'i birden fazla platform implementasyonuyla eşleşebilir. Enterprise plan gerektirmez, lokal çalışır. "code connect", "connect component", "map component", "bileşen eşle", "component mapping", "hangi kod bu bileşene karşılık geliyor", "bileşen eşleme tablosu" ifadeleriyle tetiklenir. F-MCP Bridge plugin bağlantısı gerektirir.
+metadata:
+  mcp-server: user-figma-mcp-bridge
+  personas:
+    - uidev
+    - designops
+---
+
+# Code-Design Mapper (Multi-Platform)
+
+## Overview
+
+Bu skill, Figma tasarım bileşenlerini **iOS, Android ve Web** platformlarındaki kod karşılıklarına eşler. Tek bir Figma component'i 3 farklı platform implementasyonuyla eşleşebilir.
+
+Figma resmi Code Connect'ten farkları:
+- Enterprise plan gerektirmez
+- Published component zorunluluğu yok
+- **Multi-platform mapping**: 1 Figma component → N platform implementasyonu
+- Her platformun implementasyon durumu ayrı izlenir
+- Platformlar arası tutarlılık kontrolü
+
+REST API veya Figma access token gerekmez.
+
+## Code Connect Uyarlama Notu
+
+Resmi Figma MCP'de Code Connect akışı `get_code_connect_suggestions` ve `send_code_connect_mappings` araçlarıyla çalışır. **F-MCP Bridge'de bu araçlar kayıtlı değildir** (FUTURE.md'de planlı).
+
+F-MCP ile eşdeğer iş akışı:
+
+| Resmi Code Connect adımı | F-MCP Bridge karşılığı |
+|---|---|
+| Resmi: code connect suggestions | `figma_search_components` + `figma_get_component` + `figma_get_component_for_development` |
+| Bileşen–kod eşleme | AI ile `.figma-mappings.json` üretimi (bu skill'in ana akışı) |
+| Resmi: send code connect mappings | **yok** — eşleme dosyası repoda kalır, Figma'ya gönderilmez |
+
+**Resmi Code Connect `.figma.js` şablonları gerekiyorsa:** Kullanıcıya resmi Figma MCP sunucusunu etkinleştirmesi ve [topluluk figma-code-connect skill'ini](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-code-connect/SKILL.md) kullanması önerilir.
+
+**Bridge'e Code Connect araçları eklendiğinde** bu bölüm ve iş akışı güncellenmeli.
+
+## Prerequisites
+
+- F-MCP Bridge plugin Figma'da çalışıyor ve bağlı olmalı
+- En az bir platformda component implementasyonu mevcut olmalı
+- Platform proje dizinleri biliniyor olmalı
+
+## F-MCP skill koordinasyonu
+
+- **Önce:** Stabil kütüphane instance’ları için isteğe bağlı **apply-figma-design-system** veya **audit-figma-design-system**.
+- **Sonra:** `.figma-mappings.json` ile **design-drift-detector** ve **implement-design**; manifest için **ai-handoff-export**.
+
+## Required Workflow
+
+**Bu adımları sırayla uygula. Adım atlama.**
+
+### Step 1: Plugin Bağlantısını Doğrula
+
+```
+figma_get_status()
+```
+
+### Step 2: Platform Projelerini Belirle
+
+Kullanıcıdan veya codebase'den platform proje köklerini belirle:
+
+```
+Hangi platformlarda çalışıyorsunuz ve proje dizinleri nerede?
+
+- iOS:     ör. ios-app/ veya MyApp.xcodeproj/
+- Android: ör. android-app/ veya app/src/main/
+- Web:     ör. web-app/ veya src/
+```
+
+Her platform için component dizinlerini tespit et:
+
+| Platform | Yaygın Component Dizinleri |
+|----------|---------------------------|
+| **iOS (SwiftUI)** | `Sources/Components/`, `Views/`, `UI/` |
+| **iOS (UIKit)** | `Views/`, `UI/Components/`, `Cells/` |
+| **Android (Compose)** | `ui/components/`, `presentation/components/` |
+| **Android (XML)** | `res/layout/`, `res/values/styles.xml` |
+| **Web (React)** | `src/components/`, `components/ui/` |
+| **Web (Vue)** | `src/components/`, `views/` |
+| **Web (Legacy)** | `templates/`, `partials/`, `public/js/` |
+
+### Step 3: Figma Component'lerini Keşfet
+
+Belirli component:
+
+```
+figma_get_component(nodeId="<NODE_ID>")
+```
+
+Tüm component'ler (aktif sayfa):
+
+```
+figma_search_components(query="", currentPageOnly=true, limit=50)
+```
+
+**Uyarı:** `currentPageOnly=false` büyük dosyalarda timeout'a neden olabilir. Önce `currentPageOnly=true` (varsayılan) ile dene. Component başka sayfadaysa dikkatli şekilde `false` kullan.
+
+### Step 4: Component Detaylarını Çek
+
+```
+figma_get_component_for_development(nodeId="<NODE_ID>", scale=2, format="PNG")
+```
+
+Bu tek çağrıda hem metadata hem base64 screenshot döner. Ancak base64 screenshot context'i şişirir — çok fazla component taranacaksa önce `figma_get_component(nodeId="...")` (sadece metadata) kullan, screenshot'ı sadece eşleşme onayı için al.
+
+Her component için Figma'daki bilgiler:
+- Component adı ve yolu
+- Variant özellikleri (variant props ve değerleri)
+- Child yapısı
+- Görsel referans (base64 screenshot — context ağır)
+
+### Step 5: Her Platformda Eşleşme Ara
+
+Her Figma component'i için, **her platformda ayrı ayrı** eşleşme ara:
+
+**iOS arama:**
+- `.swift` dosyalarında `struct ComponentName: View` (SwiftUI)
+- `.swift` dosyalarında `class ComponentName: UIView` (UIKit)
+- `.xib` / `.storyboard` dosyalarında custom class referansları
+
+**Android arama:**
+- `.kt` dosyalarında `@Composable fun ComponentName` (Compose)
+- `res/layout/` altında `component_name.xml` (XML)
+- Custom View class'ları
+
+**Web arama:**
+- `.tsx`/`.jsx` dosyalarında `export function ComponentName` veya `export const ComponentName`
+- `.vue` dosyalarında `<script>` içinde component tanımı
+- `.html`/`.hbs` dosyalarında template/partial
+
+### Step 6: Eşleşmeleri Kullanıcıya Sun
+
+**Multi-platform sunum formatı:**
+
+```
+Figma Component: Button (42:15)
+Variant'lar: primary | secondary | ghost × sm | md | lg
+
+Platform Eşleşmeleri:
+┌──────────┬────────────────────────────────────┬──────────┐
+│ Platform │ Kod Dosyası                        │ Durum    │
+├──────────┼────────────────────────────────────┼──────────┤
+│ iOS      │ Sources/UI/ButtonComponent.swift   │ Eşleşti  │
+│ Android  │ ui/components/ButtonComponent.kt   │ Eşleşti  │
+│ Web      │ src/components/Button.tsx           │ Eşleşti  │
+└──────────┴────────────────────────────────────┴──────────┘
+
+Figma Component: Avatar (42:30)
+┌──────────┬────────────────────────────────────┬──────────────┐
+│ Platform │ Kod Dosyası                        │ Durum        │
+├──────────┼────────────────────────────────────┼──────────────┤
+│ iOS      │ Sources/UI/AvatarView.swift        │ Eşleşti      │
+│ Android  │ —                                  │ Eksik        │
+│ Web      │ src/components/Avatar.tsx           │ Eşleşti      │
+└──────────┴────────────────────────────────────┴──────────────┘
+
+Bu eşleşmeleri kaydetmek ister misiniz?
+```
+
+### Step 7: Multi-Platform Mapping Dosyasını Oluştur/Güncelle
+
+**Önemli:** `.figma-mappings.json` dosyası AI agent tarafından oluşturulur ve yönetilir. Hiçbir MCP aracı bu dosyayı okumaz veya yazmaz — tamamen agent-tarafı bir artifact'tir.
+
+Proje kökünde `.figma-mappings.json` dosyası:
+
+```json
+{
+  "version": "2.0",
+  "lastUpdated": "2026-03-12T10:30:00Z",
+  "figmaFile": "Design System",
+  "platforms": {
+    "ios": {
+      "rootDir": "ios-app/",
+      "framework": "SwiftUI",
+      "language": "Swift",
+      "componentDirs": ["Sources/UI/", "Sources/Components/"]
+    },
+    "android": {
+      "rootDir": "android-app/",
+      "framework": "Compose",
+      "language": "Kotlin",
+      "componentDirs": ["app/src/main/java/com/app/ui/components/"]
+    },
+    "web": {
+      "rootDir": "web-app/",
+      "framework": "React",
+      "language": "TypeScript",
+      "componentDirs": ["src/components/", "src/ui/"]
+    }
+  },
+  "components": [
+    {
+      "figmaNodeId": "42:15",
+      "figmaName": "Button",
+      "figmaPath": "Components/Button",
+      "variants": {
+        "variant": ["primary", "secondary", "ghost"],
+        "size": ["sm", "md", "lg"]
+      },
+      "implementations": {
+        "ios": {
+          "codePath": "ios-app/Sources/UI/ButtonComponent.swift",
+          "componentName": "ButtonComponent",
+          "propMapping": {
+            "variant": { "codeProp": "style", "codeType": "ButtonStyle" },
+            "size": { "codeProp": "size", "codeType": "ButtonSize" }
+          },
+          "status": "synced",
+          "lastSync": "2026-03-12T10:30:00Z"
+        },
+        "android": {
+          "codePath": "android-app/app/src/main/java/com/app/ui/components/ButtonComponent.kt",
+          "componentName": "ButtonComponent",
+          "propMapping": {
+            "variant": { "codeProp": "variant", "codeType": "ButtonVariant" },
+            "size": { "codeProp": "size", "codeType": "ButtonSize" }
+          },
+          "status": "synced",
+          "lastSync": "2026-03-12T10:30:00Z"
+        },
+        "web": {
+          "codePath": "web-app/src/components/Button.tsx",
+          "componentName": "Button",
+          "propMapping": {
+            "variant": { "codeProp": "variant", "codeType": "string" },
+            "size": { "codeProp": "size", "codeType": "string" }
+          },
+          "status": "synced",
+          "lastSync": "2026-03-12T10:30:00Z"
+        }
+      }
+    },
+    {
+      "figmaNodeId": "42:30",
+      "figmaName": "Avatar",
+      "figmaPath": "Components/Avatar",
+      "variants": {
+        "size": ["xs", "sm", "md", "lg", "xl"]
+      },
+      "implementations": {
+        "ios": {
+          "codePath": "ios-app/Sources/UI/AvatarView.swift",
+          "componentName": "AvatarView",
+          "status": "synced",
+          "lastSync": "2026-03-12T10:30:00Z"
+        },
+        "android": null,
+        "web": {
+          "codePath": "web-app/src/components/Avatar.tsx",
+          "componentName": "Avatar",
+          "status": "outdated",
+          "lastSync": "2026-02-15T14:00:00Z"
+        }
+      }
+    }
+  ],
+  "coverageSummary": {
+    "totalComponents": 25,
+    "ios": { "implemented": 20, "missing": 5, "outdated": 2 },
+    "android": { "implemented": 18, "missing": 7, "outdated": 1 },
+    "web": { "implemented": 22, "missing": 3, "outdated": 3 }
+  }
+}
+```
+
+### Step 8: Platform Coverage Raporu Oluştur
+
+Mapping tamamlandıktan sonra coverage raporu sun:
+
+```
+Design System Platform Coverage Raporu
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Toplam Figma Component: 25
+
+        iOS     Android   Web
+Impl.   20/25   18/25     22/25
+%       80%     72%       88%
+Güncel  18/20   17/18     19/22
+Eksik   5       7         3
+
+Eksik Component'ler:
+  Android: Avatar, Tooltip, Breadcrumb, Stepper, DatePicker
+  iOS:     Breadcrumb, DataTable, Pagination, RichText, CodeBlock
+  Web:     Stepper, DatePicker, BottomSheet
+```
+
+## Mevcut Mapping'leri Güncelleme
+
+"Mapping'leri güncelle" veya "sync" dendiğinde:
+
+1. `.figma-mappings.json` oku
+2. Her component + her platform için güncel durumu kontrol et
+3. Figma'da variant değişikliği varsa → `status: "outdated"`
+4. Kodda component silinmişse → `status: "missing"`
+5. Coverage summary'yi güncelle
+
+## Eksik Platform Implementasyonu Başlatma
+
+Coverage raporunda eksik görünen component'i implement etmek için:
+
+1. Mapping'den eksik platformu ve Figma nodeId'yi belirle
+2. `figma_get_component_for_development(nodeId="...")` ile Figma verisini al
+3. **implement-design** skill'ini hedef platform belirterek kullan
+4. Oluşturulan implementasyonu mapping'e ekle
+
+## Examples
+
+### Örnek 1: Tekli Component — 3 Platform Eşleme
+
+Kullanıcı: "Button component'ini tüm platformlarda eşle, nodeId: 42:15"
+
+**Akış:**
+
+1. `figma_get_status()` → bağlı
+2. `figma_get_component_for_development(nodeId="42:15")` → Button, variants
+3. iOS'ta ara → `ButtonComponent.swift` bulundu
+4. Android'de ara → `ButtonComponent.kt` bulundu
+5. Web'de ara → `Button.tsx` bulundu
+6. 3 platform eşleşmesini sun
+7. Kullanıcı onayladı → `.figma-mappings.json`'a kaydet
+
+### Örnek 2: Platform Eksikleri Tespiti
+
+Kullanıcı: "Tüm component'leri tara, hangi platformlarda eksik göster"
+
+**Akış:**
+
+1. `figma_search_components(query="", currentPageOnly=false)` → 25 component
+2. Her component için 3 platformda ara
+3. Coverage raporu oluştur
+4. Kullanıcıya öncelik öner: "Android'de 7 component eksik, en kritikleri: Avatar, Tooltip"
+
+### Örnek 3: Sadece Bir Platform İçin Eşleme
+
+Kullanıcı: "Android Compose component'lerini Figma ile eşle"
+
+**Akış:**
+
+1. Sadece Android component dizinlerini tara
+2. Figma component'leriyle eşleştir
+3. Sadece Android sütununu güncelle, diğer platformları koru
+
+## Common Issues and Solutions
+
+### Sorun: Platform projesi farklı repo'da
+
+**Çözüm:** `platforms.ios.rootDir` alanını absolute path veya relative path olarak ayarla. Farklı repo'lar için workspace root'a göre path ver.
+
+### Sorun: Aynı Figma component'i platformlarda farklı isimle
+
+**Çözüm:** Her platform implementasyonunun `componentName` alanı bağımsızdır. Figma'da "SegmentedControl" → iOS'ta "Picker", Android'de "TabRow", Web'de "SegmentedControl" olabilir.
+
+### Sorun: Platform-spesifik component (ör. BottomSheet sadece mobile)
+
+**Çözüm:** Web implementasyonu `null` olarak bırak, coverage raporunda "N/A" göster. Platform-specific component'leri mapping'de işaretle.
+
+### Sorun: Legacy ve modern aynı platformda
+
+**Çözüm:** `platforms` altında ayrı entry ekle: `"web-legacy": { "framework": "jQuery", ... }`. Bir Figma component'in hem modern hem legacy web karşılığı olabilir.
+
+## Evolution Triggers
+
+- Bridge'e Code Connect araçları (suggestions / send mappings) eklenirse Code Connect uyarlama bölümü ve iş akışı güncellenmeli
+- Yeni platform desteği (Flutter, .NET MAUI) eklenirse platform profilleri genişletilmeli
+- `.figma-mappings.json` şeması değişirse çıktı formatı uyarlanmalı

package/skills/component-documentation/SKILL.md

@@ -0,0 +1,190 @@
+---
+name: component-documentation
+description: Figma bileşeni için kullanım kılavuzu oluşturur. "bileşen dokümantasyonu", "component docs", "usage guidelines", "bileşen kılavuzu" ifadeleriyle tetiklenir.
+metadata:
+  mcp-server: user-figma-mcp-bridge
+  personas:
+    - designer
+    - designops
+    - uidev
+---
+
+# Component Documentation
+
+> **Design Token Kuralı:** Bu skill'deki kod örneklerinde geçen font adları, renk kodları, piksel boyutları yalnızca FORMAT gösterimidir. Çalışma anında tüm design token değerleri (font, renk, boyut, spacing, radius, gölge) kayıtlı kütüphaneden (`figma_get_variables`, `figma_get_styles`) veya kullanıcıdan okunmalıdır. Hardcoded token değeri kullanma. Detay: `project-context.md` → "Design Token Kuralı".
+
+## Workflow
+
+1. **Standart kontrolü:** `reference_industry_design_standards.md` oku. "Son güncelleme" 1 yıldan eskiyse kullanıcıya güncelleme öner (kaynak listesi aşağıda).
+2. **Bileşen analizi:** figma_get_component_for_development + figma_get_design_context (depth=3, full) + figma_get_variables
+
+> **DERİN ANALİZ KURALI:** Sadece frame/node isimlerine bakarak sonuç çıkarma. Her node'un içindeki text content (`characters`), instance prop'ları ve child yapılarını detaylı oku. Bir şeyin "eksik" veya "yok" olduğunu iddia etmeden önce tüm child node'ların içeriğini kontrol et.
+
+> **GÖRSEL DOĞRULAMA KURALI:** Analiz sonucunu raporlamadan önce `figma_capture_screenshot` ile ekran görüntüsü al ve görsel olarak kontrol et. Text content ile screenshot'ın tutarlı olduğunu teyit et. Çelişki varsa screenshot'ı esas al.
+3. **Bileşen description güncelleme:** Bileşenin description ve link alanlarını güncelle (bkz. "Bileşen Description Kuralları").
+4. **KULLANICIYA FORMAT SEÇ:** Aşağıdaki 2 seçeneği içerik özetiyle sun. Onay olmadan frame OLUŞTURMA.
+5. Seçime göre frame oluştur. Eski aynı isimli frame varsa sil.
+6. Height bug fix: `primaryAxisSizingMode` FIXED→AUTO toggle.
+7. Viewport'u frame'e odakla.
+
+> **ONAY KURALI:** Bileşene herhangi bir ekleme veya değişiklik yapmadan önce (description, property, variant, child node, frame oluşturma vb.) yapılacak değişikliği açıkça belirt ve kullanıcıdan onay bekle. Sadece okuma/analiz işlemleri onaysız yapılabilir.
+
+---
+
+## Format Seçenekleri
+
+### Standard (~2800px, 780px geniş)
+
+| # | Bölüm | İçerik |
+|---|-------|--------|
+| 1 | Intro | Başlık (26px Bold) + 2 satırlık tanıtım |
+| 2 | Variantlar | Kart: gri bg, instance (130px fixed) + isim + açıklama (FILL) |
+| 3 | Durumlar | Grid: Default, Hover, Active, Disabled, Loading, Error, Focus — her durum gerçek instance ile gösterilir (mevcut variant'ın farklı state'leri) |
+| 4 | Kurallar | Do/Dont metin kutuları (yeşil/kırmızı, 3+3 madde) + görsel örnekler (gerçek instance'larla doğru/yanlış çift kartlar) |
+| 5 | Standartlar | Kaynak chip'leri (M3, HIG, WCAG, shadcn) + info kutu (touch, kontrast, hiyerarşi, boyut, states) |
+| 6 | Props | Satır bazlı: prop adı (mavi) + tip/default (gri) + açıklama (FILL) |
+| 7 | Copy Spec | Text node'lar için copy kuralları: max karakter, truncation davranışı, boş durum metni, placeholder. Bkz. [ux-copy-guidance](../ux-copy-guidance/SKILL.md) |
+| 8 | A11y | Info kutu: touch, focus, label, disabled |
+| 9 | Tokenlar | Renk + boyut token satırları, dark mode notu |
+| 10 | Kod | Tek koyu blok: React, SwiftUI, Compose |
+
+### Compact (~1300px, 720px geniş)
+
+| # | Bölüm | İçerik |
+|---|-------|--------|
+| 1 | Başlık | 24px Bold + tek satırlık tanıtım |
+| 2 | Variantlar | Satır bazlı: instance + "Name — açıklama" |
+| 3 | Kurallar | Do/Dont minimal: 3+3 madde (görsel örnek yok) |
+| 4 | Teknik | TEK KUTU: touch, kontrast, padding, states, props hepsi içinde |
+| 5 | Tokenlar | 2 satır, bullet-separated |
+| 6 | Kod | Tek koyu blok |
+
+> **NOT:** Copy Spec ve Durumlar bölümleri Compact formatta dahil değildir. Bu bölümler yalnızca Standard formatta yer alır.
+
+---
+
+## State Machine Geçiş Diyagramı (Sadece Standard)
+
+Etkileşimli bileşenler için durum geçiş diyagramı üretilir. Variant yapısından (`State` prop'u) otomatik çıkarılır:
+
+```mermaid
+stateDiagram-v2
+  [*] --> Default
+  Default --> Hover : onMouseEnter
+  Hover --> Active : onMouseDown / onTouchStart
+  Active --> Default : onMouseUp / onTouchEnd
+  Default --> Focus : onFocus (Tab)
+  Focus --> Default : onBlur
+  Default --> Disabled : disabled=true
+  Hover --> Default : onMouseLeave
+  Active --> Loading : async action
+  Loading --> Default : success
+  Loading --> Error : failure
+  Error --> Default : retry / dismiss
+```
+
+**Kurallar:**
+- Her durumdan `Disabled`'a geçiş mümkün (programatik)
+- `Loading` yalnızca async aksiyon tetikleyen bileşenlerde (Button, Form, Toggle)
+- `Error` yalnızca başarısız olabilecek aksiyonlarda
+- Geçiş tetikleyicileri (onMouseEnter, onFocus vb.) açıkça belirtilmeli
+- Statik bileşenler (Card, Badge, Divider) için diyagram üretilmez
+
+---
+
+## Görsel Do/Don't Örnekleri (Sadece Standard)
+
+Kurallar bölümüne metin kutularından SONRA eklenir. Her örnek çift kart (doğru + yanlış) yan yana:
+
+```
+HORIZONTAL row (FILL):
+  ├── Doğru kart: yeşil bg + border, gerçek instance'lar, kısa açıklama
+  └── Yanlış kart: kırmızı bg + border, gerçek instance'lar, kısa açıklama
+```
+
+Örnek çiftler (bileşen tipine göre adapte et):
+- Hiyerarşi doğru/yanlış: Primary+Secondary vs 2x Primary
+- Etiket doğru/yanlış: "Giriş Yap" vs "Tıkla"
+- Variant kullanımı doğru/yanlış: Primary+Outline+Ghost vs hepsi aynı
+
+Her kartta:
+- Başlık: 13px Bold, yeşil/kırmızı
+- Instance satırı: gerçek component instance'ları yan yana
+- Açıklama: 12px, tek satır
+
+---
+
+## Bileşen Description Kuralları
+
+### Description alanı
+- "Bu bileşen nedir ve ne amaçla kullanılır?" sorusuna **tek cümle** cevap ver
+- State listesi, yapı detayları, teknik kurallar gibi uzun bilgileri description'a EKLEME
+- Varsa bileşenin dokümantasyon sayfasını (Documentation frame) oku ve oradan özetle
+
+### Link alanı
+- Bileşenin dokümantasyon sayfası varsa Figma linkini `documentationLinks` olarak ekle
+- Format: `https://www.figma.com/design/{fileKey}/...?node-id={docNodeId}`
+
+### Örnek
+- **Doğru:** "File Upload bileşeni, kullanıcıların belgelerini sisteme yüklemesini sağlar. Buton aracılığıyla dosya seçimi yapılır."
+- **Yanlış:** "Dosya yükleme bileşeni (Mobil). States: empty, loading, loaded, disable. Yapısı: Label + Button + Belgeler listesi + Hint. Kurallar: Genişlik 358px, maks 10 dosya..."
+
+---
+
+## Ortak Kurallar
+
+### Dil
+- Sade, junior-friendly — teknik terimlerin yanına açıklama ekle
+- Her kural 1 satır — neden gerekliyse parantez içinde
+- "CTA" değil "ana aksiyon butonu"
+
+### Türkçe Karakter Kuralı (ZORUNLU)
+Tüm Türkçe metin içeriklerinde doğru Unicode karakterler kullanılmalıdır. ASCII karşılıkları YASAKTIR:
+ş (s değil), ı (i değil), ö (o değil), ü (u değil), ç (c değil), ğ (g değil), İ (I değil), Ş (S değil)
+Son adım: Üretilen tüm Türkçe metinleri karakter kontrolünden geçir.
+
+### Layout
+- Ana frame: VERTICAL, genişlik FIXED, yükseklik AUTO
+- Child'lar: `layoutSizingHorizontal = "FILL"`
+- Metinler: `textAutoResize = "HEIGHT"` — ASLA sabit yükseklik
+- Do/Dont: HORIZONTAL parent, FILL child'lar — ASLA sabit genişlik
+- Font: Inter (Regular, Medium, Semi Bold, Bold)
+
+### Token Bağlama Kontrolü
+Dokümantasyon üretirken bileşendeki bağlı olmayan değerleri tespit et ve uyar.
+Token bağlama kuralları için bkz: `generate-figma-library` skill'i.
+
+### Standart Referansı
+- Hafıza: `reference_industry_design_standards.md` (14 bölüm)
+- Bileşene uygun bölümler seçilir, tamamı yazılmaz
+- Chip'lerle kaynak göster: M3, HIG, WCAG 2.2, shadcn/ui
+
+---
+
+## Standart Güncelleme Kaynakları (Yıllık)
+
+| Kaynak | URL | Kontrol |
+|--------|-----|---------|
+| shadcn/ui | shadcn.com | Yeni bileşenler, tema tokenları |
+| Tailwind CSS | tailwindcss.com | Varsayılan değerler, breaking changes |
+| Radix UI | radix-ui.com | Yeni primitive'ler, a11y kalıpları |
+| Lucide Icons | lucide.dev | Grid/stroke değişiklikleri |
+| Material Design 3 | m3.material.io | M3 Expressive, bileşen specleri |
+| Apple HIG | developer.apple.com/design | Liquid Glass, platform kuralları |
+| WCAG | w3.org/TR/WCAG22 | Yeni SC'ler, hedef boyut |
+| W3C Design Tokens | designtokens.org | DTCG format, yeni tipler |
+| Carbon DS | carbondesignsystem.com | Bileşen checklist |
+
+---
+
+## Marka Profili Entegrasyonu
+
+`.fmcp-brand-profile.json` varsa:
+- `voiceTone` → Bileşen açıklama ve kullanım notlarının ton kalibrasyonu
+- `copyRules` → Copy Spec bölümünde CTA max karakter, kaçınılacak kelimeler referansı
+
+## Skill Koordinasyonu
+
+- Öncesi: `generate-figma-library` veya `figma-canvas-ops`
+- Sonrası: `ai-handoff-export`
+- İlişkili: `figma-a11y-audit`, `ux-copy-guidance`, `reference_industry_design_standards.md`