Skill UI

This skill demonstrates how to create an event-driven pipeline using Figma's Webhooks. It listens for design file changes and automatically triggers Anima to regenerate production-ready code components (e.g., React/TypeScript/Tailwind). Ideal for integrating continuous design updates into CI/CD workflows.

This skill integrates the agent with the Matrix/Element messaging platform. It enables full conversational capabilities, allowing users to receive real-time alerts, search content, and control connected systems (such as cameras) directly from a designated Matrix room. It supports multi-turn interactions, including sending files, reacting, editing, and managing threads.

This skill integrates an AI agent (Clawdbot) with Signal, one of the most private messaging platforms. It enables automated communication by utilizing the signal-cli tool to perform actions such as sending messages, sending files, reacting, and replying within a designated chat channel. Ideal for building secure, automated bot interactions in private messaging environments.

This guide provides advanced techniques to boost Framer API performance. It covers critical optimization areas including batch CMS syncing to prevent timeouts, memoizing expensive React components for better render performance, establishing persistent WebSocket connections, and optimizing image URLs before CMS synchronization. Use this when aiming to improve overall speed and stability of Framer-integrated applications.

A comprehensive skill for implementing secure, real-time webhook endpoint handling for Canva. This module covers receiving and verifying signed JWT payloads using JWK keys, enabling your application to react instantly to various user interactions (e.g., comments, design sharing, access requests). Ideal for building sophisticated SaaS integrations and automating workflows based on Canva activity.

A comprehensive checklist for validating the production readiness of design-to-code pipelines, specifically for Anima's service converting Figma designs into React, Vue, and HTML. Use this guide when deploying automated code generation services, setting up CI/CD for design handoffs, or validating output quality to ensure component integrity and prevent production failures.

A practical coach designed to develop the four core EQ competencies: self-awareness, self-regulation, empathy, and social skills. Utilizing concepts from affective neuroscience and established frameworks, it guides users to identify precise emotions, understand triggers, manage difficult feelings non-reactively, and improve interpersonal relationships while accounting for cultural emotional norms.

A comprehensive, multi-chain reference architecture for building robust decentralized applications (dApps) powered by Alchemy. This guide outlines the full stack, from the React/Next.js frontend and API layer to core blockchain interactions, incorporating best practices like rate limiting, caching, and secure API proxying. Ideal for planning complex, production-grade Web3 systems across multiple chains (ETH, Polygon, etc.).

This guide provides a comprehensive workflow for deploying Algolia-powered search applications to various cloud platforms, including Vercel, Fly.io, and Google Cloud Run. It covers best practices for API key separation (Admin vs. Search-Only), setting up environment variables, and implementing both backend API routes and advanced frontend components using React InstantSearch or vanilla JavaScript.

This workflow automates the design handoff process by creating a continuous pipeline from Figma designs to functional React code. It scans Figma components, generates code batches (supporting TypeScript, Tailwind CSS, etc.), and includes change detection to automatically update the codebase when the design source changes. Ideal for building complex design systems and implementing CI/CD design-to-code workflows.

This advanced workflow allows developers to clone live websites directly into structured React or HTML code using the Anima platform. It goes beyond simple cloning by featuring post-generation customization rules (e.g., updating utility classes or imports) and a dedicated design token mapper. This ensures the generated code is immediately usable and adheres strictly to the project's existing design system tokens, while also organizing the final component structure.

This guide details how to install and configure the Anima SDK for robust Figma-to-code generation. It is essential for developers setting up design-to-code automation pipelines, requiring configuration of both Anima and Figma API tokens. The SDK enables converting designs into production-ready React, Vue, or HTML components with Tailwind, MUI, or AntD styling.