Skill UI

This guide details how to install and configure the Anima SDK for robust Figma-to-code generation. It is essential for developers setting up design-to-code automation pipelines, requiring configuration of both Anima and Figma API tokens. The SDK enables converting designs into production-ready React, Vue, or HTML components with Tailwind, MUI, or AntD styling.

This guide outlines critical security best practices for design-to-code pipelines using Anima and Figma. It covers securing API credentials by restricting token scopes (e.g., read-only access for Figma), enforcing server-side execution for SDKs, and implementing robust secret management using cloud services like GCP Secret Manager. This minimizes the risk of credential leakage in CI/CD environments.

This workflow is designed for developers building design-to-code pipelines. It connects to Figma via API to extract core design tokens, including colors, typography styles, and spacing values. It converts these raw design assets into structured code formats, such as CSS custom properties, JSON tokens, and Tailwind configurations, ensuring design consistency across development environments.

This guide provides comprehensive instructions on setting up and authenticating with the Figma REST API. It covers two primary authentication methods: Personal Access Tokens (PATs) for server-side scripting, and the OAuth 2.0 flow for building user-facing applications. Learn how to generate tokens, manage granular scopes, and securely integrate your code with Figma's design data.

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 guide details how to build modern, custom headless storefronts using Shopify's Storefront API and Cart API. It covers key functionalities like product querying, cart management (adding/updating lines), and initiating the checkout flow. Designed for developers building client-facing e-commerce experiences, it emphasizes the use of public access tokens for decoupled, highly customizable online stores.

A structured skill for creating single-file, horizontal-swipe HTML decks. Ideal for product overviews, pitch decks, and study materials when a clean, minimalist aesthetic is required. The workflow emphasizes mastering slide rhythm and adhering to design tokens for professional results.

A comprehensive, expert-level guideline for building Agentic User Interfaces (UIs). This system emphasizes conversational interactions, clear outcomes, and minimal user controls, allowing users to delegate complex tasks to AI. It provides structured rules covering color tokens, typography, accessibility (WCAG 2.2 AA), and component anatomy for professional developers and designers.

This expert simulates an experienced design system author for Ant Design, specializing in structured, enterprise-focused, data-dense web applications. It generates comprehensive, implementation-ready guidelines covering design tokens, component anatomy, interaction states, accessibility requirements (WCAG 2.2 AA), and content standards, ensuring maximal clarity and consistency for development and design teams.

This is an expert guideline for creating a modern, Vercel/GitHub-inspired application design system. It provides comprehensive, implementation-ready rules, design tokens, and best practices for building a developer-first dashboard. It covers typography, layout, component states, accessibility (WCAG 2.2 AA), and includes a structured workflow for maintaining visual consistency across the entire application.

An expert guide for creating comprehensive, implementation-ready design systems based on an expressive, high-contrast artistic style. It covers design tokens, component anatomy, advanced accessibility standards (WCAG 2.2 AA), and structured content guidelines for engineers and designers.