Components

ui-design-system es una skill de Claude para Design Systems que ayuda a generar design tokens, escalas de color, tipografía, espaciado, reglas responsive, documentación de componentes y recursos de handoff para desarrollo, con referencias y un generador de tokens en Python para salidas en JSON, CSS, SCSS o resumen.

figma-code-connect-components ayuda a mapear componentes de diseño de Figma con sus componentes de código equivalentes mediante Figma Code Connect. Úsalo para alinear implementación de diseño, emparejar variantes y props, y encontrar el componente local correcto antes de crear mappings. Es ideal para flujos de trabajo de connect, map o link-to-code, no para escribir en canvas ni para generar páginas completas.

Usa la skill wpds para crear o revisar interfaces de WordPress con el WordPress Design System (WPDS). Te ayuda a verificar componentes, tokens, patrones y compatibilidad de paquetes usando el servidor WPDS MCP, para que tu guía de wpds se apoye en la documentación canónica y no en suposiciones. Ideal para trabajos de wpds en Design Systems en Gutenberg, WooCommerce, WordPress.com, Jetpack e इंटरfaces relacionadas.

figma-use es la skill que debes instalar antes de cada llamada a use_figma para que JavaScript se ejecute con seguridad en el contexto de un archivo de Figma. Sirve para trabajo de implementación de diseño, como crear y editar nodos, conectar variables y estilos, construir componentes y variantes, e inspeccionar la estructura del archivo de forma programática. El repositorio incluye guías de uso, casos problemáticos y patrones para reducir errores comunes de automatización en Figma.

hig-components-search es un skill de Apple HIG para tomar decisiones de diseño de UI sobre campos de búsqueda, controles de página y controles de ruta. Úsalo cuando necesites orientación clara sobre el comportamiento de la búsqueda, los ámbitos, la paginación y la navegación jerárquica en interfaces de macOS o iPadOS. Resulta especialmente útil para UX de búsqueda, sugerencias de búsqueda y navegación estructurada.

hig-components-menus es una skill de Apple HIG para decisiones de diseño de menús y superficies de comandos basadas en botones. Usa la skill hig-components-menus cuando necesites orientación de Apple para menús, menús contextuales, barras de herramientas, barras de menús y controles relacionados, y debas decidir la ubicación, agrupación y comportamiento de comandos.

hig-components-layout es una skill de navegación y diseño de Apple HIG para elegir sidebars, split views, tab bars, listas, tablas, outline views, columnas, panels, windows, scroll views, boxes y ornaments. Úsala para decisiones de UI Design y estructura de la app cuando necesites una guía clara, consciente de la plataforma, en lugar de consejos genéricos de diseño responsivo.

hig-components-dialogs es la habilidad de componentes de presentación de Apple HIG para elegir alerts, action sheets, popovers, sheets y vistas de entrada de dígitos. Usa esta guía de hig-components-dialogs cuando necesites una selección clara de diálogos alineada con Apple para flujos de confirmación, acciones destructivas, contenido no modal y decisiones de diseño de interfaz en iOS, iPadOS, macOS, watchOS y visionOS.

La skill component-refactoring ayuda a refactorizar componentes React de alta complejidad en el frontend de Dify con orientación basada en analizador. Úsala cuando `pnpm analyze-component --json` muestre complejidad superior a 50, más de 300 líneas, o cuando necesites separación de código, extracción de hooks o una guía de refactorización de componentes más segura en lugar de una reescritura genérica.

figma-generate-library te ayuda a crear o actualizar un sistema de diseño en Figma a partir de una base de código, con un flujo de trabajo ordenado para tokens, bibliotecas de componentes, documentación y temas claro/oscuro. Usa la skill figma-generate-library cuando necesites una guía práctica para Design Systems, no un mockup puntual. Complementa a figma-use para llamadas a la Plugin API.

figma-generate-design ayuda a convertir páginas codificadas, modales, drawers, sidebars, panels y otras vistas de varias secciones en Figma usando el sistema de diseño publicado. Localiza componentes, variables, estilos y assets de librería desde Code Connect y fuentes relacionadas, y luego arma la pantalla sección por sección para Design Implementation en lugar de redibujar todo manualmente. Usa la guía de figma-generate-design cuando necesites fidelidad al código y a los tokens.

figma-use es la skill requerida para hacer llamadas seguras a `use_figma` en flujos de trabajo de Figma Plugin API. Usa la skill figma-use para instalarla y cargarla antes de escribir, actualizar, inspeccionar o estructurar archivos de Figma con JavaScript. Resulta especialmente útil para implementación de diseño, trabajo con componentes, variables, auto layout y lectura programática de archivos.

figma-generate-library ayuda a convertir una base de código en una biblioteca de sistema de diseño en Figma con tokens, variables, componentes, theming y documentación. Usa la skill figma-generate-library cuando necesites un flujo de trabajo por fases para tareas de Design Systems, incluyendo instalación, configuración, descubrimiento, creación, validación y reconciliación con el código.

figma-generate-design ayuda a convertir una pantalla real, una página o un diseño de varias secciones en Figma, reutilizando el sistema de diseño publicado en lugar de formas genéricas. Es ideal para igualar páginas de producto o código con alta paridad, estructura editable y consistencia basada en tokens. Úsalo para actualizaciones de diseño UI de página completa, no para mockups aproximados.