Add impeccable skill (pixel-level polish and restraint laws)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q8t9GEyyLZbUQu26na1JQg

skills/impeccable.md

@@ -0,0 +1,88 @@
+---
+name: impeccable
+description: 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.
+version: 1.0.0
+auto-load: false
+tags: [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.