// Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.
Convert a page to the cross-platform page system so it works in both the website and the desktop app. Use when moving a page into packages/ui/src/layouts/, creating shared or wrapped layouts, or setting up DI contracts for platform abstraction.
Review the latest changelog entry in packages/blog/changelog.ts against the project's changelog style guide and flag bullets that need rewriting. Use when checking a freshly added changelog entry before opening a PR, or when the user asks to review/lint the latest changelog.
Add a new API endpoint module to packages/api-client from an OpenAPI schema. Use when adding new backend endpoints, creating API client modules, or when an openapi.yml is provided.
Perform an i18n localization pass on changed files or a pull request, converting hard-coded English strings to the @modrinth/ui i18n system. Use when internationalizing a set of changes, reviewing a PR for untranslated strings, or converting a specific component.
Convert a page or component from useAsyncData/manual ref patterns to TanStack Query for server state management. Use when migrating data fetching to useQuery/useMutation, adding cache invalidation, or replacing useAsyncData with TanStack Query.
| name | figma-mcp |
| description | Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma. |
| argument-hint | <figma-url> |
Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md Also read @packages/ui/CLAUDE.md for color token mapping and component conventions.
$ARGUMENTS — extract the fileKey and nodeId. Convert - to : in the node ID.get_design_context with the extracted nodeId and fileKey, using clientLanguages: "typescript,html,css" and clientFrameworks: "vue". This is always the first tool to call.surface-* / text-* tokens — never use Figma's aliased names directly.packages/ui/src/components/ for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).packages/assets/styles/variables.scss for tokens not exposed in Figma.get_screenshot if you need a closer visual reference of specific nodes.get_variable_defs to verify which design tokens are applied to ambiguous elements.