skills.rest
modrinth
modrinthOFFICIAL
Explore all skills by this author →
Website𝕏@modrinthGitHub

cross-platform-pages

Convert web pages into shared layouts for Modrinth website and desktop app.

2.3k|559|Updated Jun 20, 2021
Search Tags:#web development#frontend#cross-platform#desktop app#dependency injection#code sharing
One-click install
npx skills add https://github.com/modrinth/code --skill cross-platform-pages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cross-platform-pages
Source: https://github.com/modrinth/code/tree/main/.claude/skills/cross-platform-pages
Command: npx skills add https://github.com/modrinth/code --skill cross-platform-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of making web pages compatible with both the Modrinth website and its desktop application, ensuring a consistent user experience across platforms.

Core Features & Use Cases

  • Platform Abstraction: Adapts pages to work seamlessly in different environments (web vs. app).
  • Code Reusability: Facilitates the creation of shared layouts and components, reducing duplication.
  • Dependency Injection: Implements patterns for platform-specific logic handling.
  • Use Case: When developing a new feature page, use this Skill to ensure it functions identically whether accessed via the browser or the desktop app.

Quick Start

Convert the page located at 'src/pages/settings' to the cross-platform page system.

Frequently Asked Questions about cross-platform-pages

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make web pages work in both browser and desktop app environments?▼

Cross-platform page development adapts web pages into a unified system for consistent website and desktop app functionality. This involves establishing platform abstraction contracts and shared layouts to ensure identical behavior across different environments.

What is a shared page versus a wrapped page in cross-platform development?▼

Shared pages contain reusable layouts and components for both web and desktop apps, while wrapped pages apply platform-specific logic. Understanding this distinction is required to implement code sharing and migrate pages into shared layout directories effectively.

How do I use dependency injection for platform-specific operations in cross-platform apps?▼

Dependency injection handles platform-specific logic by abstracting operations into contracts. This pattern allows web pages to function seamlessly whether accessed via browser or desktop app, ensuring consistent user experience without duplicating code.

Does this cross-platform system require prior knowledge of platform abstraction contracts?▼

Yes, understanding platform abstraction contracts and dependency injection patterns is required. You need to distinguish between shared and wrapped pages to properly migrate pages into shared layout directories for unified website and desktop app functionality.

What's the best way to migrate a web page to a cross-platform system?▼

Migrate web pages by converting them into the cross-platform page system, which involves moving pages into shared layout directories and establishing platform abstraction contracts. This ensures unified website and desktop app functionality with minimal code duplication.

Related Skills

Explore More Software Engineering Skills→
felipebrgs1felipebrgs1

kotlin-multiplatform

Guide Kotlin Multiplatform architecture decisions for expect/actual patterns and source sets.

Community
Advanced
sebach0sebach0

patrol-e2e-testing

Automate end-to-end testing in Flutter apps using Patrol 4.x.

Community
Intermediate
AJBcodingAJBcoding
4

moai-lang-kotlin

Develop Kotlin 2.0 multiplatform projects with coroutines and Compose Multiplatform UI.

Community
Advanced
InverterNetworkInverterNetwork

computer-use

Control native desktop applications in the background across macOS, Windows, and Linux.

Official
Advanced