Components

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.

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.