WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新
免费在 GitHub 公开
ui-ux-patterns
50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（1）
- SKILL.md8.4 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
UI/UX Patterns
Somut, olculebilir UX kurallari ve stil rehberi. Tahmin degil, sayi var.
Priority Kategorileri
| 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 |
Named UX Rules (Sayisal Esiklerle)
Accessibility (CRITICAL)
| 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 |
Navigation & Wayfinding
| 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 |
Forms & Input
| 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 |
Typography & Readability
| 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 |
Color & Contrast
| 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 |
Motion & Animation
| 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 |
Layout & Spacing
| 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 |
Feedback & States
| 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 |
UI Stil Katalogu
| 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 |
Industry-Specific Rehber
| 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 |
Pre-Delivery UX Checklist
Accessibility (Zorunlu)
- Tum resimler icin anlamli alt text
- Kontrast orani: normal text 4.5:1, buyuk text 3:1
- Keyboard ile tam navigasyon (Tab, Enter, Escape)
- Focus indicator gorunur (outline kaldirma)
- Touch target min 44x44pt
- Screen reader ile test edildi
- prefers-reduced-motion destegi
- lang attribute
<html>tag'inde
Forms
- Her input'un label'i var (placeholder != label)
- Hata mesajlari input'un hemen altinda
- Inline validation (submit beklemeden)
- Required field belirtilmis
- Autofill/autocomplete calisiyor
States
- Loading state (skeleton veya spinner)
- Empty state (bos liste/tablo icin)
- Error state (hata durumu UI'i)
- Success feedback (islem onay)
- Disabled state (tiklanamazligi belli)
- Hover state (clickable elemanlarda)
- Active/selected state
Responsive
- 320px genislikte kirilma yok
- 1920px genislikte bosluk fazla degil
- Touch cihazda hover-dependent icerik yok
- Yatay scroll yok (tasma kontrolu)
- Font boyutlari mobilde okunabilir (min 16px)
Performance
- LCP < 2.5s
- CLS < 0.1
- INP < 200ms
- Resimler lazy-loaded
- Font FOUT/FOIT yok (font-display: swap)
Genel
- Tutarli spacing (4px/8px grid)
- Tutarli border-radius
- Dark mode token'lari dogru
- 404 sayfasi var
- Favicon ve meta taglar
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新
Steam-style achievement system with XP, levels, streaks, and skill trees. Gamifies the development workflow. 25 achievements across 5 categories.
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新
Framework for measuring and tracking agent response quality over time. Detects regressions before they reach production. Use when evaluating agent changes, auditing quality, or establishing performance baselines.
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新
Agent Context Isolation
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新
Agent ve skill dosyalarinin yapisal dogrulamasi. Frontmatter kontrol, naming convention, zorunlu bolum kontrolu, tutarlilik denetimi. Yeni agent/skill eklendiginde veya mevcut dosyalar duzenlediginde otomatik calistirilir.
中文简介正在准备中。当前显示原文说明。
vibeeval/vibecosystem5382026年8月9日 更新