원클릭으로 Manus에서 모든 스킬 실행

cross-platform-pages

스타2,235

포크550

업데이트2026년 4월 18일 18:46

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

modrinth

modrinth/code

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Steps

Read the target page at $ARGUMENTS and understand its data sources, mutations, and navigation.
Read the standards above to understand the shared vs wrapped distinction and the DI pattern.
Decide the category:
- Wrapped (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.
- Shared (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.
For shared layouts:
- Define a DI contract interface in providers/ capturing all platform-specific operations.
- Create the layout component that injects the context and handles all UI logic.
- Extract reusable stateful logic (search, filtering, selection) into composables/.
- Implement the contract separately in each frontend (apps/frontend/, apps/app-frontend/).
For wrapped pages:
- Move the page component into packages/ui/src/layouts/wrapped/ matching the route structure.
- Replace any platform-specific imports with shared utilities.
- Import and render the wrapped page from both frontends as a simple component.
- If the layout uses TanStack Query for initial route paint with 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.
Verify the page renders correctly by checking for missing imports and that all DI contracts are satisfied.

이 저장소의 다른 Skills

같은 저장소

review-changelog

modrinth/code

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.

2026-04-152.2k

api-module

modrinth/code

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.

2026-03-162.2k

figma-mcp

modrinth/code

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.

2026-03-162.2k

i18n-pass

modrinth/code

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.

2026-03-162.2k

tanstack-query

modrinth/code

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.

2026-03-162.2k

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

Steps

Read the target page at $ARGUMENTS and understand its data sources, mutations, and navigation.
Read the standards above to understand the shared vs wrapped distinction and the DI pattern.
Decide the category:
- Wrapped (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.
- Shared (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.
For shared layouts:
- Define a DI contract interface in providers/ capturing all platform-specific operations.
- Create the layout component that injects the context and handles all UI logic.
- Extract reusable stateful logic (search, filtering, selection) into composables/.
- Implement the contract separately in each frontend (apps/frontend/, apps/app-frontend/).
For wrapped pages:
- Move the page component into packages/ui/src/layouts/wrapped/ matching the route structure.
- Replace any platform-specific imports with shared utilities.
- Import and render the wrapped page from both frontends as a simple component.
- If the layout uses TanStack Query for initial route paint with 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.
Verify the page renders correctly by checking for missing imports and that all DI contracts are satisfied.