cross-platform-pages

Name: cross-platform-pages
Availability: InStock
Author: Modrinth

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

Ready to run

npx skills add https://github.com/modrinth/code --skill cross-platform-pages

💬 Prompt for ChatGPT / Claude Chat▼

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.