Vercel web-design-guidelines skill nedir? Kurulum, command.md ve Claude Code ile kullanım
Kodlama ajanına arayüzünü denetlettirirsin; Vercel'in web-design-guidelines skill'iyle ajan HTML, CSS ve React kodunu Vercel'in Web Interface Guidelines kurallarına göre inceler ve bulguları "dosya:satır - sorun" biçiminde yazar. Tek dosyalık (SKILL.md) bir skill; kurallar içinde değil: ajan her denetimden önce GitHub'daki command.md dosyasını internetten çekiyor, yani kurallar kurulumdan bağımsız güncelleniyor ama sen fark etmeden değişebilir. MIT lisanslı ve ücretsiz, hesap istemiyor. Kurulum: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines. Claude Code, Codex ve Cursor, skills CLI'nin desteklediği ajanlar arasında.
- Ne yapar
- Arayüz kodunu Vercel'in kurallarına göre denetletir
- Tür
- Skill (tek SKILL.md, betik yok)
- Yapımcı
- Vercel (vercel-labs)
- Hesap/anahtar
- Gerekmez
- Kurallar
- Her seferinde internetten çekilir
- Nerede
- Claude Code, Codex, Cursor
- Ücret
- Ücretsiz, MIT
web-design-guidelines skill ne işe yarar?
Skill, ajana bir konuda nasıl çalışacağını öğreten talimat paketidir. Bu skill ajana tek bir iş öğretiyor: arayüz kodunu (düğmeler, formlar, animasyonlar, görseller, erişilebilirlik) Vercel'in yazdığı Web Interface Guidelines kurallarına göre okumak ve sorunları listelemek. Çıktı kısa ve dosya bazlı: örneğin "src/Button.tsx:42 - icon button missing aria-label". Sorunsuz dosya için "✓ pass" yazılır.
!İki ayrı şey var: Web Interface Guidelines Vercel'in yazılı kılavuzu (vercel.com/design/guidelines), web-design-guidelines ise onu kullanan skill'in adı. Skill kılavuzun tamamını değil, kılavuz deposundaki kısa bir kural dosyasını (command.md) çekiyor. Skill bir plugin ya da Vercel'e dağıtım aracı değil; Vercel hesabı istemiyor.
Kime yarar: Ajanla site ya da uygulama arayüzü yazan ve yayına almadan önce erişilebilirlik, odak, form ve performans hatalarını yakalamak isteyenlere.
| Aynı depodaki skill | Ne için (README) |
|---|---|
| web-design-guidelines | Arayüz ve erişilebilirlik kurallarına göre kod denetimi (bu sayfa). |
| react-best-practices | React ve Next.js performans kuralları; 40'tan fazla kural, etkiye göre sıralı. |
| writing-guidelines | Doküman ve yazı stilinin Vercel yazım el kitabına göre denetimi. |
Kural listesinde ne var?
Skill klasöründe yalnız SKILL.md var. Kurallar command.md dosyasında, 17 başlık altında. agent-skills README'si "100'den fazla kural" diyor. Başlıklar ve her birinden bir örnek kural:
| Başlık | Örnek kural (command.md) |
|---|---|
| Erişilebilirlik, odak | Yalnız ikonlu düğmelere aria-label; görünür odak halkası, outline-none yerine :focus-visible. |
| Formlar | Girişlerde autocomplete; yapıştırmayı engelleme; hata alanın yanında. |
| Animasyon | prefers-reduced-motion'a uy; transition: all kullanma. |
| Tipografi, içerik taşması | Üç nokta yerine …; uzun metinde truncate; boş durumu karşıla. |
| Görseller, performans | <img> için width ve height; uzun listeyi sanallaştır. |
| Gezinme, dokunma | Filtre ve sekme durumu adreste; touch-action: manipulation. |
| Koyu mod, güvenli alanlar | color-scheme: dark; çentikli ekranlar için env(safe-area-inset-*). |
| Yerelleştirme, hydration | Tarih ve sayı için Intl.*; sunucu-istemci uyumsuzluğundan kaçın. |
| İçerik ve yazım, anti-pattern | Özel düğme etiketi ("Save API Key"); user-scalable=no gibi kalıpları işaretle. |
!DijiKoçum notu, resmî bilgi değil: "İçerik ve yazım" kuralları (Title Case, aktif cümle, "&" kullanımı) İngilizce metne göre yazılmış. Türkçe bir site denetlersen bu kuralların bulgularını gözden geçirerek değerlendir; erişilebilirlik, odak, form, performans ve Intl kuralları dilden bağımsız.
Kurallar neden her seferinde internetten çekiliyor?
SKILL.md ajana "Fetch fresh guidelines before each review" diyor ve adresi veriyor: raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. Artısı: kurallar güncel kalır (kılavuz deposunun son commit'i 5 Ekim 2026). Eksisi: aynı kod iki farklı günde farklı bulgu verebilir ve kuralları sen fark etmeden başkası değiştirebilir. Güvenlik tarafı da bu: ajan çektiği metni talimat olarak uyguluyor.
| Ne oluyor | Ne yapmalı |
|---|---|
| Kurallar bir gün değişti, sonuçlar tutmuyor | Kullanıcıların bildirdiği Depoda "çekilen talimatı sabitle ya da depoya al" diye açık kayıtlar var (#316, #30, #91; #317 buna bir düzeltme önerisi). Resmî belge sürüm sabitlemeyi anlatmıyor; çekilen command.md'yi kendin de açıp okuyabilirsin (adresi SKILL.md'de yazılı). |
| Ajanımda web adresi çekme aracı yok | Kullanıcıların bildirdiği SKILL.md kuralları WebFetch ile çekmeyi şart koşuyor ve yedek yol yazmıyor (kayıt #300, kapalı). Ajanında web okumayı aç. |
Bu kayıtlardaki endişe kötü amaçlı içerik değil, değişebilir bir uzak dosyanın talimat olarak uygulanması. #316'yı açan kişi, o tarihte dosyada kötü amaçlı içerik olmadığını da yazıyor. GitHub Güvenlik Danışmanlıkları iki depoda da boş; OSV'de skills (npm) kurulum aracı için kayıt yok (15.10.2026). Kayıtlı uyarı görünmüyor; bu "güvenli" demek değildir.
web-design-guidelines nasıl kurulur?
Gerekenler: Node.js (npx için) ve web adresi okuyabilen bir kodlama ajanı. Hesap, API anahtarı ya da plan gerekmez. Komutlar kılavuzun ve skills CLI'nin README'lerinden aynen alındı.
› npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines› npx skills add vercel-labs/agent-skillsDepodaki bütün skill'leri kurar (react-best-practices, writing-guidelines vb.). Yalnız denetim istiyorsan ilk sekmedeki komutu kullan.
› npx skills use vercel-labs/agent-skills --skill web-design-guidelines --agent claude-codeskills CLI README'sine göre bu komut skill dosyalarını geçici klasöre yazıp istemi hazırlıyor ve ajanı başlatıyor; kalıcı kurulum yapmaz.
Atlas kartındaki sürüm sabitli komut (skills@1.7.0) resmî belgede yok; resmî komut sürümsüz. Kılavuz README'si ayrıca AGENTS.md dosyasını indirmeni öneriyor: bu, ajanın kod üretirken kuralları uygulaması içindir, denetim skill'inin yerine geçmez. skills CLI anonim kullanım verisi toplar; DISABLE_TELEMETRY=1 ya da DO_NOT_TRACK=1 kapatır.
web-design-guidelines nasıl kullanılır?
SKILL.md, ajanın şu tür isteklerde skill'i kullanmasını söylüyor: "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices". Skill bir dosya ya da desen bekler (SKILL.md: argument-hint <file-or-pattern>); vermezsen hangi dosyaları denetleyeceğini sorar. Kural metni İngilizce; bulguların hangi dilde yazılacağını belge söylemiyor.
Çıktı biçimi (command.md'deki örnek):
src/Button.tsx:42 - icon button missing aria-labelsrc/Button.tsx:55 - animation missing prefers-reduced-motionsrc/Card.tsxiçin:✓ pass
web-design-guidelines hangi ajanlarda çalışır?
| Claude CodeVar | skills CLI README tablosunda var (proje: .claude/skills/, genel: ~/.claude/skills/) ve örnek komutta bu skill için --agent claude-code geçiyor. |
|---|---|
| CodexVar | skills CLI README'sinin desteklenen ajanlar tablosunda adı geçiyor; skill'e özel bir Codex notu yok. |
| CursorVar | Aynı tabloda adı geçiyor; skill'e özel bir Cursor notu yok. |
| Claude.ai (web sohbeti)Net değil | Belgede yazmıyor. |
| Web adresi okuyamayan ajanNet değil | SKILL.md kuralları WebFetch ile çekiyor, yedek yol yazmıyor. |
web-design-guidelines neye erişir?
Denetlemesi için gösterdiğin dosyalar ve internetten command.md dosyası.
SKILL.md dosya yazmayı anlatmıyor; çıktı bir bulgu listesi. Düzeltmeyi uygulamak ayrı bir istek ve ajanın onay kurallarına bağlı.
Skill hiçbir şey silmez.
SKILL.md yalnız command.md'yi çekmeyi söylüyor; dosyalarının bir yere gönderildiği yazmıyor. Ajanın kullandığı model yine dosya içeriğini normal şekilde işler.
Skill klasöründe betik, hook ya da MCP yok; yalnız SKILL.md var.
web-design-guidelines ücretsiz mi?
Evet. Kılavuz deposu MIT lisanslı (Copyright 2025 Vercel Labs); agent-skills README'si de MIT diyor ama o depoda LICENSE dosyası yok. Skill Vercel hesabına bağlanmıyor ve ücret ya da plan koşulu yazmıyor. Kullandığın ajan aracının kendi ücreti ayrı. TL fiyatı yok.
web-design-guidelines nasıl kaldırılır?
- Komutla: skills CLI README'sindeki örnek:
npx skills remove web-design-guidelines(genel kurulum için--global). - Elle: Skill klasörünü ajanın skill dizininden sil.
Sık sorulan sorular
Vercel web design guidelines Claude Code ile nasıl kullanılır?
Kurulumdan sonra ajana "arayüzümü incele" ya da "erişilebilirliği denetle" gibi bir istek ve denetlenecek dosya ya da klasör ver. SKILL.md ajana kuralları command.md'den çekmesini, dosyaları kontrol etmesini ve bulguları dosya:satır biçiminde yazmasını söylüyor.
web design guidelines skill nasıl kurulur, GitHub'da nerede?
Skill vercel-labs/agent-skills deposunda, skills/web-design-guidelines klasöründe. Kılavuzun README'sindeki komut: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines. Node.js gerekir; hesap gerekmez.
command.md ve SKILL.md ne işe yarıyor?
SKILL.md ajana yöntemi anlatan talimat dosyası, command.md ise kural listesi. Skill, command.md'yi her denetimden önce GitHub'ın main dalından çekiyor; bu yüzden kurallar skill'i yeniden kurmadan güncelleniyor, ama değişebilir.
web design guidelines skill Codex ile çalışır mı?
skills CLI Codex'i desteklediği ajanlar arasında sayıyor. Bu skill için özel bir Codex notu yok; ajanın web adresi çekebilmesi gerekir.
Vercel web design guidelines plugin mi, skill mi?
Skill. Claude Code eklentisi olarak yayımlandığı yazmıyor; depoda "Claude Code plugin" isteyen açık bir kayıt var (#224).
İlgili rehberler
Kaynaklar
- web-design-guidelines SKILL.md (GitHub)
- vercel-labs/agent-skills (GitHub)
- Web Interface Guidelines deposu ve README (GitHub)
- command.md (kural listesi)
- Web Interface Guidelines (Vercel)
- skills CLI README (GitHub)
Resmî kaynaklarda net olmayanlar: Claude.ai (web) üzerinde çalışıp çalışmadığı · web adresi okuyamayan ajanlarda ne olacağı · Türkçe site metinlerinde "İçerik ve yazım" kurallarının geçerliliği · agent-skills deposunda LICENSE dosyasının yokluğu (README MIT diyor) · skills.sh kurulum sayısı. Her biri ilgili bölümde yazılı.