القائمة
50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/vibeeval/vibecosystem --skill ui-ux-patternsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Claude Code CLI commands, flags, headless mode, and automation patterns
OpenAI Codex CLI + Claude Code (Hizir) birlikte kullanim rehberi. Is dagitim pattern'leri, GitHub Actions workflow ornekleri, review dongusu ve iki AI yazilim asistaninin guclu yanlarini birlestiren orchestration stratejileri.
Meta-skill for internal codebase exploration at varying depths (quick/deep/architecture)
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | ui-ux-patterns |
| description | 50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist |
Somut, olculebilir UX kurallari ve stil rehberi. Tahmin degil, sayi var.
| Oncelik | Kategori | Seviye |
|---|---|---|
| 1 | Accessibility | CRITICAL |
| 2 | Navigation & Wayfinding | HIGH |
| 3 | Forms & Input | HIGH |
| 4 | Typography & Readability | HIGH |
| 5 | Color & Contrast | HIGH |
| 6 | Layout & Spacing | MEDIUM |
| 7 | Motion & Animation | MEDIUM |
| 8 | Data Display | MEDIUM |
| 9 | Feedback & States | MEDIUM |
| 10 | Charts & Visualization | LOW |
| Kural | Esik | Aciklama |
|---|---|---|
| touch-target-size | min 44x44pt (iOS), 48x48dp (Android) | Dokunma alani minimum boyutu |
| color-contrast-normal | 4.5:1 | Normal text kontrast orani (WCAG AA) |
| color-contrast-large | 3:1 | Buyuk text (18px+ bold, 24px+) kontrast |
| color-contrast-enhanced | 7:1 | AAA seviye kontrast |
| focus-indicator | 2px+ visible ring | Klavye focus gostergesi |
| text-resize | 200% zoom, icerik kaybolmamali | Browser zoom destegi |
| animation-respect | prefers-reduced-motion | Animasyon tercihi |
| Kural | Esik | Aciklama |
|---|---|---|
| navigation-depth | max 3 seviye | Derinlik siniri |
| breadcrumb-threshold | 2+ seviye derinlikte goster | Breadcrumb gorunurlugu |
| back-button-always | Her alt sayfada | Geri donme garantisi |
| search-visibility | 5+ nav item varsa arama ekle | Arama esigi |
| menu-item-limit | 7 +/- 2 (5-9 arasi) | Miller's Law |
| Kural | Esik | Aciklama |
|---|---|---|
| form-field-limit | max 7 field/step | Tek adimda alan siniri |
| label-position | ustte, sola dayali | Label pozisyonu |
| error-proximity | hata mesaji input'un 8px altinda | Hata mesaji konumu |
| password-strength | min 8 karakter + indicator | Sifre gosterge |
| autosave-interval | 30 saniyede bir | Otomatik kayit |
| input-height | min 44px | Girdi alani yuksekligi |
| placeholder-not-label | Asla placeholder'i label olarak kullanma | Placeholder kurali |
| Kural | Esik | Aciklama |
|---|---|---|
| body-font-size | min 16px (mobile), 14px (desktop) | Govde yazi boyutu |
| line-height | 1.4-1.6x font size | Satir yuksekligi |
| line-length | 45-75 karakter | Ideal satir uzunlugu |
| heading-hierarchy | h1 > h2 > h3, atlama yapma | Baslik hiyerarsisi |
| paragraph-spacing | 1.5x line-height | Paragraf arasi bosluk |
| font-weight-contrast | min 2 kademe fark (400 vs 600) | Agirlik kontrasti |
| Kural | Esik | Aciklama |
|---|---|---|
| max-brand-colors | 3 ana + 2 accent | Renk paleti siniri |
| status-colors | Yesil=basari, Kirmizi=hata, Sari=uyari, Mavi=bilgi | Durum renkleri |
| color-not-alone | Renk + icon/text birlikte | Renk tek bilgi tasiyici olmamali |
| dark-mode-contrast | Ayri kontrast kontrolu | Dark mode icin ozel kontrol |
| Kural | Esik | Aciklama |
|---|---|---|
| duration-micro | 100-150ms | Hover, toggle, checkbox |
| duration-standard | 150-300ms | Modal, dropdown, tab switch |
| duration-complex | 300-500ms | Page transition, expand |
| stagger-sequence | 30-50ms aralik | Liste animasyon gecikme |
| easing-enter | ease-out | Goruntuye giren eleman |
| easing-exit | ease-in | Goruntudan cikan eleman |
| easing-move | ease-in-out | Pozisyon degisimi |
| no-bounce | Ease fonksiyonu kullan | Bounce animasyon kullanma |
| Kural | Esik | Aciklama |
|---|---|---|
| content-max-width | 1200-1440px | Icerik maksimum genislik |
| card-padding | min 16px, ideal 24px | Kart ic boslugu |
| section-gap | 32-64px | Bolum arasi bosluk |
| grid-gutter | 16-24px | Grid arasi bosluk |
| mobile-padding | min 16px kenar | Mobil kenar boslugu |
| z-index-scale | dropdown:10, modal:50, toast:100 | Z-index katmanlama |
| Kural | Esik | Aciklama |
|---|---|---|
| loading-indicator | 300ms sonra goster | Loading gecikme esigi |
| skeleton-screen | 1s+ yukleme suresi | Skeleton gosterim esigi |
| toast-duration | 3-5 saniye (bilgi), kalici (hata) | Bildirim suresi |
| empty-state | Her listede bos durum tasarla | Bos durum zorunlulugu |
| success-feedback | Her eylem sonrasi onay | Basari geri bildirimi |
| error-recovery | Her hatada cozum yolu sun | Hata kurtarma |
| Stil | Ozellik | Ne Zaman Kullan |
|---|---|---|
| Minimalism | Az eleman, cok bosluk, monokrom | SaaS, portfolyo, landing |
| Flat Design | 2D, golgesiz, temiz cizgiler | Dashboard, admin panel |
| Material Design | Elevation, grid, bold color | Android, Google ekosistemi |
| Glassmorphism | Yari saydam, blur, frost-cam efekti | Hero section, card overlay |
| Neumorphism | Soft shadow, ic/dis golge, monokrom | Hesap makinesi, player, niche UI |
| Neubrutalism | Kalin border, bold renk, raw tipografi | Yaratici portfolio, startup landing |
| Brutalism | Ham, stilize edilmemis, web-punk | Sanat, deneysel projeler |
| Bento Grid | Asimetrik grid, kart tabanli layout | Dashboard, ozellik vitrin |
| Liquid Glass | Refraction efekti, saydam katmanlar | Premium urun, Apple esintili UI |
| Skeuomorphism | Gercek obje taklidi | Oyun, muzik, niche app |
| Claymorphism | 3D, yumusak, kilit hamuru efekti | Egitim, cocuk uygulamasi |
| Aurora UI | Gradient-agirlikli, koyu arka plan | Fintech, crypto, premium |
| Retro/Pixel | 8-bit estetik, piksel font | Oyun, nostalji temalik |
| Organic/Blob | Yumusak formlar, dogal renkler | Saglik, wellness, organik urun |
| Data-Dense | Kompakt layout, cok veri, kucuk font | Bloomberg terminal, analytics |
| Card-Based | Her icerik bir kart, taranabilir | E-commerce, sosyal medya, listing |
| Split-Screen | Ekran ikiye bolunmus, kontrast | Landing, karsilastirma, portfolio |
| Monochrome | Tek renk tonlari, minimalist | Luks marka, editoryal |
| Gradient-Heavy | Canli gecisler, enerji, modernlik | SaaS marketing, startup |
| Dark-First | Koyu tema oncelikli, neon aksan | Developer tool, media, oyun |
| Sanayi | Onerilen Stil | YAPMA |
|---|---|---|
| SaaS / B2B | Minimalism, Flat, Card-Based | Glassmorphism (kafa karistirir), Neumorphism |
| E-commerce | Card-Based, Flat | Dark-First (urun gorunmuyor), Brutalism |
| Healthcare | Flat, Organic, Accessible | Neon renkler, karisik layout, kucuk font |
| Fintech | Data-Dense, Aurora, Flat | Oyunsu eleman, belirsiz ikonlar |
| Education | Card-Based, Claymorphism, Organic | Data-Dense (ogrenciyi bunaltir) |
| Media / News | Card-Based, Bento Grid | Glassmorphism (okunurluk duser) |
| Developer Tools | Dark-First, Monochrome, Data-Dense | Neumorphism, abart animasyon |
| Gaming | Skeuomorphism, Retro, Gradient | Minimalism (sikici), corporate stil |
| Luxury / Fashion | Monochrome, Split-Screen, Minimalism | Bento Grid, Claymorphism |
<html> tag'inde