advanced-mcp-plugin/skills/ui-ux-pro-max.md

name, description, version, auto-load, tags

name	description	version	auto-load	tags
ui-ux-pro-max	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.	1.0.0	false	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.