ux-ui-guidelineslisted

Wytyczne UX/UI dla React 19 + Tailwind v4. Design system (OKLCH colors), dostępność (WCAG 2.2, ARIA), responsive design (mobile-first, container queries), animacje (Motion, View Transitions, prefers-reduced-motion), UI patterns (navigation, tables, search, onboarding), interface polish (concentric radius, optical alignment, tabular numbers, scale 0.96 on press, font smoothing, image outlines, interruptible animations, shadow-as-border). Używaj przy projektowaniu UI, dostępności, animacjach, mobile UX oraz micro-detalach polish — "feels off", "interface polish", "border radius polish", "stagger animations", "tabular numbers", "scale on press".
AIBiz-Automatyzacje/claude-cron · ★ 1 · Web & Frontend · score 67

Install: claude install-skill AIBiz-Automatyzacje/claude-cron

# UX/UI Guidelines ## Cel Przewodnik dla projektowania interfejsu użytkownika - design system, dostępność, responsywność, animacje, wzorce UI zgodne ze standardami Marzec 2026. ## Kiedy Używać Tego Skilla - Projektowanie nowych komponentów UI - Implementacja dostępności (WCAG 2.2, ARIA) - Responsive design i container queries - Animacje i przejścia - Formularze i modale - Mobile UX - Nawigacja, tabele, wyszukiwanie, onboarding --- ## Quick Start ### Checklist Nowego Komponentu UI - [ ] Mobile-first styling (zaczynaj od mobile) - [ ] Container queries dla komponentów (`@container`) - [ ] Focus visible dla nawigacji klawiaturą - [ ] ARIA labels dla elementów interaktywnych - [ ] Touch targets min 24x24px (WCAG 2.2 AA, 2.5.8), rekomendowane 44x44px (Apple HIG / cel AAA, 2.5.5) - [ ] `prefers-reduced-motion` dla animacji - [ ] Contrast ratio min 4.5:1 (WCAG AA) - [ ] Dynamic viewport units (`min-h-dvh`) - [ ] `<search>` element dla obszarów wyszukiwania - [ ] Concentric border radius na zagnieżdżonych elementach (outer = inner + padding) - [ ] `tabular-nums` na dynamicznych liczbach (licznik, timer, cena) - [ ] `active:scale-[0.96]` na klikalnych przyciskach (gdzie sensowne) - [ ] Konkretne `transition-property`, nigdy `transition: all` ### Checklist Formularza - [ ] Labels powiązane z inputami (`htmlFor`) - [ ] Komunikaty błędów z `role="alert"` - [ ] Walidacja inline (nie tylko po submit) - [ ] Loading state z `useTransition` lub mutation - [ ] Success/error feedback