diff --git a/skills/ui-ux-pro-max.md b/skills/ui-ux-pro-max.md new file mode 100644 index 0000000..165ddf4 --- /dev/null +++ b/skills/ui-ux-pro-max.md @@ -0,0 +1,85 @@ +--- +name: ui-ux-pro-max +description: Deep UX/UI decision framework for conversion-first pages built through this plugin's Elementor tools. Read on demand when a layout decision, information hierarchy, or conversion problem needs resolving beyond the auto-loaded design-intelligence skill. +version: 1.0.0 +auto-load: false +tags: [ux, ui, conversion, layout, hierarchy, cro] +--- + +# UI/UX Pro Max — Conversion-First Decision Framework + +## When to use this skill + +Load this when you are past "which color" and into "why is this page not converting" — information architecture, scroll psychology, decision load, or a layout that technically works but feels wrong. `design-intelligence` (auto-loaded) covers the visual grammar; this covers the *decisions*. + +--- + +## The one question every screen must answer + +> What is the single next action, and is it the most obvious thing on screen? + +If a visitor cannot answer that in under one second on any viewport, the screen has failed. One primary action per view. Everything else is secondary (ghost button, text link) or removed. + +--- + +## Scroll psychology — the five zones + +A long page is read in zones, not as one surface. Build for the zone, not the pixel. + +1. **Above the fold (0–100vh)** — Promise + proof of relevance + primary CTA. The visitor decides to stay or leave here. No menus to explore, no "learn more" maze. State the value, show one CTA. +2. **Trust layer (100–150vh)** — Logos, numbers, a one-line credibility claim. This is where skepticism is answered before it's voiced. +3. **Desire build (150–400vh)** — Problem → solution → features → proof. Alternate rhythm (see design-intelligence). Each section earns the next scroll. +4. **Objection handling (400–550vh)** — FAQ, guarantees, pricing transparency. Remove the last reasons to not act. +5. **Commitment (bottom)** — Final CTA strip. Bigger, louder, zero distraction. This is the second-best converting zone after the hero. + +--- + +## Decision load — cut it ruthlessly + +Every choice you add costs conversion. Audit each section: + +- More than one primary CTA style on a page → collapse to one. +- A nav bar with 7+ items on a landing page → cut to 3–4 or remove entirely. +- A pricing table with 4+ tiers → most convert on 3. Highlight one ("Most popular"). +- A form with more than the fields you truly need → every extra field drops completion. + +When in doubt, remove. A page that does one thing beats a page that offers five. + +--- + +## Visual hierarchy — the squint test + +Squint at the rendered page (call `elementor_get_page_outline` to review structure, then look at the live URL). You should see, in order: the headline, then the CTA, then section anchors. If a decorative image or a secondary button wins the squint test, the hierarchy is inverted — fix size, weight, and contrast, not position. + +Hierarchy levers, in order of power: **size → weight → color/contrast → whitespace → position**. Reach for whitespace before you reach for a brighter color. + +--- + +## Mobile is the default, not the afterthought + +Most traffic is mobile. Decide the mobile layout first, then expand to desktop. + +- Hero text that is 72px desktop is often 34–40px mobile — set responsive typography on the widget, don't let it scale blindly. +- Containers need their own mobile padding (`elementor_update_element` / container settings). Desktop 120px vertical is suffocating at 40px mobile — drop to 60–72px. +- Multi-column feature rows stack on mobile — check the stack order reads logically top to bottom. +- The primary CTA must be reachable without hunting. A sticky CTA on mobile is often worth it. + +--- + +## Applying it through the plugin + +- Review current structure: `elementor_get_page_outline`, `elementor_get_page`. +- Fix hierarchy: `elementor_update_element` / `elementor_update_widget` for size/weight; `elementor_update_container` for spacing. +- Global consistency: `elementor_get_global_colors` / `elementor_get_global_fonts` so every fix uses the system, never a one-off hex. +- Motion to guide the eye, never to decorate: `motion_set_entrance` on the headline and CTA only (see `impeccable` for restraint rules). +- After structural changes: `elementor_regenerate_css`, then purge with `cache_purge_all` so the visitor sees the new version. + +--- + +## Anti-patterns that kill conversion + +- **Carousel heroes** — visitors see slide one and scroll. Pick the best message, commit. +- **"Welcome to our website"** headlines — say what you do for whom, not that you exist. +- **Every section the same height and rhythm** — the eye glazes. Vary density (see design-intelligence). +- **CTA that only appears once** — the hero CTA and the final CTA are the minimum; repeat the action at natural decision points. +- **Decoration mistaken for design** — if an element doesn't move the visitor toward the action or reduce an objection, it's noise.