Motion And Micro Interactions

Automattic/design-polish-suite/motion-and-micro-interactions

otherResmi

Resmi Sağlayıcı Skill'iView repo

Apply the motion language of premium VC-funded sites — specific cubic-bezier easings (not ease-in-out), snappy 75-200ms durations, mechanical press feedback, orchestrated hover deltas, width-animated buttons, mouse-tracking gradients, blur-in reveals, scroll-linked reveals. Use when interactions feel "springy and generic" or when the user wants their site to feel responsive, alive, physical.

Dosyalar1 dosya

SKILL.md364 satır

Loading editor…

Kurulum

Önerilen

Tek komut — ajanınız otomatik olarak devreye alır.

AI aracını seç

Kurulum komutunu görmek için yukarıdan bir AI aracı seçin.

veya

Manuel Kurulum

Daha fazla adım

Dosyayı indirin ve ajanınızın sistem istemine yapıştırın.

Skill detayları

Versiyonv1.0.0

YazarAutomattic

Kategoriother

Skill IDAutomattic/design-polish-suite/motion-and-micro-interactions

İlgili skill'ler

De Slopify AuditScan a site for AI-slop defaults and replace them with premium patterns. Detects generic giveaways (Inter everywhere,Design Polish SuiteThe full design glow-up toolkit. Turns forgettable interfaces into something that looks like a real designer touched it. Routes to 6 sub-skills for de-slopifying, typography, spacing, gradients, motion, and adding that one detail people actually remember. Use when a UI feels mid, generic, AI-generated, or just painfully beige.Soft Gradient DreamyApply the warm, atmospheric, multi-layer shadow aesthetic used by premium SaaS sites like Hex, Antimetal, Incident, Outseta, Cohere, and Amplemarket. Warm off-white grounds, tinted shadows that harmonize with theme, multi-stop gradients at deliberate angles, inset highlights for dual-edge lighting. Use when the user wants their site to feel atmospheric, luminous, warm, editorial — NOT cold SaaS purple/blue.Spatial Rhythm And WhitespaceApply the spacing, container, grid, and border-radius rhythm of premium VC-funded sites. Generous 80-160px section padding, intentional non-strict spacing scales (including 20/28/40), deliberate radius architecture (binary 0-or-pill, asymmetric interlocking, per-element variety), 40px paragraph-spacing on h2, 1px hairline dividers at 4-10% opacity. Use when layouts feel cramped, monotonous, or use "rounded-md everywhere."Typography That SellsUpgrade typography from generic SaaS to premium, authored, high-conviction design. Uses distinct display fonts, lighter body weights, tight negative tracking, mono eyebrows, restrained serif accents, and OpenType details to create typography with taste, authority, and emotional signal. Use when a page feels flat, template-y, overly safe, or visually anonymous.Need For SpeedRun a frontend performance audit on a WordPress site and get actionable optimization recommendations.