// 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.
| name | cross-platform-pages |
| description | 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. |
| argument-hint | <path-to-page> |
Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standards/frontend/DEPENDENCY_INJECTION.md
$ARGUMENTS and understand its data sources, mutations, and navigation.layouts/wrapped/) — if the page uses the same API source on both platforms (e.g. web requests, not Tauri plugins). Just move the page component into packages/ui and import it from both frontends.layouts/shared/) — if the page has different data-fetching logic per platform (e.g. website uses api-client, app uses Tauri invoke). Requires a DI contract.providers/ capturing all platform-specific operations.composables/.apps/frontend/, apps/app-frontend/).packages/ui/src/layouts/wrapped/ matching the route structure.ReadyTransition / useReadyState, each platform route shell must call ensureQueryData for those queries with matching keys and fetchers — see Platform route shells: prefetch with ensureQueryData in standards/frontend/CROSS_PLATFORM_PAGES.md.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.
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.
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.