Anatomyyazan wheresryan22

Anatomy Skill.

Teknik bir fikri okurun anlayabileceği bir makine olarak anlatın. Anatomy, kodlama ajanınızı izometrik SVG geometrisi, fiziksel metaforlar ve hareketli parçalarla uyumlu göstergeler konusunda yönlendirir.

İzometrik SVG
Teknik Anlatımlar
Etkileşimli Şekiller

OpenDesign'yı İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · anatomySKILL.md

Görev Teknik İllüstrasyon Çıktılar • Bir SVG şekli, bağımsız HTML sayfası veya React bileşenleri • Modele dayalı değerler ve isteğe bağlı etkileşim içeren bir fiziksel metafor • Kontroller çalıştırıldığında geometri ve tarayıcı inceleme kanıtları Başlamadan Önce Kit, kontroller için Node.js 20.10+ ve Chrome veya Chromium gerektirir. skills CLI'ın kendi Node gereksinimi vardır; README, CLI 1.7.1 için 22.20+ sürümünü belirtir.

Editoryal özet · kaynak incelendi 2026-10-12 · üretilmiş örnek değildir

01 Ne Yapar

Sistemi Fiziksel Bir Mekanizmayla Açıklayın

Anatomy, teknik bir ilişkiyi açıklamak için tanıdık bir nesne kullanır. Buradaki açıklama, bizim ürettiğimiz bir şekle değil, kaynağına dayanır.

Kaynağa dayalı iş akışıYürütme kıyaslaması değildir

Çalışma Yaklaşımı

Bir kuyruk, nesneleri tutan ve bırakan bir mekanizmaya; bir eşik, işaretli sınırı olan bir göstergeye dönüşebilir. Asıl değerli kısım eşlemedir: ne hareket eder, neyi ölçer ve izleyici ne öğrenmelidir. Beceri, ajandan parçaları çizmeden önce bu modeli oluşturmasını ister.

Dahil edilen kit, gölgeli yüzeylere ve açık derinlik sıralamasına sahip katı izometrik formlar üretir. Bir şekil SVG, bağımsız HTML veya React bileşenleri olarak teslim edilebilir. Etkileşimli sürümler kontrolleri, hareketi ve göstergeleri aynı modele bağlar; isteğe bağlı WebGL, SVG sahnesi içinde su veya ışık gibi efektler ekler.

Beklenen Çıktılar

Düzenlenebilir bir SVG şekli, bağımsız HTML sayfası veya React bileşenleri
Bir açıklama yazısı ve etkileşimli şekiller için kontroller ile modele dayalı göstergeler
Hedef ortamda çalıştırıldığında geometri kontrolleri ve tarayıcı ekran görüntüleri

Örnek Brifi Gör

Brifden İncelemeye

01
Fikri Bir Nesneyle Eşleyin
Gerçek davranışı sağlayın ve onu açıklayan tek bir mekanizma seçin. Süs ayrıntıları eklemeden önce her hareketin ve göstergenin ne anlama geldiğini tanımlayın.
02
Parçaları ve Kamerayı Planlayın
Destek yapısını, çalışan mekanizmayı ve kontrolleri listeleyin. İlişkiyi gövdenin arkasında gizlemek yerine görünür kılan bir bakış açısı seçin.
03
Geometriyi ve Davranışı Oluşturun
Katı şekiller ve derinlik sıralaması için kiti kullanın. Statik geometriyi bir kez hesaplayın; etkileşimli parçaları ve gösterilen değerleri aynı modele bağlayın.
04
Şekli Bağlam İçinde İnceleyin
İlgili geometri ve çizgi kontrollerini çalıştırın, ardından iki temada tarayıcı görüntülerini inceleyin. Başarılı bir denetim, açıklamanın doğru olduğunu veya kompozisyonun okunabilir olduğunu kanıtlamaz.

02 Ne Zaman Kullanılır

Ne Zaman Kullanılır

Fiziksel bir analoji teknik bir fikri anlamayı kolaylaştırdığında Anatomy'yı kullanın. Genel bir diyagram veya illüstrasyon üreticisinden daha uzmanlaşmıştır.

İyi Bir Uyum

Bir Mekanizmayı Açıklayan DokümantasyonBir kuyruğun, eşiğin, kontrolün veya bileşenin davranışını tek bir görünür fiziksel ilişki üzerinden gösterin.
Editoryal Teknik ŞekillerNesnenin açıklamayı kendisinin taşıdığı bir blog yazısı veya açılış sayfası için ayrıntılı bir şekil oluşturun.
Etkileşimli AçıklamalarOkurun bir parametreyi değiştirmesine ve hareket ile değerlerin birlikte güncellenmesini görmesine izin verin; klavye ve azaltılmış hareket davranışı da göz önünde bulundurulur.

Kontrol Edilecek Sınırlar

Genel Bir Akış Şeması Aracı DeğildirEtiketli kutular ve oklarla en iyi açıklanan bir süreç için bu fiziksel nesne yaklaşımı gereksiz karmaşıklık ekleyebilir.
3D İsteğe Bağlı Bir Beta ÖzelliğidirSabitlenmiş kaynak, 3D kanıtını bir örnek ve bir test şekliyle sınırlar. Yoğun hareketli geometri kendi performans kontrollerini gerektirir; akıcı bir sonuç garanti edilmez.
Kontroller Bir Tarayıcı GerektirirNode.js 20.10+ kiti çalıştırır; tarayıcı kontrolleri için Chrome veya Chromium gerekir. Beceriyi kurmak bu kontrollerin geçmesini sağlamaz ve her proje bağımlılığını getirmez.

Bu Girdileri Hazırlayın

Açıklanacak DavranışGerçek durumları, eşikleri veya denklemleri ve hedef kitlenin mevcut bilgisini sağlayın. Varsayımsal değerleri varsayımsal olarak belirtin.
Tek Bir Fiziksel MetaforNesneyi, neyin hareket ettiğini ve bu hareketin ne anlama geldiğini anlatın. Görsel referansları yüzey işlemesi veya malzemeler için paylaşın; mevcut bir şekli kopyalama isteği olarak değil.
Çıktı ve Etkileşim KapsamıSVG, bağımsız HTML veya React bileşenlerinden birini seçin; boyutu, temayı ve etkileşimin, WebGL veya deneysel 3D'nin gerçekten gerekli olup olmadığını belirtin.

03 Önemli Kararlar

Önemli Kararlar

Göstergeler Hareket Modelini Paylaşır
Bir sayı yalnızca mekanizmayla aynı durumu yansıtıyorsa işe yarar. Beceri; hareket, açıklama yazısı ve gösterilen değerler için ortak bir model ister.
Derinlik Sıralaması Çizimin Parçasıdır
Üst üste binen katılar, borular ve hareketli parçalar tutarlı bir önden arkaya sıralama gerektirir. Dahil edilen denetim geometriyi kontrol eder; çizgi uçları ayrı bir kontrol gerektirir.
Etkileşimin Bir Durağan Sürümü Vardır
Belgelenmiş iş akışı klavye kontrolünü, ekran dışında duraklatmayı ve azaltılmış hareketi içerir. WebGL kullanılırsa SVG onsuz da anlaşılır kalmalıdır.

04 Odaklı Bir Brif Deneyin

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Aşağıdaki komut beceriyi bir projeye kurar ve bir ajan seçmenize olanak tanır. Çalıştırmadan önce upstream README'yi kontrol edin.

Belgelenmiş Kurulum Komutu

npx skills add wheresryan22/anatomy

Kit Node.js 20.10+ gerektirir; README, skills CLI 1.7.1 için Node.js 22.20+ sürümünü belirtir. Tarayıcı kontrolleri Chrome veya Chromium gerektirir. Claude Code veya OpenCode içinde /anatomy'yı çağırın; Codex içinde $anatomy kullanın.

Tek Bir Mekanizmayla Başlayın

Yoğun bir sahneyi denemeden önce küçük, açıkça tanımlanmış bir model kullanın. Aşağıdaki brif, hazır bir şekil değil, test edilmemiş bir örnektir.

Örnek Brif

Sınırlı bir kuyruğu bağımsız bir HTML şeklinde küçük bir fiziksel mekanizma olarak açıklamak için Anatomy'yı kullan. Kuyruk en fazla 5 öğe tutar: yer varsa enqueue bir öğe ekler, boş değilse dequeue bir öğe çıkarır ve reddedilen işlemler sayıyı değiştirmez. Önce nesneyi öner ve hareketinin ne anlama geldiğini açıkla. Uydurma kıyaslama verisi değil, bu varsayımsal kuralları kullan. Kontrolleri klavyeyle erişilebilir yap ve sayıyı ile hareketi tek bir modelden yönet. Açık ve koyu temaları, 390 px görünüm alanını ve azaltılmış hareketi destekle. WebGL veya 3D ekleme. Etkileşimi eklemeden önce statik tasarımı göster, ardından gerçekte hangi geometri, çizgi ve tarayıcı kontrollerini çalıştırdığını bildir.

Açıklamayı ve Çizimi Kontrol Edin

Sonucu modele ve tarayıcı kanıtlarına göre inceleyin. Çalıştırılamayan kontrolleri kaydedin.

Sayı, hareket ve boş/dolu durumları belirtilen kuyruk kurallarıyla uyumludur.
Şekil dar bir ekranda ve hareket olmadan okunabilir kalır; kontrolleri klavyeyle çalışır.
Her iki tema ile geçerli geometri ve çizgi kontrolleri incelenir; çalıştırılmayan kontroller belirtilir.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, becerinin paketlendiği veya harici araçların, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign'yı İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: wheresryan22
Depo: wheresryan22/anatomy
Beceri Dosyası: SKILL.md
Lisans: MIT
İncelenen Sürüm: 2026-10-12 · 689dcf966e63

Editoryal Kaynak Özeti

Anatomy, fiziksel nesne açıklama yöntemini izometrik bir SVG kiti, isteğe bağlı etkileşim ve kaynakta tanımlı geometri ile tarayıcı kontrolleriyle birleştirir. Bu, sabitlenmiş kaynağın editoryal özetidir; bir yürütme raporu değildir.

OpenDesign tarafından, bağlantılı kaynağa dayanılarak hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; beceri kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Anatomy React gerektirir mi?

Hayır. Kaynak, SVG ve HTML üreten çerçevesiz JavaScript veya TypeScript'i, ayrıca React ve Next.js bileşenlerini destekler. Ana projeye uyan çıktıyı seçin.

Bir Anatomy şekli için WebGL veya 3D'ye ihtiyacım var mı?

Hayır. SVG temel çıktıdır. WebGL; su, ateş veya ışık gibi efektler için isteğe bağlıdır; dönen 3D geometri ise ayrı bir beta seçeneğidir. Yalnızca açıklamanın gerektirdiği modları isteyin.

Beceri, anatomy-figures paketiyle aynı mı?

Hayır. Anatomy yazım becerisi ve araç takımıdır. Ayrıca belgelenmiş anatomy-figures paketi hazır şekiller sağlar. Birini kurmak diğerini kurmak olarak tanımlanmamalıdır.

Anatomy

Tek Bir Teknik Fikri Görünür Kılın

Gerçek davranıştan başlayın, fiziksel bir metafor seçin ve şekli kullanılacağı ortamda inceleyin. Beceriyi çalıştırmadan önce kaynağı ve kurulumu gözden geçirin.

OpenDesign'yı İndir Tasarım Becerilerine Göz At