Skill UI

Anime.js is a powerful and lightweight JavaScript animation engine designed for creating high-fidelity, complex web animations. It provides precise control over DOM, CSS, and SVG elements, allowing developers to build sophisticated, award-caliber user interfaces. Ideal for orchestrating multi-stage landing pages, implementing staggered reveals, and animating intricate SVG paths using advanced easing functions and timelines.

Utilizes advanced AI to generate, compare, and integrate multiple production-ready, modern, and highly customizable UI component variations. Instead of a single solution, this skill provides multiple design options (e.g., pricing tables, contact forms) with advanced styling like glassmorphism and animations, ensuring the final design is unique and visually stunning. Ideal for front-end developers and designers pushing design boundaries.

A comprehensive guide covering best practices for creating videos using Remotion and React. Learn how to incorporate advanced features such as 3D rendering (Three.js), complex animations, audio synchronization, data charting, subtitles, and sophisticated scene transitions. This skill covers 29 domain-specific rules for professional video pipelines.

Manim is a powerful Python library used for creating high-quality mathematical and scientific animations. This skill facilitates the generation of educational videos and complex visualizations for presentations. It is ideal for researchers, educators, or content creators who need to visualize complex concepts in an engaging animated format. Note: This specific file is related to localization/translation.

A comprehensive skill guide for building production-grade, scroll-driven motion animations. It covers advanced techniques like parallax effects, sticky sections, horizontal scrolling, and staggered reveals using both the GSAP ScrollTrigger API and Framer Motion hooks. Ideal for implementing complex, performant animations in vanilla JavaScript, React, and Next.js.

This guide provides comprehensive troubleshooting for common issues encountered when converting Figma designs to code using the Anima SDK. It covers authentication failures (Figma/Anima tokens), specific node/file lookup errors, code rate limits, and output quality problems, helping developers ensure accurate and robust code generation.

This skill provides actionable strategies and code patterns to significantly reduce Anima API costs. It focuses on optimizing usage through generation caching, detecting component changes for incremental generation, and implementing smart policies to minimize unnecessary API calls. Ideal for managing large-scale design-to-code workflows and controlling API budget.

This utility generates a comprehensive JSON debug bundle for troubleshooting and support requests related to the Anima SDK. It collects vital information, including environment details, Figma API connectivity status, and verifies the Anima SDK generation capabilities. Use it when filing support tickets or debugging code generation issues.

Leverages the Anima SDK to convert visual designs from Figma into production-ready code across multiple modern frameworks (React, Vue, HTML). It supports clean TypeScript integration and Tailwind CSS styling, making it ideal for developers building automated design-to-code pipelines or rapidly prototyping complex UI components directly from design mockups.

Implements an iterative development workflow using the Anima SDK. This tool allows developers to quickly generate, compare, and preview code outputs from Figma designs across multiple frameworks (React, Vue, HTML/CSS) in a local environment. Ideal for rapid prototyping, cross-framework comparison, and refining design-to-code implementation.

This guide provides a reference architecture for automating the design-to-code workflow. It outlines the complete pipeline—from Figma design input to structured React/Vue output—detailing components like Figma API integration, code generation, and crucial post-processing steps (token mapping, normalization). Ideal for establishing scalable design systems and managing large-scale design handoffs in a professional environment.

This guide assists developers in upgrading the Anima SDK versions and managing associated API changes. It covers migrating from manual Figma plugin workflows to automated SDK-based code generation, ensuring seamless integration of the latest design system features into development projects.