Skill UI

A comprehensive guide to structuring effective custom prompts for AI coding assistants like Cursor. Learn the four components of prompt anatomy (Context, Task, Constraints, Format), and utilize reusable templates for complex tasks such as feature implementation, bug fixing, code review, and test generation. Master advanced techniques like Chain of Thought and Few-Shot examples to ensure high-quality, consistent code output.

Automated assistance for building React components, offering best practices, production-ready code generation, and validation guidance for frontend patterns like accessibility and performance optimization.

Automates the generation of professional, high-resolution marketing screenshots for your web application using Playwright. This skill guides you through the entire process, from gathering user requirements (product hunt, social media, documentation) to deep code analysis (routes, components). It ensures comprehensive coverage of key features, providing marketing-ready assets for your product launch or documentation.

A comprehensive skill set for modern frontend development using React, Next.js, TypeScript, and Tailwind CSS. It covers automated project scaffolding, component generation (including hooks and stories), and critical bundle analysis. Use this to enforce best practices, optimize performance, and maintain high code quality in large-scale web applications.

This skill covers the implementation of Ed25519 digital signatures, a high-performance algorithm utilizing the Curve25519 structure. It details key pair generation, message signing, and signature verification. Ed25519 offers superior performance, determinism, and side-channel resistance compared to RSA and ECDSA. Use this skill for establishing robust authentication, ensuring data integrity, and securing system components like code or APIs.

This skill guides the implementation of essential user feedback states—Loading (Skeleton), Empty (Zero Data), Error, and Success—for data-dependent components or entire pages. It ensures a robust and polished user experience by providing structured, best-practice patterns for handling various data scenarios, preventing visual gaps or dead ends in the UI flow.

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.

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.

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 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 integration automates the critical process of converting design assets from Figma into production-ready code using Anima. It establishes a full CI/CD pipeline via GitHub Actions, enabling scheduled or manual component generation. Use this when automating design system handoffs, maintaining code synchronization with design changes, or implementing robust, reliable development workflows.

A suite of utilities designed to significantly boost Anima code generation performance. It implements file-based caching with Time-To-Live (TTL) management, enables incremental updates by tracking only changed Figma components, and optimizes output size by cleaning up comments and excess whitespace. Ideal for optimizing large batch generations or speeding up production build pipelines.