Components

ui-design-system is a Claude skill for Design Systems that helps generate design tokens, color scales, typography, spacing, responsive rules, component documentation, and developer handoff assets, with references and a Python token generator for JSON, CSS, SCSS, or summary output.

figma-code-connect-components helps map Figma design components to matching code components with Figma Code Connect. Use it for design implementation alignment, variant and prop matching, and finding the right local component before creating mappings. Best for connect, map, or link-to-code workflows, not canvas writing or full-page generation.

Use the wpds skill to build or review WordPress UI with the WordPress Design System (WPDS). It helps you verify components, tokens, patterns, and package fit using the WPDS MCP server, so your wpds guide stays grounded in canonical docs instead of guesswork. Ideal for wpds for Design Systems work across Gutenberg, WooCommerce, WordPress.com, Jetpack, and related interfaces.

figma-use is the skill to install before every use_figma call so JavaScript runs safely in a Figma file context. It supports design implementation work like creating and editing nodes, wiring variables and styles, building components and variants, and inspecting file structure programmatically. The repo includes usage guidance, gotchas, and patterns to reduce common Figma automation errors.

hig-components-search is an Apple HIG skill for UI design decisions around search fields, page controls, and path controls. Use it when you need clear guidance on search behavior, scopes, pagination, and hierarchy navigation in macOS or iPadOS interfaces. It is especially useful for search UX, search suggestions, and structured navigation.

hig-components-menus is an Apple HIG guidance skill for menus and button-driven command surfaces. Use the hig-components-menus skill for UI Design decisions on menus, context menus, toolbars, menu bars, and related controls when you need Apple-specific guidance on command placement, grouping, and behavior.

hig-components-layout is an Apple HIG navigation-and-layout skill for choosing sidebars, split views, tab bars, lists, tables, outline views, columns, panels, windows, scroll views, boxes, and ornaments. Use it for UI Design and app structure decisions when you need clear, platform-aware guidance instead of generic responsive layout advice.

hig-components-dialogs is the Apple HIG presentation-components skill for choosing alerts, action sheets, popovers, sheets, and digit entry views. Use this hig-components-dialogs guide when you need clear, Apple-aligned dialog selection for confirmation flows, destructive actions, nonmodal content, and UI design decisions across iOS, iPadOS, macOS, watchOS, and visionOS.

The component-refactoring skill helps you refactor high-complexity React components in the Dify frontend using analyzer-driven guidance. Use it when `pnpm analyze-component --json` shows complexity above 50, line count above 300, or when you need code splitting, hook extraction, or a safer component-refactoring guide instead of a generic rewrite.

figma-generate-library helps you build or update a Figma design system from a codebase with an ordered workflow for tokens, component libraries, documentation, and light/dark theming. Use the figma-generate-library skill when you need a practical guide for Design Systems, not a one-off mockup. It complements figma-use for Plugin API calls.

figma-generate-design helps turn coded pages, modals, drawers, sidebars, panels, and other multi-section views into Figma using the published design system. It finds components, variables, styles, and library assets from Code Connect and related sources, then assembles the screen section by section for Design Implementation instead of redrawing everything manually. Use the figma-generate-design guide when you need fidelity to code and tokens.

figma-use is the required skill for safe `use_figma` calls in Figma Plugin API workflows. Use the figma-use skill to install and load it before writing, updating, inspecting, or structuring Figma files with JavaScript. It is especially useful for Design Implementation, component work, variables, auto layout, and programmatic file reading.

figma-generate-library helps turn a codebase into a Figma design system library with tokens, variables, components, theming, and documentation. Use the figma-generate-library skill when you need a phased workflow for Design Systems work, including install, setup, discovery, creation, validation, and reconciliation with code.

figma-generate-design helps turn a real screen, page, or multi-section layout into Figma by reusing the published design system instead of generic shapes. It is ideal for matching code or product pages with strong parity, editable structure, and token-based consistency. Use it for full-page UI design updates, not rough mockups.