719 skills · sorted by relevance
Build Vue 3 components with TypeScript and Composition API, a way to organize component logic. Define inputs, events, and two-way bindings, manage reactive data, and use built-in components for transitions and state preservation.
Design and refine web animations for buttons, dialogs, menus, and gestures. The skill guides timing, changes in speed, spring motion, performance, and reduced-motion preferences so transitions fit the interaction and remain responsive.
Add an animation that makes a finished interface look as though an AI agent is building it. It traces the element’s actual layout with dots, then reveals the interface, optionally alongside generation logs and CSS text.
Use when planning, sequencing, or troubleshooting an org-wide migration from Salesforce Classic to Lightning Experience. Covers the LEX Transition Assistant Readiness Check, asset triage matrix (Visualforce, JavaScript buttons, page layouts, Knowledge, email templates, list views, AppExchange), pilot/wave rollout sequencing, end-user adoption telemetry, and cutover criteria. Triggers: 'lightning experience transition', 'classic to lightning migration plan', 'LEX readiness check', 'why are some users still on Classic', 'turning on Lightning for everyone'. NOT for individual asset migrations like a single VF page (use lwc/visualforce-to-lwc-migration), a single JavaScript button (use admin/custom-button-to-action-migration), or Knowledge article migration (use admin/knowledge-classic-to-lightning) — this skill orchestrates the program. NOT for Lightning App Builder page design (use admin/lightning-app-builder-advanced).
The English summary is being prepared. Showing the original description.
Production-ready CSS transition snippets for web apps. Use when adding or reviewing UI motion for badges, dropdowns, modals, panel/page reveals, card resizes, number pop-ins, text/icon swaps, success checks, avatar-group hovers, and validation shakes. Supports namespaced commands: transitions reveal (list catalog), transitions review (audit project fit), and transitions apply (install the best-fit snippet with hooks and reduced-motion handling).
The English summary is being prepared. Showing the original description.
Create videos in React with Remotion using focused implementation guidance and code examples. The skill covers animation, audio, captions, charts, 3D content, and scene transitions, along with handling media assets and timing.
Add animations to React and Next.js interfaces, including buttons, modals, notifications, page transitions, and scrolling content. Uses shared motion settings and reusable patterns for elements entering, leaving, moving, or changing size.
Create a glitch styled title screen for video transitions or cyberpunk visuals. The single HTML file combines large headlines, cyan and magenta color offsets, scanlines, noise, and animated distortions using your title and subtitle.
Build Remotion videos using the toolkit’s shared backgrounds, comparison layouts, presenter overlays, and custom scene transitions. Apply its 30fps timing conventions and rendering practices to assemble scenes and coordinate them with voiceover.
Modernize existing React applications through version upgrades and migration from class components to Hooks, functions for state and lifecycle behavior. Includes React 18 rendering APIs, grouped state updates, and features for prioritizing interface updates.
Create a glitch styled title screen for video transitions or cyberpunk visuals. The single HTML file combines large headlines, cyan and magenta color offsets, scanlines, noise, and animated distortions using your title and subtitle.
Use this skill when the user wants a .pptx with smooth cross-slide animation — PowerPoint Morph transitions, Keynote-style continuous motion, shapes that grow / move / rotate as the slide advances. Trigger on: 'morph', 'morph transition', 'smooth transition', 'continuous animation across slides', 'Keynote-style transition', 'animated slide sequence', 'shape continuity across slides'. Output is a single .pptx. This skill is a scene layer on top of officecli-pptx — inherits every pptx v2 rule (visual floor, grid, palettes, connector canon, Delivery Gate 1–5a). DO NOT invoke for a generic deck, pitch deck, or board review without cross-slide motion — route those to officecli-pptx base or officecli-pitch-deck.
The English summary is being prepared. Showing the original description.
Use this skill when the user wants a .pptx with smooth cross-slide animation — PowerPoint Morph transitions, Keynote-style continuous motion, shapes that grow / move / rotate as the slide advances. Trigger on: 'morph', 'morph transition', 'smooth transition', 'continuous animation across slides', 'Keynote-style transition', 'animated slide sequence', 'shape continuity across slides'. Output is a single .pptx. This skill is a scene layer on top of officecli-pptx — inherits every pptx v2 rule (visual floor, grid, palettes, connector canon, Delivery Gate 1–5a). DO NOT invoke for a generic deck, pitch deck, or board review without cross-slide motion — route those to officecli-pptx base or officecli-pitch-deck.
The English summary is being prepared. Showing the original description.
World-class motion design expertise combining Disney's 12 principles of animation, Material Design's motion system, and the performance-first philosophy of production interfaces. Motion design is the craft of bringing interfaces to life - not through decoration, but through clarity, continuity, and communication. Great motion design is invisible. Users don't notice the animations - they notice that the interface feels natural, responsive, and alive. Every transition tells a story: where did this come from? Where is it going? What just happened? Motion is the language of cause and effect in digital interfaces. Use when "animation, motion, transition, microinteraction, easing, timing, choreography, loading animation, skeleton loader, page transition, hover effect, scroll animation, spring animation, keyframes, framer motion, gsap, lottie, animation, motion, transitions, microinteractions, easing, timing, accessibility, performance, frontend, design" mentioned.
The English summary is being prepared. Showing the original description.
Use this skill when the user wants a .pptx with smooth cross-slide animation — PowerPoint Morph transitions, Keynote-style continuous motion, shapes that grow / move / rotate as the slide advances. Trigger on: 'morph', 'morph transition', 'smooth transition', 'continuous animation across slides', 'Keynote-style transition', 'animated slide sequence', 'shape continuity across slides'. Output is a single .pptx. This skill is a scene layer on top of officecli-pptx — inherits every pptx v2 rule (visual floor, grid, palettes, connector canon, Delivery Gate 1–5a). DO NOT invoke for a generic deck, pitch deck, or board review without cross-slide motion — route those to officecli-pptx base or officecli-pitch-deck.
The English summary is being prepared. Showing the original description.
Reviews iOS animation code for correctness, performance, accessibility, and Apple API best practices. Use when reviewing .swift files containing animation code — withAnimation, .animation(), PhaseAnimator, KeyframeAnimator, matchedGeometryEffect, navigationTransition, CABasicAnimation, CASpringAnimation, UIViewPropertyAnimator, UIDynamicAnimator, symbolEffect, scrollTransition, contentTransition, or custom Transition conformances.
The English summary is being prepared. Showing the original description.
View Transitions API patterns - same-document transitions, cross-document navigation, shared element animations, pseudo-element styling, transition types, reduced-motion handling
The English summary is being prepared. Showing the original description.
Bulk JIRA operations on 10+ issues via the jira-as wrapper: bulk transition / assign / set-priority / clone / delete. Dry-run is MANDATORY first. Triggers: 'bulk update N issues', 'mass transition', 'transition 50+ issues to Done', 'bulk-clone', 'bulk-delete'. NOT for single-issue ops (mk:jira-issue / mk:jira-lifecycle).
The English summary is being prepared. Showing the original description.
Drive JIRA workflow lifecycle via the jira-as wrapper: transition, assign, resolve, reopen, manage versions and components. Triggers: 'transition KEY to Status', 'mark KEY as Done', 'assign KEY to user', 'reopen KEY', 'release version', 'create component'. NOT for issue CRUD (mk:jira-issue); NOT for bulk transitions (mk:jira-bulk).
The English summary is being prepared. Showing the original description.
Animation, morphing, and shader best practices for Liquid Glass and SwiftUI motion on iOS 26+/macOS 26+ through iOS 27. Use when animating glass or building UI motion: glassEffectID, @Namespace morphing, GlassEffectContainer spacing, glassEffectUnion, glassEffectTransition (.matchedGeometry/.materialize), withAnimation, springs, UnitCurve, PhaseAnimator, KeyframeAnimator, @Animatable, matchedTransitionSource, navigationTransition zoom, scrollTransition, visualEffect, Metal shaders (colorEffect, distortionEffect, layerEffect, [[stitchable]]), accessibilityReduceMotion gating, Instruments/xctrace profiling of hangs and animation hitches. Also fires on symptoms: glass morph not animating, view pops in instead of morphing, glass fades instead of materializing, morph flickers with Reduce Motion, menu glass morphs as a rectangle, animation runs on insert but not removal, PhaseAnimator loops forever or fires once, shader shows clipped edges (maxSampleOffset), animation hitches or main-thread hangs while scrolling glass chrome. For static glass, availability gating, toolbars, UIKit/AppKit glass, or accessibility of the material itself use the liquid-glass skill first.
The English summary is being prepared. Showing the original description.
Implement, review, or improve SwiftUI animations and transitions. Use when adding explicit animations with withAnimation, configuring implicit animations with .animation(_:body:) or .animation(_:value:), configuring spring animations (.smooth, .snappy, .bouncy), building phase or keyframe animations with PhaseAnimator/KeyframeAnimator, creating hero transitions with matchedGeometryEffect or matchedTransitionSource, adding SF Symbol effects (bounce, pulse, variableColor, breathe, rotate, wiggle), implementing custom Transition or CustomAnimation types, or ensuring animations respect accessibilityReduceMotion.
The English summary is being prepared. Showing the original description.
Implement animated effects, transitions, and movement in Flutter apps. Use it when adding motion to native iOS and Android app interfaces, with support for turning requests for animation into implementation work.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
Review CSS custom properties, often called CSS variables, used in animations and transitions. Add @property registrations with value types, initial values, and inheritance settings to support smooth changes and validate assigned values.