ui-ux-libera — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited ui-ux-libera (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
LIBERA Studio fork of ui-ux-pro-max v2.5.0 — updated May 2026
Comprehensive design guide for web and mobile applications. When local scripts are installed, provides access to 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 16 stacks. When scripts are unavailable, operates as a full checklist and decision framework — see How to Use Step 2.
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, use this skill.
Use this skill as a UI/UX advisory and quality-control layer. Do not override:
Narrow fixes: If the user asks for a specific bug fix or narrow implementation change, apply only the relevant checks. Do not expand into a full design critique unless requested.
Check selection: Do not apply all rules mechanically. Select the 5–10 most relevant checks based on:
Tradeoff resolution: When rules conflict, resolve in this order:
Anti-hallucination: When making measurable claims, verify or explicitly mark as assumption: contrast ratios, touch target sizes, browser support percentages, bundle size or performance budgets, CLS values, font loading behavior, and responsive breakpoints. Do not invent palette names, font pairings, product rules, or chart recommendations from unavailable databases. If local scripts/data are not installed, say so and apply manual checklist reasoning.
Default mode: balanced — applies relevant checks proportionate to the task.
If the user uses any of: "critica pesante", "audit", "professional review", "production-ready", "quality check", "strict", switch to strict mode:
Select the mode that matches the user's task.
| Priority | Category | Impact | Key Checks (Must Have) | Anti-Patterns (Avoid) |
|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
| 2 | Touch & Interaction | CRITICAL | Min 44pt iOS / 48dp Android / 24px+ web, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
| 3 | Performance | HIGH | AVIF+WebP fallback, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
| 4 | Style Selection | HIGH | Match product type, Consistency, SVG icons | Mixing flat & skeuomorphic randomly, Emoji as primary icons |
| 5 | Layout & Responsive | HIGH | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
| 6 | Typography & Color | MEDIUM | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 | Animation | MEDIUM | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
| 8 | Forms & Feedback | MEDIUM | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 | Navigation Patterns | HIGH | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
| 10 | Charts & Data | LOW | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
| 11 | Interaction States | HIGH | Loading, Empty, Error, Active feedback for every component | Only implementing the success state |
| 12 | Launch Completeness | MEDIUM | Meta tags, Favicon, Legal links, 404, Skip-to-content | Shipping without these basics |
Context escalation — default priorities may escalate based on product context:
color-contrast — Minimum 4.5:1 ratio for normal text (large text 3:1); WCAG 2.2 AAfocus-states — Visible focus rings on interactive elements (2–4px outline); WCAG 2.2 Focus Appearance also requires the focus indicator change to have 3:1 contrast against adjacent colorsalt-text — Descriptive alt text for meaningful images; decorative images use alt=""; decorative inline icons hidden from screen readers with aria-hidden="true"aria-labels — aria-label for icon-only buttons; accessibilityLabel in nativekeyboard-nav — Tab order matches visual order; full keyboard supportform-labels — Use <label> with for attribute; never placeholder-onlyskip-links — Skip to main content for keyboard usersheading-hierarchy — Preserve meaningful document outline (h1→h6); avoid skipping levels unless the structure remains understandable without visual contextcolor-not-only — Don't convey info by color alone (add icon/text)dynamic-type — Support system text scaling; avoid truncation as text growsreduced-motion — Respect prefers-reduced-motion; reduce/disable animations when requested. In Next.js/React with Framer Motion: wrap layout.tsx children with <MotionConfig reducedMotion="user"> — this handles the system preference globally without per-component checks.voiceover-sr — Meaningful accessibilityLabel/accessibilityHint; logical reading orderescape-routes — Provide cancel/back in modals and multi-step flowskeyboard-shortcuts — Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-droptouch-target-size — Web: WCAG 2.2 minimum 24×24 CSS px (recommended 44×44 CSS px); iOS: 44×44pt hit region (Apple HIG); Android: 48×48dp (Material Design 3); extend hit area beyond visual bounds if neededtouch-spacing — Minimum 8px/8dp gap between touch targetshover-vs-tap — Use click/tap for primary interactions; don't rely on hover aloneloading-buttons — Prevent duplicate submissions during async operations; show busy state (spinner or progress); preserve a cancel or retry path where recovery is needed — do not simply disable when the user may need to interrupt or correcterror-feedback — Clear error messages near problemcursor-pointer — Add cursor: pointer to clickable elements (Web)gesture-conflicts — Avoid horizontal swipe on main content; prefer vertical scrolltap-delay — Use touch-action: manipulation to reduce 300ms delay (Web)standard-gestures — Use platform standard gestures consistently; don't redefinesystem-gestures — Don't block system gestures (Control Center, back swipe, etc.)press-feedback — Visual feedback on press (ripple/highlight; MD3 state layers)haptic-feedback — Use haptic for confirmations and important actions; avoid overusegesture-alternative — Don't rely on gesture-only interactions; always provide visible controlssafe-area-awareness — Keep primary touch targets away from notch, Dynamic Island, gesture bar. For sticky bottom bars: use style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }} directly — Tailwind's pb-safe requires the tailwindcss-safe-area plugin; if it is not installed the class is silently ignored and iPhone home-indicator content gets clipped.no-precision-required — Avoid requiring pixel-perfect taps on small icons or thin edgesswipe-clarity — Swipe actions must show clear affordance or hintdrag-threshold — Use a movement threshold before starting drag to avoid accidental dragsimage-optimization — Use AVIF progressively with WebP fallback (never AVIF-only; always include <source type="image/webp"> fallback); use responsive images (srcset/sizes), lazy load non-critical assetsimage-dimension — Declare width/height or use aspect-ratio to prevent layout shift (CLS)font-loading — Use font-display: swap or optional to avoid invisible text (FOIT)font-preload — Preload only critical fonts; avoid overusing preload on every variantcritical-css — Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)lazy-loading — Lazy load non-hero components via dynamic import / route-level splittingbundle-splitting — Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial loadthird-party-scripts — Load third-party scripts async/defer; audit and remove unnecessary onesreduce-reflows — Avoid frequent layout reads/writes; batch DOM reads then writescontent-jumping — Reserve space for async content to avoid layout jumps (CLS < 0.1)lazy-load-below-fold — Use loading="lazy" for below-the-fold images and heavy mediavirtualize-lists — Virtualize lists with 50+ items to improve memory efficiency and scroll performancemain-thread-budget — Keep per-frame work under ~16ms for 60fps; move heavy tasks off main threadprogressive-loading — Use skeleton screens / shimmer instead of long blocking spinners for >1s operationsinput-latency — Keep input latency under ~100ms for taps/scrollstap-feedback-speed — Provide visual feedback within 100ms of tapdebounce-throttle — Use debounce/throttle for high-frequency events (scroll, resize, input)offline-support — Provide offline state messaging and basic fallback (PWA / mobile)network-fallback — Offer degraded modes for slow networks (lower-res images, fewer animations)container-queries — Use CSS container queries (@container) for component-level responsiveness; Baseline Widely Available (August 2025) — safe for productionview-transitions — Use the View Transitions API progressively for page/route transitions; Baseline Newly Available (October 2025) — distinguish single-document (well-supported) from cross-document (limited); always include prefers-reduced-motion fallback and no-motion pathviewport-height-safe — Use min-h-[100dvh] for full-height sections; never h-screen — iOS Safari jumps catastrophically when the URL bar hides/showsbackdrop-blur-scope — Apply backdrop-blur only to fixed/sticky elements (navbars, overlays); never on scrolling containers — causes continuous GPU repaints on mobileintersection-observer — For scroll-triggered animations use IntersectionObserver; never window.addEventListener('scroll') — causes continuous reflows and kills mobile performancestyle-match — Match style to product typeconsistency — Use same style across all pagesno-emoji-icons — Use SVG icons (Heroicons, Lucide, etc.) for navigation, buttons, toolbars, and controls; emoji may serve as decorative or editorial content in consumer, education, chat, or casual apps where brand-appropriate and not required for comprehensionno-side-stripe-borders — Never use border-left or border-right >1px as colored accent on cards, alerts, or list items — use background tints, full borders, or spacing insteadcolor-palette-from-product — Choose palette from product/industry contexteffects-match-style — Shadows, blur, radius aligned with chosen styleplatform-adaptive — Respect platform idioms (iOS HIG vs Material Design 3)state-clarity — Make hover/pressed/disabled states visually distinct while staying on-styleelevation-consistent — Use a consistent elevation/shadow scale for cards, sheets, modalsdark-mode-pairing — Design light/dark variants togethericon-style-consistent — Use one icon set/visual language across the productsystem-controls — Prefer native/system controls; only customize when branding requires itblur-purpose — Use blur to indicate background dismissal (modals, sheets), not as decorationprimary-action — Each task region should have one clear primary action; avoid competing primary CTAs unless the screen supports multiple independent workflows (dashboards, admin panels, creative tools, or multi-step task surfaces may legitimately have more than one)viewport-meta — width=device-width initial-scale=1 (never disable zoom)mobile-first — Design mobile-first, then scale up to tablet and desktopbreakpoint-consistency — Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)readable-font-size — Minimum 16px body text on mobile (avoids iOS auto-zoom)line-length-control — Mobile 35–60 chars per line; desktop 60–75 charshorizontal-scroll — No horizontal scroll on mobilespacing-scale — Use 4pt/8dp incremental spacing systemtouch-density — Keep component spacing comfortable for touchcontainer-width — Consistent max-width on desktop (max-w-6xl / 7xl)z-index-management — Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)fixed-element-offset — Fixed navbar/bottom bar must reserve safe padding for underlying contentscroll-behavior — Avoid nested scroll regions that interfere with the main scroll experienceviewport-units — Prefer min-h-dvh over 100vh on mobileorientation-support — Keep layout readable and operable in landscape modecontent-priority — Show core content first on mobile; fold or hide secondary contentvisual-hierarchy — Establish hierarchy via size, spacing, contrast — not color alonegrid-over-flex-math — Use CSS Grid for multi-column layouts; never calc(33% - 1rem) flexbox math — unreliable across browsersscroll-smooth — Add scroll-behavior: smooth on <html> for anchor link navigationsemantic-html — Use <nav>, <main>, <article>, <aside>, <section>; avoid div soup — improves accessibility and SEOhero-image-anchor — Background images must be anchored OPPOSITE to the primary text position: text left → object-right; text right → object-left; centered text → object-center. Prevents the image subject from being obscured by text overlay when the viewport narrows. Applies to hero sections, full-bleed section backgrounds, and any fill-mode next/image with overlaid content.card-equal-height — CSS Grid stretches grid items to row height automatically, but nested wrapper divs do not inherit that height unless explicit. Add h-full to every div in the wrapper chain (article → outer bezel → inner card div). Add flex flex-col to the card and flex-1 to the variable-length content area (description, bio, body text). CTA rows and footers then align to card bottom regardless of content length.line-height — Use 1.5–1.75 for body textline-length — Limit to 65–75 characters per linefont-pairing — Match heading/body font personalitiesfont-scale — Consistent type scale (e.g. 12 14 16 18 24 32)contrast-readability — Darker text on light backgrounds (e.g. slate-900 on white)text-styles-system — Use platform type system: iOS Dynamic Type / Material 3 type rolesweight-hierarchy — Bold headings (600–700), Regular body (400), Medium labels (500)color-semantic — Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hexcolor-dark-mode — Dark mode uses desaturated / lighter tonal variants, not inverted colorscolor-accessible-pairs — Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); verify with toolscolor-not-decorative-only — Functional color (error red, success green) must include icon/texttruncation-strategy — Prefer wrapping over truncation; when truncating use ellipsis and tooltipletter-spacing — Respect default letter-spacing per platform; avoid tight tracking on body textnumber-tabular — Apply font-variant-numeric: tabular-nums to all price, metric, and data columns to prevent layout shift on number updateswhitespace-balance — Use whitespace intentionally to group related items; avoid visual cluttertext-wrap-headings — Use text-wrap: balance on headings and text-wrap: pretty on body to prevent orphaned wordsno-pure-black — Avoid #000000 for text; use off-black (#111111 / #0a0a0a) — pure black on white creates harsh contrast that strains readingduration-timing — Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500mstransform-performance — Use transform/opacity only; avoid animating width/height/top/leftprogress-bar-scaleX — Animate progress bars and fill indicators with scaleX + transform-origin: left, not width. Animating width triggers layout recalculation every frame; scaleX runs on the GPU compositor.loading-states — Show skeleton or progress indicator when loading exceeds 300msexcessive-motion — Animate 1–2 key elements per view maxeasing — Use ease-out for entering, ease-in for exiting; avoid linear for UI transitionsmotion-meaning — Every animation must express a cause-effect relationship, not just be decorativestate-transition — State changes should animate smoothly, not snapcontinuity — Page/screen transitions should maintain spatial continuityparallax-subtle — Use parallax sparingly; must respect reduced-motionspring-physics — Prefer spring/physics-based curves over linear for natural feelexit-faster-than-enter — Exit animations shorter than enter (~60–70% of enter duration)stagger-sequence — Stagger list/grid item entrance by 30–50ms per itemshared-element-transition — Use shared element / hero transitions for visual continuityinterruptible — Animations must be interruptible; user tap/gesture cancels in-progress animationno-blocking-animation — Never block user input during an animationscale-feedback — Subtle scale (0.95–1.05) on press for tappable cards/buttonsmotion-consistency — Unify duration/easing tokens globallymodal-motion — Modals/sheets should animate from their trigger source for spatial contextnavigation-direction — Forward navigation commonly animates left/up, backward right/down — applies to LTR mobile stacks; adapt for RTL layouts, platform conventions (iOS swipe-back, Android predictive back), desktop, split views, and non-stack transitionsmotion-state-isolation — For magnetic hover or infinite loops with Motion/Framer Motion: use useMotionValue + useTransform outside render cycle; never useState — prevents performance collapse on mobilemarquee-drag-pattern — For auto-scrolling carousels that also support manual drag: use useMotionValue + useAnimationFrame (accumulator pattern) for continuous scroll, drag="x" with dragMomentum={false} and dragElastic={0} for manual override. An isDragging ref pauses the animation frame during drag; onDragEnd syncs the accumulator to motionX.get() so scroll resumes seamlessly from where the user released. Never use CSS animation: marquee when manual drag is needed — CSS animations cannot co-exist with JS position control.input-labels — Visible label per input (not placeholder-only)error-placement — Show error below the related fieldsubmit-feedback — Loading then success/error state on submitrequired-indicators — Mark required fields (e.g. asterisk)empty-states — Helpful message and action when no contenttoast-dismiss — Auto-dismiss toasts in 3–5s for informational messages only; toasts containing errors, required actions, or critical confirmations must not auto-dismiss or must be persistent and dismissible by the userconfirmation-dialogs — Confirm before destructive actionsinput-helper-text — Provide persistent helper text below complex inputsdisabled-states — Disabled elements use reduced opacity (0.38–0.5) + cursor changeprogressive-disclosure — Reveal complex options progressively; don't overwhelm users upfrontinline-validation — Validate on blur (not keystroke); show error only after user finishes inputinput-type-keyboard — Use semantic input types (email, tel, number) to trigger correct mobile keyboardpassword-toggle — Provide show/hide toggle for password fieldsautofill-support — Use autocomplete / textContentType attributesundo-support — Allow undo for destructive or bulk actionssuccess-feedback — Confirm completed actions with brief visual feedbackerror-recovery — Error messages must include a clear recovery path (retry, edit, help link)multi-step-progress — Multi-step flows show step indicator or progress bar; allow back navigationform-autosave — Long forms should auto-save drafts to prevent data losserror-clarity — Error messages must state cause + how to fix (not just "Invalid input")field-grouping — Group related fields logicallyfocus-management — After submit error, auto-focus the first invalid field (WCAG)error-summary — For multiple errors, show summary at top with anchor links to each fieldmodal-last-resort — Modals interrupt flow and block content; exhaust inline editing, slide-overs, or expandable sections first — modals are for high-stakes confirmation onlyno-window-alert — Never use window.alert() or window.confirm() — use custom inline messages and confirmation UIbottom-nav-limit — Bottom navigation max 5 items; use labels with icons (Material Design 3)drawer-usage — Use drawer/sidebar for secondary navigation, not primary actionsback-behavior — Back navigation must be predictable and consistent; preserve scroll/statedeep-linking — All key screens must be reachable via deep link / URLtab-bar-ios — iOS: use bottom Tab Bar for top-level navigation (Apple HIG)top-app-bar-android — Android: use Top App Bar with navigation icon (Material Design 3)nav-label-icon — Navigation items must have both icon and text labelnav-state-active — Current location must be visually highlighted in navigationnav-hierarchy — Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separatedmodal-escape — Modals and sheets must offer a clear close/dismiss affordancesearch-accessible — Search must be easily reachable; provide recent/suggested queriesbreadcrumb-web — Web: use breadcrumbs for 3+ level deep hierarchiesstate-preservation — Navigating back must restore previous scroll position, filter state, and inputgesture-nav-support — Support system gesture navigation (iOS swipe-back, Android predictive back)tab-badge — Use badges on nav items sparingly; clear after user visitsadaptive-navigation — Large screens (≥1024px) prefer sidebar; small screens use bottom/top navback-stack-integrity — Never silently reset the navigation stacknavigation-consistency — Navigation placement must stay the same across all pageschart-type — Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)color-guidance — Use accessible color palettes; avoid red/green only pairs for colorblind usersdata-table — Provide table alternative for accessibilitypattern-texture — Supplement color with patterns or shapes so data is distinguishable without colorlegend-visible — Always show legend; position near the charttooltip-on-interact — Provide tooltips/data labels on hover (Web) or tap (mobile)axis-labels — Label axes with units and readable scaleresponsive-chart — Charts must reflow or simplify on small screensempty-data-state — Show meaningful empty state when no data existsloading-chart — Use skeleton or shimmer placeholder while chart data loadsanimation-optional — Chart entrance animations must respect prefers-reduced-motionlarge-dataset — For 1000+ data points, aggregate or sample; provide drill-down for detailnumber-formatting — Use locale-aware formatting for numbers, dates, currenciesno-pie-overuse — Avoid pie/donut for >5 categories; switch to bar chart for claritysortable-table — Data tables must support sorting with aria-sort indicating current sort stateEvery interactive component needs all states implemented — AI default is to only build the "success" state.
loading-state — Skeleton loaders matching exact layout shape for async content; no generic circular spinners for content areasempty-state — Designed "getting started" view when no data exists — not blank space; include a clear actionerror-state — Clear inline error messages with recovery path; never window.alert()active-feedback — Tactile press feedback: scale(0.98) or translateY(1px) on :active to simulate physical clickhover-state — Every interactive element has a hover state (background shift, scale, or color change)focus-visible — :focus-visible for keyboard users; never remove outline without replacing itdisabled-visual — Disabled elements look unclickable; reduced opacity + cursor: not-allowed + no interactiondependency-check — Before importing any animation or UI library, verify it exists in package.json — never assume availabilityItems AI consistently forgets before shipping.
meta-tags — Include <title>, <meta name="description">, og:title, og:description, og:image (physical file must exist in /public/ — declaring it in metadata without the file produces broken social previews), twitter:card on every page. In Next.js App Router: declare in the metadata export of layout.tsx or page.tsx.favicon — Always include a branded favicon; no browser defaultlegal-footer — Privacy policy + terms of service links in footer where legally requiredcustom-404 — Custom branded 404 page with navigation back; never expose server default. In Next.js: app/not-found.tsx. Also add app/sitemap.ts for SEO crawlability.legal-links-real — Footer privacy policy and terms links must point to real pages, not href="#". Dead legal links are both a UX failure and a compliance risk in jurisdictions that require accessible privacy notices.skip-to-content — Hidden skip-link at page top for keyboard users: <a href="#main" class="sr-only focus:not-sr-only">cookie-consent — Compliant consent banner where required by jurisdiction (EU, UK, CA)no-dead-links — No buttons or links pointing to # without a real destination or disabled stateform-validation — Client-side validation for email format, required fields, and length limitsback-navigation — Every page has a way back; no dead ends in user flowsExtract key information from the user request:
Clone skill-ui-ux-Libera into a stable location (LIBERA convention: D:\dev\skill-ui-ux-Libera on Windows, ~/dev/skill-ui-ux-Libera on macOS/Linux) and run from the repository root:
# macOS / Linux
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
# Windows (python3 is not recognized - use py or python)
py scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]If scripts are not installed: do not claim access to style, color, typography, product, or chart databases. Apply the Quick Reference checklist manually starting from Priority 1, state assumptions explicitly, and use manual reasoning for design decisions.
| Need | Domain |
|---|---|
| Product type patterns | product |
| Style options | style |
| Color palettes | color |
| Font pairings | typography |
| Chart recommendations | chart |
| UX best practices | ux |
Apply stack-specific best practices for your chosen framework. All 16 stacks supported (see data/stacks/): React, Next.js, Vue, Nuxt, Nuxt UI, Astro, Svelte, HTML/Tailwind, shadcn/ui, React Native, Flutter, SwiftUI, Jetpack Compose, Angular, Laravel, Three.js.
alt="" and decorative icons use aria-hidden="true"<MotionConfig reducedMotion="user"> in root layoutmin-h-[100dvh], not h-screenbackdrop-blur applied only to fixed/sticky elementspackage.jsonog:image physical file exists in /public/ (not just declared in metadata)href="#"app/not-found.tsxapp/sitemap.ts present (Next.js)href="#" without disabled state)| Problem | What to Do |
|---|---|
| Can't decide on style/color | Re-run design system query with different keywords |
| Dark mode contrast issues | Quick Reference §6: color-dark-mode + color-accessible-pairs |
| Animations feel unnatural | Quick Reference §7: spring-physics + easing + exit-faster-than-enter |
| Form UX is poor | Quick Reference §8: inline-validation + error-clarity + focus-management |
| Navigation feels confusing | Quick Reference §9: nav-hierarchy + bottom-nav-limit + back-behavior |
| Layout breaks on small screens | Quick Reference §5: mobile-first + breakpoint-consistency |
| Performance / jank | Quick Reference §3: virtualize-lists + main-thread-budget + container-queries |
| Images slow to load | Use AVIF+WebP fallback; lazy-load-below-fold + image-dimension |
| iOS Safari layout jump | Replace h-screen with min-h-[100dvh] on full-height sections |
| Blur causes mobile lag | backdrop-blur only on fixed/sticky elements — never on scrolling containers |
| Scroll animations cause jank | Use IntersectionObserver; never window.addEventListener('scroll') |
| Component missing states | §11: implement loading + empty + error + active feedback for every component |
| Missing before launch | §12 checklist: meta tags, favicon, legal links, 404, skip-to-content |
| Image subject hidden under text overlay | §5 hero-image-anchor: anchor OPPOSITE to text — text left → object-right, text right → object-left |
| Cards unequal height in grid | §5 card-equal-height: h-full on every wrapper div in chain + flex flex-col on card + flex-1 on variable content |
| CSS marquee breaks when adding drag | §7 marquee-drag-pattern: use useMotionValue + useAnimationFrame — CSS animation cannot co-exist with JS position control |
Fork di ui-ux-pro-max v2.5.0 — LIBERA Studio, maggio 2026. Non sovrascrivere con aggiornamenti del plugin originale.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.