npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

art-director-skills

v0.13.0

Published

Art Director Agent Skill for frontend UI design, plus a zero-dependency CLI that installs it into Claude Code, Cursor, Copilot, Kiro, Codex, Qoder, Roo Code, Gemini CLI, OpenCode, Continue, CodeBuddy, Droid, and Kilo Code.

Readme

Art Director

Mevcut projedeki arayüzü tasarlamak, dar kapsamda iyileştirmek veya incelemek için kullanılan taşınabilir bir Agent Skill.

Tema paketi seçmez. MCP sunucusu çalıştırmaz. Kullanmak için Node, API anahtarı veya arka plan süreci gerekmez. skills/art-director/ klasörünü host’un skill dizinine kopyalamak yeterlidir.

English README · Kurulum · Uyumluluk · Bağlam bütçesi · Değerlendirme · Geçiş

Skill, mod başına yalnızca gerekli Markdown’ı açmayı öğretir; tam referans dizinini veya örnek çalışmaları varsayılan olarak yüklemez. Depo geliştiricileri için LF karakter tavanları docs/context-budget.md dosyasında özetlenir (npm paketine dahil değildir).

Ne işe yarar

0.13 sürümü, kanıta dayalı web incelemesi ve ölçülen bağlam bütçeleri ekler. DESIGN, 22.565 karakterlik çekirdekle başlar; kompozisyon ve tipografi ayrıntıları ihtiyaç halinde yüklenir. Testler bütçe aşımını reddeder. Bu ölçüm toplam agent token tüketiminin garantisi değildir.

Yeni bir sayfa, açık bir yeniden tasarım, sınırlı bir düzeltme (örneğin mobil menü) veya görsel inceleme istendiğinde.

Skill, host ajana şunu öğretir: mevcut yığını, platformu (web veya native) ve arayüz temelini (mevcut tasarım sistemi, yerel primitives veya başlangıç projesi) oku; içeriğe hiyerarşi ver; geniş DESIGN işinde görülebilen güncel referanslara bak; somut bir görsel tez yaz; ortak bir bileşen/sayfa dili kur veya geliştir; istenen ekranları, akışları ve durumları bitir; uygulama istendiyse gerçek dosyaları değiştir; dört kabul kapısını (yükleme/işlev, işçilik, kapsam, platform/erişilebilirlik) ayır.

Kalıcı yön tek dosyadır. Kullanıcının kök DESIGN.md seçimi kazanır. Aksi halde .art-director/design-notes.md varsa o kazanır. O da yoksa, ilk boş olmayan satırı sahiplik işareti olan kök DESIGN.md yöndür. Bunların dışındaki kök DESIGN.md değiştirilmez.

Geniş DESIGN işinde ilk gerçek ekranı görsel olarak inceleyip gerekli düzeltmeyi yapmadan tasarımı bütün ekranlara yaymaz. Engellenmiş kontrol, geçmiş kontrol sayılmaz: tamamlandı / kısmi teslim / tamamlanmadı ayrılır. 0.9.1: seçili+hover ve focus halkası gibi durum birleşimlerinin tasarlanması, halkanın üzerinde durduğu yüzeye göre ölçülmesi, "ilk viewport'u doldur" yerine içerikten gelen kap kararı. 0.9.1 kanıt. 0.9.0: iş türü ayrımı, Palatino/krem varsayılanının kırılması (yerine soğuk gri keskin reçete koymadan), Rail Still öğreticisi ve okunur inquire eylemi. 0.9.0 kanıt; eylem kontrastı ve fotoğrafçı yeniden koşusu: action-quality. 0.8.0: seefix CI kapısı ve skill/eval ayrımı. Cursor keşfi ayrı bir host testidir: 0.8.0 kanıt. 0.7.0 see-and-correct kaydı: 2026-09-20. Önceki native işçilik kaydı ayrı tutulur: 0.6.0. Dosya yoluyla açık skill kullanımı, Cursor'ın doğal keşfi olarak sunulmaz. Önceki 0.5.0 karşılaştırması ayrı tutulur.

Yalnızca doğru palet yetmez. Kullanıcı wireframe istemediyse ilk iskelet teslim değildir. Bilinçli sadeleştirme kusur değildir; işlenmemiş boşluk ve varsayılan HTML kusurdur. Native uygulama, web sitesinin mobil menüsü değildir.

Backend, SQL, migration veya yayın işlerinde kendiliğinden tasarım başlatmamalıdır.

Ne değildir

  • Hazır site kataloğu değildir
  • Başka bir sitenin paletini, yazı tipini veya bileşen tarifini taşımaz
  • Estetik garanti değildir
  • Yeni tarayıcı, görsel model veya ek yetki sağlamaz

Kurulum

Çevrimdışı kopya yeterlidir. Ayrıntı: docs/installation.md.

Hızlı Kurulum (npx, tam skill)

Önerilen kurulum, skill'in tamamını — aynı paket sürümündeki SKILL.md, references/, assets/ — adını verdiğin asistanın aradığı klasöre kopyalar. Asistanı ve kapsamı sen seçersin; seçmeden hiçbir şey yazılmaz. Sürümü sabitle:

npx --yes [email protected] install --ai cursor           # → .cursor/skills/art-director
npx --yes [email protected] install --ai claude,codex     # birden çok asistan
npx --yes [email protected] install --ai cursor --global  # proje yerine ~/.cursor/skills
npx --yes [email protected] install --ai cursor --dry-run # yalnız plan
npx --yes [email protected] status  --ai cursor
npx --yes [email protected] list
npx --yes [email protected] remove  --ai cursor
npx --yes [email protected] --version

Bağımlılık yok, paket indikten sonra ağ yok, telemetri yok, postinstall yok. Argümansız çalıştırma kullanımı yazdırır, dosya yazmaz. Mevcut klasörün üzerine sessizce yazılmaz: aynı içerik → current, farklı → conflict (çıkış 2, değişiklik yok); --force değiştirir ve önceki klasörü yanında art-director.bak-<zaman> olarak saklar. Hedefte, üst yolunda veya içinde sembolik bağlantı/junction varsa işlem hiçbir şey değiştirmeden reddedilir; --force bunu aşmaz. --dry-run yalnız planı yazar. Ayrıntı ve güvenlik modeli: docs/installation.md.

0.10.0'da değişti (güvenlik). 0.9.1'deki kısayollar — npx art-director-skills (SKILL.md yazardı), --cursor (.cursorrules), --claude (CLAUDE.md) — mevcut talimat dosyalarının üzerine yazıyor ve sembolik bağlantıları takip ediyordu. Artık bir mesajla duruyor, dosya yazmıyor. SKILL.md, .cursorrules, CLAUDE.md, AGENTS.md dosyalarına bu paket dokunmaz. Bkz. docs/migration.md.

Yayımlanan ikili yalnızca art-director-skills. npx art-director kullanma: registry’de başka bir pakettir. 0.10.0 o adı bin takma adı yapınca Windows npx art-director-skills komutu art-director çalıştırmaya kalkıyordu.

Klondan: node bin/cli.js install --ai cursor.

| --ai | Asistan | Proje yolu | Genel yol (--global) | |---|---|---|---| | claude | Claude Code | .claude/skills/ | ~/.claude/skills/ | | cursor | Cursor | .cursor/skills/ | ~/.cursor/skills/ | | copilot | GitHub Copilot (VS Code, CLI, bulut ajanı) | .github/skills/ | ~/.copilot/skills/ | | kiro | Kiro | .kiro/skills/ | ~/.kiro/skills/ | | codex | Codex CLI / IDE | .agents/skills/ | ~/.agents/skills/ | | qoder | Qoder IDE / CLI | .qoder/skills/ | ~/.qoder/skills/ | | roocode | Roo Code | .roo/skills/ | ~/.roo/skills/ | | gemini | Gemini CLI | .gemini/skills/ | ~/.gemini/skills/ | | opencode | OpenCode | .opencode/skills/ | ~/.config/opencode/skills/ | | continue | Continue IDE eklentisi | .continue/skills/ | ~/.continue/skills/ | | codebuddy | CodeBuddy CLI | .codebuddy/skills/ | ~/.codebuddy/skills/ | | droid | Droid (Factory) | .factory/skills/ | ~/.factory/skills/ | | kilocode | Kilo Code | .kilocode/skills/ | ~/.kilocode/skills/ | | all | yukarıdakilerin hepsi | hepsi | hepsi |

Var olan klasör --force verilmeden değiştirilmez. remove --ai <id> yalnızca içinde SKILL.md olan klasörü siler. all on üç kopya yazar; .agents/skills/ veya .claude/skills/ dizinlerini de okuyan hostlar skill'i iki kez listeler, bu yüzden kullandığınız asistanları adıyla verin. Yollar her üreticinin belgelediği yollardır (docs/compatibility.md). Yükleyici on üç asistan için kurulum testinden geçer; gerçek oturumda keşif yalnızca çalıştırıldığı yerde kayıtlıdır.

Vercel skills CLI (üçüncü taraf)

Yerel dizin:

$env:DISABLE_TELEMETRY = "1"
npx skills add C:\path\to\art-director-skills --skill art-director --agent cursor --copy --yes

Herkese açık depo:

npx skills add akifsen/art-director-skills --skill art-director --agent cursor --copy

Eski bir kopyanız varsa yerel değişiklikleri önce yedekleyin, sonra klasörü birleştirmeden değiştirin. docs/installation.md.

npx skills telemetrisi o CLI’ye aittir; DISABLE_TELEMETRY=1 veya DO_NOT_TRACK=1 ile kapatılır.

Kullanım

Kullandığınız asistan için kurun, sonra art-director’ı o hostta çağırın. Kendi dilinizde yazın. Her yerde aynı skill; ekstra komut yok. İstek zaten birini ima ediyorsa DESIGN / REFINE / REVIEW yazmayın.

Aşağıdaki çağrı biçimleri her hostun skill belgesinden. Bu skill’in oturumda listelendiği kayıt Cursor için var; diğerleri kurulum yolu olarak test edildi, o hostun burada açıldığı anlamına gelmez. Ayrıntı: docs/compatibility.md.

Cursor

npx --yes [email protected] install --ai cursor

Dosyalar: .cursor/skills/art-director/. Agent sohbetinde:

/art-director Bu site için rezervasyon akışı tasarla. Mevcut yığını koru.

Ya da doğal isteyin (“ayarlar sayfasını tasarla”); Cursor açıklamadan seçebilir. /art-director o mesaja skill’i bağlar. Aynı repoda --ai all ile birlikte kurmayın — Cursor .agents/skills/ dizinini de okur, skill iki kez görünür.

Gemini CLI

npx --yes [email protected] install --ai gemini

Bu, .gemini/skills/art-director/ yazar (Gemini’nin kendi ağacı). CLI ayrıca .agents/skills/ alias’ını tarar. İkisinin de proje kopyası yalnız klasör güveniliyorsa yüklenir. /skills list boş kaldıysa ve .gemini → .agents deyince göründüyse neden budur (veya yalnız alias’ı listeleyen eski CLI). Sonra:

/trust
/skills reload
/skills list

art-director görünmeli. Gemini skill’i açmadan onay ister.

Hâlâ boşsa Gemini’nin gördüğü alias’a kurun:

npx --yes [email protected] install --ai codex

Bu .agents/skills/art-director/ — aynı SKILL.md düzeni, ikinci bir skill değil. Bu Gemini sürümü ikisini de okuyorsa .gemini/skills/art-director ile .agents/skills/art-director birlikte durmasın; iki kez listelenir. --global → ~/.gemini/skills/ ve workspace güveni aranmaz.

Claude Code

npx --yes [email protected] install --ai claude

Dosyalar: .claude/skills/art-director/. /art-director yazın veya açıklamayla eşleşen bir arayüz sorusu sorun. /skills yüklü skill’leri listeler.

Codex

npx --yes [email protected] install --ai codex

Dosyalar: .agents/skills/art-director/. Codex CLI / IDE: /skills veya $art-director. ChatGPT masaüstü: @ ile skill.

GitHub Copilot

npx --yes [email protected] install --ai copilot

Dosyalar: .github/skills/art-director/ (proje) veya ~/.copilot/skills/ (--global). Copilot CLI’de /skills reload, sonra:

/art-director Gösterge panelini incele. Dosya değiştirme.

Copilot slash olmadan da açıklamadan seçebilir. /skills list ve /skills info art-director yüklendiğini doğrular.

Kiro

npx --yes [email protected] install --ai kiro

Dosyalar: .kiro/skills/art-director/. Sohbette /art-director veya doğal arayüz isteği. Varsayılan ajan bu klasörü yükler. Özel bir ajan için resources içine "skill://.kiro/skills/**/SKILL.md" gerekir.

OpenCode ve diğerleri

| Host | Kurulum | Klasör | Kullanım | |---|---|---|---| | OpenCode | --ai opencode | .opencode/skills/ | skill aracı: ad art-director | | Qoder | --ai qoder | .qoder/skills/ | Skill listesi / hostun /art-director belgesi | | Roo Code | --ai roocode | .roo/skills/ | aynı | | Continue | --ai continue | .continue/skills/ | aynı | | CodeBuddy | --ai codebuddy | .codebuddy/skills/ | aynı | | Droid | --ai droid | .factory/skills/ | aynı | | Kilo Code | --ai kilocode | .kilocode/skills/ | aynı |

Tüm projeler için: --global (ev dizini skill klasörü). Yollar: docs/installation.md.

DESIGN — yeni arayüz veya açık yeniden tasarım
Bu site için bir rezervasyon akışı tasarla. Mevcut yığını koru. Yalnızca
ilk ekranı değil; liste, detay ve boş durumları da bitir.

REFINE — var olan arayüzün belirli parçası
640px altında mobil menü kullanılamıyor. Yalnızca onu değiştir.

REVIEW — inceleme
Gösterge panelini incele: hiyerarşi, tipografi, kontrast ve boş
durumlar. Dosya değiştirme.

| Mod | Ne zaman | Varsayılan | |---|---|---| | DESIGN | Yeni arayüz veya açık yeniden tasarım | Tez, sonra bitmiş uygulama | | REFINE | Var olan arayüzün belirli parçası | Yalnızca o parça, yine işlenmiş | | REVIEW | İnceleme | Salt okunur |

Lisans

MIT.