Loading...
Loading...
Found 7 Skills
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Write and review high-performance React Native animations and 2D graphics using react-native-reanimated (v4+) and @shopify/react-native-skia (Canvas scenes, runtime effects/shaders). Use for: gesture-driven interactions, spring/timing transitions, layout/mount animations, Reanimated CSS transitions/animations, Skia drawings, animated shader uniforms, path/vector interpolation, dev-mode tuning panels (sliders), and diagnosing animation jank (JS thread stalls, excessive re-renders, per-frame allocations).
Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: "gesture design", "Apple Pencil", "keyboard shortcuts", "game controller", "pointer support", "mouse support", "trackpad", "Digital Crown", "eye tracking", "visionOS input", "focus system", "remote control", "gyroscope", "spatial interaction". Also use when the user says "what gestures should I support," "how do I add keyboard shortcuts," "how does input work on Apple TV," "should I support Apple Pencil," or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
SwiftUI and AppKit animation best practices for Apple platforms. Use when writing, reviewing, or implementing animations in SwiftUI (iOS 17+) or AppKit. Triggers on tasks involving transitions, easing, springs, gestures, matched geometry, phase animators, or motion.
Master mobile UX - iOS HIG, Material Design, gestures, responsive design, platform optimization
React Native Reanimated 4.x best practices, 60fps animation patterns, bug fixing, and code enhancement for Android and iOS. Use when writing, reviewing, fixing, or optimizing Reanimated animation code, gesture-driven interactions, worklets, layout animations, or shared element transitions. Triggers on tasks involving react-native-reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, Gesture.Pan, layout animations, worklet debugging, animation performance optimization, or troubleshooting janky animations. Also use when the user wants to fix animation bugs, enhance animation smoothness, review gesture code, or achieve 60fps on both Android and iOS. Also triggers when the user asks to review, audit, check, or upgrade their Reanimated code to best practices, or asks "is my animation code good", "check my reanimated code", "update to best practices", "review my animations", or similar requests.