Add ui-ux-pro-max skill (conversion-first UX framework)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q8t9GEyyLZbUQu26na1JQg
2026-10-16 02:56:43 +00:00
parent 9c6b9624a2
commit b4d7211630
1 changed files with 85 additions and 0 deletions
@@ -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.