agentleFS
atezeratezer/FMCP/skills/fmcp-token-sync-orchestrator/SKILL.md

fmcp-token-sync-orchestrator

Skill10 starsChanged 29 days agoMITView on GitHub

Figma design token'larını kod dosyalarıyla (CSS/Tailwind/Swift/Compose) platform-agnostic senkronize eder. Diff preview + onay + write akışı zorunlu. Her platformda çalışır. Condensed-first: Essentials bölümü %80 case'i kapsar, Advanced sadece edge case'lerde.

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Default path'i sor: "Bu platform için token dosyası <default> yoluna yazılsın mı?"

    line 161
  2. Distinctive:

    Create → DRAFT banner + ikinci onay

    line 197

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

FMCP Token Sync Orchestrator

Essentials (Üst Bölüm — %80 Case İçin Yeterli)

Ortak Protokol (Condensed — full: agents/_orchestrator-protocol.md)

  1. Skill Registry açık — tahmin yasak
  2. Intent Routing — platform belirsiz → kullanıcıya sor (AskUserQuestion / düz metin)
  3. Cheap-First — figma_get_variables(verbosity="summary") yeterli, full sadece eksik binding keşfinde
  4. Cache-First — tokens için cache yok (hızlı değişir), opsiyonel .claude/token-sync-log.md
  5. User Onay — diff preview olmadan WRITE YOK (mutlak kural)
  6. Self-Audit — write sonrası binding coverage raporu (hardcoded kalan node sayısı)
  7. Skill Evolution — yeni platform için iki aşamalı onay
  8. Türkçe rapor — metrik bloğu sonunda

Skill Registry (Ref Only)

SkillDosya yoluTriggerCommon case lazım mı?
design-token-pipelineskills/design-token-pipeline/SKILL.mdToken export/importHER ZAMAN (ana motor)
code-design-mapperskills/code-design-mapper/SKILL.mdComponent ↔ Figma mappingSadece component mapping istenirse
design-system-rulesskills/design-system-rules/SKILL.mdPlatform-specific rule generationSadece rule generation istenirse

Platform Routing

SinyalPlatformStandard hedef path
.css, :root, var(--...), tokens.cssCSSsrc/styles/tokens.css
tailwind.config.*, theme.extendTailwindtailwind.config.js → theme.extend
.swift, UIKit, SwiftUI, Color(...)SwiftSources/DesignTokens/Tokens.swift
.kt, Compose, @Composable, MaterialThemeComposeapp/src/main/java/.../DesignTokens.kt
.scss, $token-...Sasssrc/styles/_tokens.scss
Hiçbiri net değil—AskUserQuestion (4 platform seçeneği)

Diff Preview Before Write (Zorunlu Akış)

  1. Dry-run: Read("skills/design-token-pipeline/SKILL.md") + workflow'u çalıştır ama dosyaya yazma → çıktıyı buffer'a al
  2. Mevcut dosya varsa: mevcut içerikle yeni içerik arası unified diff üret
  3. Diff'i sohbete yaz:
    --- current tokens.css
    +++ new tokens.css
    @@ -12,3 +12,5 @@
       --color-primary: #0066cc;
    -  --color-secondary: #666;
    +  --color-secondary: #4a4a4a;
    +  --color-success: #10b981;
  4. Onay al: AskUserQuestion / düz metin: "Bu değişiklikleri uygulayayım mı? (Evet / Hayır / Sadece bazıları)"
  5. Onay sonrası Write veya Edit ile dosyaya yaz
  6. Mevcut dosya yoksa: sadece yeni içeriği göster, onay al, sonra Write

Self-Audit (Write Sonrası)

Binding coverage raporu:

  • Toplam token: figma_get_variables ile sayım
  • Binding oranı: senkronlanan / toplam (yüzde)
  • Upgraded: hardcoded değerden variable binding'e dönüşen sayı
  • Leftover: hâlâ hardcoded kalan node sayısı (ds-auditor'a yönlendir)

Rapor Formatı

## 🔄 Token Sync — <platform>

**Yön:** Figma → Kod | Kod → Figma
**Hedef dosya:** <path>
**Mod:** export | import

### Diff Özeti
- Eklenen: <n>
- Güncellenen: <m>
- Kaldırılan: <k>

### Binding Coverage
- Toplam token: <n>
- Binding oranı: <%>
- Hardcoded kalanlar: <k> node (ds-auditor ile detaylandır)

---
📊 Metrikler
- Kullanılan skill'ler: <liste>
- API çağrı sayısı: <n>
- Dry-run + write: tamamlandı

Advanced — Only Load If Needed

Bu bölümü Claude aşağıdaki koşullarda tarar:

  • ⚠️ Multi-platform sync (aynı token'ları hem CSS hem Swift'e)
  • ⚠️ Custom component mapping (code-design-mapper gerektiren)
  • ⚠️ Platform default path kullanıcı için uygun değil (custom path gerekir)
  • ⚠️ Kod → Figma yönünde sync (import mode, daha nadir)
  • ⚠️ Yeni platform desteği (Flutter, Jetpack Multiplatform vb.)

Detay 1 — Multi-Platform Sync

Kullanıcı "hem CSS hem Tailwind hem Swift'e aynı token'ları export et" derse:

  1. Her platform için ayrı dry-run
  2. 3 ayrı diff preview sohbette (tek mesajda üç diff bloğu)
  3. Kullanıcı "hepsini onayla" veya "sadece X ve Y" diyebilmeli (AskUserQuestion çoklu seçim)
  4. Onaylananları yaz
  5. Binding coverage raporu 3 platforma göre ayrı

Detay 2 — Custom Component Mapping

Sadece token değil, component → component eşleştirme isteniyorsa:

  1. Read("skills/code-design-mapper/SKILL.md")
  2. Figma component isim/key → kod dosyası path eşleştirmesi
  3. Çıktı: .codeconnect.ts veya benzeri mapping dosyası
  4. Token'lardan bağımsız ama tamamlayıcı iş

Detay 3 — Kod → Figma Import Mode

Kod tarafında değişen bir token (örn. Git PR'da renk güncellemesi) Figma'ya geri yansıtılacaksa:

  1. Kod dosyasını parse et
  2. figma_get_variables ile mevcut Figma değerlerini al
  3. Diff: kod tarafı vs Figma tarafı
  4. Kullanıcıya göster: "Kod tarafında şu token'lar değişmiş, Figma'ya yansıtayım mı?"
  5. Onay → figma_update_variable / figma_setup_design_tokens ile yaz
  6. Destructive mutation → ortak protokol madde 5 gate (kullanıcı onayı)

Detay 4 — Platform Default Path Override

Plan'daki defaultlar:

CSS      → src/styles/tokens.css
Tailwind → tailwind.config.js
Swift    → Sources/DesignTokens/Tokens.swift
Compose  → app/src/main/java/.../DesignTokens.kt
Sass     → src/styles/_tokens.scss

Kullanıcı'nın proje yapısı farklı olabilir. İlk sync'te:

  1. Default path'i sor: "Bu platform için token dosyası <default> yoluna yazılsın mı?"
  2. Kullanıcı alternatif verirse onu kullan
  3. İlk başarılı sync sonrası path .claude/token-sync-log.md'ye kaydedilir (opsiyonel cache)

Detay 5 — Error Recovery

HataAksiyon
Dosya yazma permissionKullanıcıya bildir, farklı path öner
Mevcut kod formatı tanınmıyorÖrnek satır göster, formatı doğrulat
figma_get_variables timeoutverbosity="summary" zaten default, retry
Diff çok büyük (100+ değişiklik)Özetle: "X color, Y spacing, Z typography token değişti, detay görmek ister misin?"

Detay 6 — Platform-Specific Notes

Claude Code:

  • Write / Edit tool'ları mevcut, doğrudan kod dosyasına yazılır
  • Cache: .claude/token-sync-log.md opsiyonel

Cursor:

  • Aynı tool'lar mevcut, main context'te çalışır
  • .cursor/rules/fmcp-orchestration.md bu orchestrator'ı referans eder

Claude Desktop:

  • KRİTİK: Filesystem MCP eklenmediyse Write tool'u yok → sadece diff gösterebilir, kullanıcı manuel kopyalar
  • İlk prompt'ta manuel skill referansı zorunlu

Claude Web:

  • Filesystem yok → tamamen plan-only mod
  • "Bu diff'i kopyala, tokens.css'e yapıştır" talimatı ver

Detay 7 — Yeni Platform Desteği (Skill Evolution)

Kullanıcı "Flutter için export" isterse (mevcut 5 platformda yok):

  1. Aşama 1: Gap'i açıkla, "Flutter desteği eklemek istiyor musun?" sor
  2. Aşama 2: design-token-pipeline skill'ine Flutter eklentisi yap (edit) veya yeni bir skill (fmcp-token-flutter-pipeline) oluştur (create)
  3. Create → DRAFT banner + ikinci onay
  4. Edit → diff preview + onay

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.