skills.rest
wikimedia
wikimediaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

protowiki-skins

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
One-click install
npx skills add https://github.com/wikimedia/ProtoWiki --skill protowiki-skins
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
manhthien2005manhthien2005

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

Community
Intermediate
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
verivendverivend

responsive-grid-view

Render responsive data tables that switch between AG Grid and mobile card lists.

Official
Intermediate
zomeruzomeru

mobile-responsiveness

Create responsive mobile-first web interfaces with CSS and Tailwind breakpoints.

Community
Intermediate