# Protowiki Skins > How desktop (Vector 2022) vs mobile (Minerva) web skins work in ProtoWiki — the boot-time resolution of ?skin= URL param + stored Web skin preference + viewport into a data-skin attribute on , the per-component skin prop for embedding mobile previews on desktop pages, and the read-only useSkin() hook. Skins are a web-only axis; native app prototypes use data-app-platform instead. Use when adding skin-specific styles, embedding a mobile preview, debugging the responsive breakpoint, or wiring a "show mobile" toggle. - Skill: `wikimedia/protowiki-skins` (Agent Skill) - Install (CLI): `npx skillmds@latest add wikimedia/protowiki-skins` - Raw SKILL.md: https://api.skillmd.com/api/skills/wikimedia/protowiki-skins/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: wikimedia (https://skillmd.com/u/wikimedia) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wikimedia/protowiki-skins --- # ProtoWiki — skins ProtoWiki ships two Wikipedia-shaped skins: - **Vector 2022** (`data-skin="desktop"`) — the modern desktop skin. - **Minerva** (`data-skin="mobile"`) — the mobile-web skin. Skins control layout (column count, sticky rails, search-bar visibility, font-sizes) but not colours — those are the [theme](../protowiki-theme/SKILL.md)'s job. **Skins are the web axis only.** Minerva (`data-skin="mobile"`) is mobile **web**, not the native apps. App prototypes (`platform: 'app'`) have no skin at all — their platform axis is iOS vs Android on ``. See [`protowiki-app-prototyping`](../protowiki-app-prototyping/SKILL.md). ## How the global skin is resolved At boot, `src/theme.ts` decides the global skin in this order: 1. `?skin=desktop` or `?skin=mobile` URL param, if either is present. 2. The stored **Web skin** preference (`config.webSkin`: `auto` / `desktop` / `mobile`), set in the gallery's Appearance settings. 3. Otherwise (`auto`), viewport: `window.innerWidth >= 640` → `desktop`, else `mobile`. This matches **FakeMediaWiki** (`SpecialView/style.css`): desktop chrome (`nav-desktop`) stays until **640px**; below that, mobile chrome (`nav-mobile`). The result is set as `data-skin="…"` on ``. When neither the URL param nor the stored preference is pinning the value, the boot script subscribes to a media-query listener so the global skin updates live as the viewport crosses **640 px**. `?skin=` URL param wins permanently for that session (no live subscription when the URL forces a value). ## How CSS skins work Skin affects layout via **`data-skin="desktop"`** vs **`data-skin="mobile"`** on component roots (`ChromeWrapper`, `ArticleLive`, `ArticleSnapshot`, `ArticleCustom`, `ChromeHeader`, etc.). Desktop vs mobile rules live **next to those components** in scoped `