Skill UI

This skill provides comprehensive strategies for managing rate limits when interacting with the Figma REST API. It implements crucial patterns like exponential backoff, respects 'Retry-After' headers, utilizes request queuing with concurrency control, and includes a proactive rate limit monitor. Use this when developing high-volume, resilient integrations that frequently encounter 429 errors or require optimized API throughput.

A comprehensive reference architecture for building production-grade integrations with the Figma REST API. This guide covers the full design-to-code pipeline, including design token extraction, scalable asset export (icons/images), and robust webhook event handling. Ideal for architects planning new Figma services, establishing project structure, or implementing complex design system workflows.

This guide details advanced patterns for building production-grade fault-tolerant integrations with external APIs, specifically targeting Figma. Learn to implement critical reliability mechanisms such as Circuit Breakers to prevent cascading failures, cached fallbacks for graceful degradation, exponential backoff retries for rate limits, and request timeouts. Use this when your application must remain stable despite external service outages or performance degradation.

This comprehensive guide outlines essential security protocols for integrating with the Figma API. It covers best practices including securely storing Personal Access Tokens (PATs), implementing least-privilege scopes, managing token rotation lifecycles, and verifying incoming webhook payloads. Use this when setting up, auditing, or maintaining production-grade Figma integrations to ensure data integrity and prevent unauthorized access.

Learn how to implement and handle Figma Webhooks V2 for real-time integrations. This guide covers setting up the webhook endpoint, processing various event types (like file updates, comments, and library publishes), verifying payloads using passcodes, and implementing best practices such as idempotency for robust, event-driven automation workflows.

This expert assistant specializes in creating, generating, editing, and optimizing professional visual assets for marketing campaigns. Whether you need blog heroes, social media graphics, product mockups, or brand banners, it guides you through selecting the right AI model (e.g., Gemini, Midjourney, Ideogram) or design workflow (e.g., Figma, Canva). It provides best practices for prompting, consistency, and web optimization, ensuring high-quality, brand-compliant visuals every time.

This skill allows users to build and maintain complex UI components and full screens directly within Figma using the Figma MCP. It rigorously enforces a defined design system (like Rayna UI) by validating design tokens, applying craft rules, detecting anti-patterns, and ensuring visual consistency. Ideal for creating new components, composing entire dashboards or landing pages, or auditing existing files for compliance.

Generates comprehensive and structured developer handoff annotations for any Figma screen or component. This tool transforms raw visual designs into precise, buildable specifications, covering interactions, states (loading, error, success), accessibility requirements, and edge cases, ensuring developers receive everything needed for implementation.

This skill performs a comprehensive audit of Figma component libraries. It checks for naming inconsistencies, component coverage gaps, variant completeness, and overall design system health. The output provides a structured report with prioritized issues, actionable naming conventions, and a step-by-step fix plan, ensuring design consistency across products.

Automatically generates a comprehensive, structured design brief for Figma. Users can input raw product requirements or feature requests, and the skill outputs a complete spec including goals, detailed user flows, required screens, component usage, constraints, and success criteria, ensuring designers have everything needed to start building confidently.

Provides a structured, outcome-based critique of design concepts, shifting the focus entirely from aesthetics to product viability. This skill is ideal for Product Managers needing to assess whether a design achieves specific user goals, meets core business metrics, and satisfies original requirements. It generates actionable feedback tied to measurable outcomes, ensuring all critique points are evidence-based and strategically relevant.

Runs a comprehensive, systematic QA check on Figma designs to ensure they are production-ready before handing off to engineering. The checklist rigorously evaluates file hygiene, component consistency, accessibility (WCAG AA), content completeness, and overall readiness across multiple platforms (iOS/Android/Web). Use this skill when needing to validate a design’s quality and structure to prevent costly development rework.