Skill UI

A comprehensive guide to understanding the complete state (context) available to Large Language Models during inference. Covers core components like System Prompts, Tool Definitions, Message History, and Retrieval Augmented Generation (RAG). Learning to engineer context is crucial for building robust, efficient, and reliable AI agent systems by managing the attention budget and ensuring high-signal information delivery.

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.

A comprehensive toolkit for senior UI designers to build robust and scalable design systems. It guides the generation of design tokens (colors, spacing, typography), structuring component libraries (Atoms to Organisms), implementing responsive layouts, and preparing detailed developer handoff documentation. Essential for maintaining visual consistency and bridging the gap between design and development.

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.