advanced-mcp-plugin/skills/impeccable.md

name, description, version, auto-load, tags

name	description	version	auto-load	tags
impeccable	Pixel-level polish and restraint laws for high-end pages — the difference between "looks fine" and "looks expensive". Read on demand before final polish or when a page looks amateur but you can't say why.	1.0.0	false	design polish craft spacing typography restraint

Impeccable — The Craft Layer

When to use this skill

Load this at two moments: before the final polish pass on any page, and whenever something "looks off" and you can't name it. This is the craft that separates a template from a designed page. design-intelligence tells you the rules; this tells you how to apply them with taste.

---

The governing principle: restraint

Expensive design is defined by what it leaves out. Amateur design adds; impeccable design removes. Before adding any effect, shadow, gradient, or animation, ask: does the page get worse without it? If not, don't add it.

---

Spacing is the signature

The single biggest tell of quality is spacing, not color or font.

• Use a scale, never arbitrary numbers. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Every margin and padding is one of these. A 37px gap screams amateur.
• Whitespace is generous and intentional. Cramped pages feel cheap. Let the hero breathe — 120–200px vertical. Let headings sit apart from their body.
• Related elements group tight, unrelated elements sit far. Proximity communicates relationship. A label 4px from its field and 48px from the next group reads instantly.
• Consistent rhythm down the page. The vertical gap between sections should feel like one decision repeated, not improvised per section.

Apply via container and widget spacing through elementor_update_container / elementor_update_element.

---

Typography laws

• Two typefaces maximum, usually one. A display face for headings, a clean face for body — or one family across weights.
• A real type scale. Don't eyeball sizes. Ratio-based (e.g. 1.25 or 1.333): body 16–18px, then step up for h3/h2/h1. Set these on global fonts (elementor_get_global_fonts / elementor_set_global_font) so they're consistent.
• Line length 50–75 characters. Full-width body text at 1400px is unreadable — constrain the text container.
• Line height scales inversely to size. Body ~1.5–1.65; large headlines ~1.05–1.15. Tight headlines, airy body.
• Weight carries hierarchy, not just size. A 600 vs 400 contrast often reads better than a huge size jump.

---

Color discipline

• One accent color. It belongs to the primary action and almost nothing else. The moment the accent appears on three unrelated things, it stops meaning "click here".
• Neutrals do the heavy lifting. A near-black that isn't pure #000, a white that isn't pure #FFF, two or three grays. Pure black on pure white is harsh — soften both.
• Contrast where it matters, calm everywhere else. The CTA has the most contrast on the page. Body text is readable but not shouting.
• Define all of this once via elementor_get_global_colors / elementor_set_global_color and reference the system — never paste a one-off hex into a widget.

---

The details that signal craft

• Border radius is consistent. Pick one (e.g. 8px or 12px) and use it on every card, button, and image. Mixed radii look broken.
• Shadows are soft and low. One subtle shadow, large blur, low opacity. Never a hard drop shadow. If you can clearly see the shadow, it's too strong.
• Images are never stretched or pixelated. Correct aspect ratios, real resolution. Set alt text (set_image_alt, bulk_set_alt_from_title) — accessibility is part of polish.
• Alignment is pixel-true. Edges line up on a grid. A CTA 3px off from the heading above it reads as sloppy even if no one can name it.
• Buttons have states. Hover is a small, fast change — not a bounce. Restraint again.

---

Motion with taste

Motion is seasoning. The plugin exposes motion_list_presets, motion_set_entrance, motion_set_scroll_fx, motion_apply_preset.

• Entrance animations only on the elements that matter — headline, hero CTA, maybe section headings. Not on every card.
• Fast and subtle. 200–400ms, small translate/fade. A slow, large animation feels cheap and delays the content.
• One motion language per page. Don't mix a fade-up here with a zoom there with a slide-in elsewhere.
• Nothing that blocks reading. If the visitor waits for an animation to see the content, the animation lost.
• After applying motion, elementor_regenerate_css and cache_purge_all.

---

The final polish checklist

Before calling any page done:

• Every spacing value is on the scale.
• One accent color, on the CTA and little else.
• One consistent border radius everywhere.
• Shadows soft, low, singular.
• Type scale is ratio-based; body line length constrained.
• Alignment is grid-true on desktop and mobile.
• Motion is minimal, fast, and consistent.
• You removed at least one thing on the final pass. If you added only, look again.