protowiki-skins

Name: protowiki-skins
Availability: InStock
Author: Wikimedia

Resolve desktop or mobile skins at boot via URL parameter or viewport.

7|6|Updated Apr 28, 2026

Search Tags:#theming #vue #responsive #boot-time #protowiki #skins #data-skin

Ready to run

npx skills add https://github.com/wikimedia/ProtoWiki --skill protowiki-skins

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: protowiki-skins
Source: https://github.com/wikimedia/ProtoWiki/tree/main/.agents/skills/protowiki-skins
Command: npx skills add https://github.com/wikimedia/ProtoWiki --skill protowiki-skins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ProtoWiki skins management solves the challenge of rendering ProtoWiki in desktop and mobile skins by coordinating boot-time skin resolution and a data-skin attribute on the root HTML, enabling consistent previews and mobile embedding.

Core Features & Use Cases

Boot-time skin resolution using ?skin URL parameter or viewport size to pick desktop or mobile.
Per-component skin prop to embed mobile previews inside desktop pages.
useSkin() hook to read the current global skin state for conditional rendering and debugging.
Simple path to wire a "show mobile" toggle for rapid prototyping.

Quick Start

Enable desktop or mobile skin by setting data-skin on the root element or using the skin prop, then test at different viewport widths to preview the corresponding layout.

Frequently Asked Questions about protowiki-skins

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

FAQPage Schema

How do I render different responsive skins for desktop and mobile in a Vue application?▼

Rendering desktop and mobile skins is handled through boot-time resolution using a URL parameter or viewport size, which sets a data-skin attribute on the root HTML element to coordinate layout rendering.

What is the best way to embed a mobile preview inside a desktop page layout?▼

Embedding mobile previews inside desktop pages is achieved by using a per-component skin prop, allowing individual components to render a mobile layout independently of the global desktop skin state.

How can I read the current skin state for conditional rendering in my components?▼

Reading the current skin state for conditional rendering is done using the global useSkin() hook, which exposes the active skin resolved at boot-time for debugging and component logic.

How do I wire a show-mobile toggle for rapid responsive prototyping?▼

Wiring a show-mobile toggle is simplified by combining the useSkin() hook with boot-time URL parameter resolution, allowing quick switching between desktop and mobile layouts during prototyping.

Does ProtoWiki skin resolution require any external dependencies or Vue component libraries?▼

ProtoWiki skin resolution requires no external dependencies or component libraries, operating independently by evaluating viewport size or URL parameters to apply the appropriate data-skin attribute.