ui-ux-patterns
50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist
npx skills add vibeeval/vibecosystem --skill ui-ux-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Priority Kategorileri
- Named UX Rules (Sayisal Esiklerle)
- Accessibility (CRITICAL)
- Navigation & Wayfinding
- Forms & Input
- Typography & Readability
- Color & Contrast
- Motion & Animation
- Layout & Spacing
- Feedback & States
- UI Stil Katalogu
- Industry-Specific Rehber
- Pre-Delivery UX Checklist
- Accessibility (Zorunlu)
What does the ui-ux-patterns skill do?
50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill ui-ux-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.