Interaction skills
How controls respond to people: hover, press, focus, feedback and state changes.
107 skills, page 1 of 3
Skills
Prototypeby mattpocock
Builds throwaway prototypes to answer design or logic questions quickly.
LayoutExternalGitHub stars: 306.5K
Canvas Designby anthropics
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
VisualExternalGitHub stars: 184.8K
Industrial Brutalist Uiby Leonxlnx
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
TasteExternalGitHub stars: 105.4K
Redesign Existing Projectsby Leonxlnx
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
TasteExternalGitHub stars: 105.4K
Adaptby pbakaus
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
InteractionExternalGitHub stars: 95.1K
Animateby pbakaus
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
MotionExternalGitHub stars: 95.1K
Bolderby pbakaus
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
VisualExternalGitHub stars: 95.1K
Clarifyby pbakaus
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
InteractionExternalGitHub stars: 95.1K
Delightby pbakaus
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
InteractionExternalGitHub stars: 95.1K
Distillby pbakaus
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
Design SystemsExternalGitHub stars: 95.1K
Shapeby pbakaus
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
InteractionExternalGitHub stars: 95.1K
Animateby emilkowalski
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
MotionExternalGitHub stars: 51.4K
Animate Expoby emilkowalski
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
MotionExternalGitHub stars: 51.4K
Apple Designby emilkowalski
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
MotionExternalGitHub stars: 51.4K
Ask Sonnerby emilkowalski
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.
LayoutExternalGitHub stars: 51.4K
Find Animation Opportunitiesby emilkowalski
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
MotionExternalGitHub stars: 51.4K
Prototypeby emilkowalski
Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.
LayoutExternalGitHub stars: 51.4K
Review Animationsby emilkowalski
Review animation quality, timing, and motion consistency with a production-critical eye.
MotionExternalGitHub stars: 51.4K
Interaction Designby wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
InteractionExternalGitHub stars: 42K
Gsap Coreby greensock
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Pluginsby greensock
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltriggerby greensock
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
MotionExternalGitHub stars: 17.5K
Landing Page Designby elayadesign
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
VisualExternalGitHub stars: 12K
Scroll Worldby oso95
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
VisualExternalGitHub stars: 10.7K
Better Accessibilityby jakubkrehel
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
AccessibilityExternalGitHub stars: 9.2K
Better Uiby jakubkrehel
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
VisualExternalGitHub stars: 9.2K
Variantby jakubkrehel
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.
VisualExternalGitHub stars: 9.2K
Animation on Scrollby MengTo
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
MotionExternalGitHub stars: 7.1K
Gsapby MengTo
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
MotionExternalGitHub stars: 7.1K
Gsap Scrolltrigger Storytellingby MengTo
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
MotionExternalGitHub stars: 7.1K
Landing Pageby MengTo
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
VisualExternalGitHub stars: 7.1K
Marquee Loopby MengTo
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
MotionExternalGitHub stars: 7.1K
Matterjsby MengTo
Use when building physics-driven interactions and layout behaviors with Matter.js.
MotionExternalGitHub stars: 7.1K
Pricing Pageby MengTo
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
VisualExternalGitHub stars: 7.1K
Vueby antfu
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
InteractionExternalGitHub stars: 6K
Vue Router Best Practicesby antfu
Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.
InteractionExternalGitHub stars: 6K
Refine Liveby Jakubantalik
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
MotionExternalGitHub stars: 5.9K
Interface Designby Dammyjay93
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
VisualExternalGitHub stars: 5.9K
Swiftui Ui Patternsby dimillian
Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.
ResponsiveExternalGitHub stars: 4K
Make Interfaces Feel Betterby jakubkrehel
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
TasteExternalGitHub stars: 3.9K