skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

cast

Implements motion, micro-interactions, and animations across Web, Android Compose, and SwiftUI stacks.

Updated Jul 20, 2026
Search Tags:#animation#swiftui#jetpack compose#micro-interactions#motion design#gsap#framer-motion
One-click install
npx skills add https://github.com/Jatinkrmahato993203/crime --skill cast-jatinkrmahato993203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cast
Source: https://github.com/Jatinkrmahato993203/crime/tree/main/skills/cast
Command: npx skills add https://github.com/Jatinkrmahato993203/crime --skill cast-jatinkrmahato993203

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding animations and micro-interactions to a UI often results in generic, inconsistent, or performance-heavy effects. This Skill provides a disciplined pipeline that scans your tech stack, validates an interaction thesis before coding, and implements motion that respects performance budgets and accessibility requirements. ## Core Features & Use Cases - Stack Detection: Automatically scans for animation libraries (GSAP, Framer Motion, Three.js), frameworks (React, Vue, Svelte), and native platforms (Android Compose, SwiftUI, Compose Multiplatform) before proposing anything. - Thesis-First Workflow: Formulates a one-sentence interaction thesis and waits for your validation before writing any code, preventing wasted effort on the wrong direction. - Scoped Implementation: Matches complexity to the task, from a single hover effect (light) to a full visual overhaul with 2-3 presented variants (medium/full). - Pre-Delivery Audit: Runs stack-specific checklists covering reduced-motion support, 60fps performance, recomposition counts, accessibility labels, and keyboard navigation. - Use Case: Ask to make a React hero section feel cinematic, and it detects your stack, proposes a GSAP parallax thesis, implements it after your approval, and verifies frame rate and reduced-motion compliance. ## Quick Start Ask the assistant to add a scroll-triggered parallax animation to your hero section and let it scan your project stack first.

Frequently Asked Questions about cast

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add animations to a React component with Framer Motion?▼

The skill scans your package.json to detect Framer Motion, then proposes an interaction thesis such as layout animations with shared element transitions. After you validate the thesis, it implements the animation and audits it for reduced-motion support and 60fps performance.

How to animate UI in Jetpack Compose without hurting performance?▼

Compose animations should use Modifier.graphicsLayer with translationX/Y and scaleX/Y instead of animating width or height, which triggers layout passes. The skill also checks recomposition counts and verifies frame timing on mid-range devices like the Pixel 4a.

Does this work with SwiftUI on iOS and macOS?▼

Yes, it detects SwiftUI via Package.swift or xcodeproj files and distinguishes iOS from macOS targets. It applies matchedGeometryEffect and spring animations, with macOS-specific checks for hover states, keyboard shortcuts, and focus rings.

GSAP vs CSS transitions for simple hover effects?▼

For isolated hover effects, CSS transitions are preferred since a GSAP pipeline is disproportionate for light scope. The skill matches tooling complexity to task scope and respects any animation library already present in your project.

Why do web animations fail accessibility audits?▼

Animations fail audits when they ignore prefers-reduced-motion, lack exit animations, or use clickable divs without proper roles. The skill's audit checklist verifies reduced-motion handling, focus visibility, aria-hidden on decorative elements, and complete interactive states.

When should I not add animations to a UI?▼

Avoid animations when they animate layout properties causing reflows, when the scope doesn't justify the tooling, or when they add visual noise without purpose. The skill rejects generic effects like gratuitous glassmorphism and requires a validated thesis before any implementation.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

optimize

Diagnose and fix UI performance issues using Core Web Vitals measurements.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
toddbadamstoddbadams

framer-motion

Implement declarative animations, transitions, and gestures in React with Framer Motion.

Community
Intermediate