Skill UI

Automates Figma workflows through Rube MCP and Composio, covering file inspection, component/token extraction, exports, comments, and team browsing while guiding schema discovery before each run.

Automates Figma workflows via Composio's Rube MCP client, covering file inspection, exports, design token extraction, comments, and project browsing while enforcing tool discovery first.

Automate the complex process of migrating design systems, design tokens, and styles between multiple Figma files, or from external sources into Figma. This tool covers the full pipeline: inventorying assets, extracting raw style data (colors, typography, effects), transforming them into structured design tokens (e.g., JSON format), and finally writing them back into Figma variables using the Variables API. Ideal for maintaining consistency across large design libraries.

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.

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.

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.

This skill guides the planning and structuring of Figma prototypes specifically for usability testing and user research. It helps define the precise scope (in/out scope), specifies every interaction detail (trigger, elements, animations), builds comprehensive flow diagrams, and generates detailed test task scripts. It ensures the prototype is the minimum viable version needed to answer the research questions, preventing scope creep and over-engineering.

This skill generates a comprehensive spacing and layout token system for Figma. It establishes foundational design rules, including a scalable spacing scale (e.g., 4px/8px base), responsive grid definitions for various breakpoints, and component-specific spacing conventions. It ensures design consistency and provides clear guidelines for developer handoff.

This skill provides a comprehensive blueprint for designing digital products within Figma. It systematically maps out entire user journeys, including happy paths, loading states, error conditions, empty states, and edge cases. By defining the complete flow and suggested file structure beforehand, it prevents scope creep and ensures designers account for every necessary screen variant before starting the actual design work.

This skill systematically defines all necessary variants, states, and properties for a Figma component before development. It ensures comprehensive coverage of all states (e.g., Hover, Disabled, Loading) and properties (e.g., Size, Type), generating a robust variant matrix that prevents critical design gaps and streamlines the entire component building process in Figma.

Design, implement, review, or refactor native macOS 27 Golden Gate interfaces in SwiftUI or AppKit. Ensures apps match Apple's current macOS 27 UI kit with restrained Liquid Glass language, integrated windows, full-height sidebars, native toolbars, flat lists, and clear pane boundaries. Ideal for Figma design-to-code work and audits of boxed interfaces.