Design Tokens

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.

makepad-2.0-theme is a Makepad 2.0 theme skill for applying theme.* variables, switching dark and light themes, and keeping design-token styling consistent. Use this guide to understand makepad-2.0-theme install and makepad-2.0-theme usage for production UI and design systems.

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-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-implement-design turns Figma screens into production-ready code in your repo, aiming for close visual parity with layout, states, tokens, and responsive behavior. Use it for Figma-to-code implementation, not Figma editing, code connect mapping, or generating new designs. It includes install guidance, usage notes, and boundary rules for Design Implementation workflows.

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.