Skill UI

Generates production-ready Kubernetes deployment, service, ingress, and autoscaler manifests using best practices such as health checks, TLS, and resource limits. Use this when creating or updating deployments, services, ConfigMaps, Secrets, or other Kubernetes resource manifests for any application.

Guides use of the Figma MCP server to pull design context, screenshots, variables, and assets, then convert nodes into production-ready code following project conventions and validation steps.

Implements user-provided Figma nodes into production-ready code via the MCP workflow, ensuring design-token compliance, asset handling, and 1:1 visual fidelity for agreed UI components.

This skill provides step-by-step guidance for creating production-ready Kubernetes manifests. It covers essential resources including Deployments, Services, ConfigMaps, Secrets, and PersistentVolumeClaims. Use this skill when defining complete, robust containerized application architectures, managing network connectivity, stateful workloads, and ensuring adherence to Kubernetes best practices like resource limits and security contexts.

Automates Kubernetes ConfigMap handler tasks by providing step-by-step guidance, best practice patterns, and production-ready code as part of an advanced DevOps workflow focused on Terraform, Helm, and infrastructure-as-code.

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 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.

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.