ProtoWiki — getting started
What this repo is
ProtoWiki is a prototyping playground for Wikimedia features. It is not
a CMS, not a real wiki, not a deployed product. It exists so that designers,
PMs, and engineers can stand up a realistic-looking Wikipedia / MediaWiki
prototype in minutes, hand it to a researcher, and link it from a Phabricator
ticket — using the same design system, the same fonts, and (optionally)
the same real data as production.
Realism is the goal. The repo bundles:
- The Wikimedia Codex design system (Vue 3
components, CSS tokens, icons) so prototypes look right.
- Data utilities that talk to the live Wikipedia REST and Action APIs.
- Single-concern layout wrappers that paint each Wikipedia surface (chrome,
article column, special-page shell, plain canvas) and compose by nesting —
for the website and for the iOS / Android apps.
- A skills system under
.agents/skills/ that documents every part of
the repo for both humans and AI coding agents.
For the full component catalogue, see
protowiki-components.
Tech stack
- Vite + Vue 3 (Composition API,
<script setup>)
- TypeScript, non-strict (
strict: false, allowJs: true) — optional
for prototype authors; editors get autocomplete without build errors
unplugin-vue-router — file-based routing under src/prototypes/@wikimedia/codex + @wikimedia/codex-design-tokens +
@wikimedia/codex-icons- Plain CSS (no preprocessor)
- Prettier + ESLint
- GitHub Pages for hosting (no server needed)
Where things live
protowiki/
├── src/
│ ├── main.ts ← Vue mount + boot-time skin/theme setup
│ ├── App.vue ← thin shell (RouterView)
│ ├── prototypes/ ← prototypes (each folder = one route)
│ │ ├── index.vue ← home / gallery (auto-lists prototypes)
│ │ ├── template-chrome/index.vue
│ │ ├── template-dashboard/index.vue
│ │ └── template-homepage/index.vue
│ ├── components/ ← shipped components (wrappers, primitives, article, dashboard)
│ ├── composables/ ← useSkin / useTheme (read-only hooks)
│ ├── lib/ ← theming logic, helpers
│ └── styles/ ← global.css, wiki-skins/, dark.css
├── .agents/skills/ ← skills for both humans and agents (see below)
├── AGENTS.md ← thin index pointing at the skills
└── README.md ← human-friendly intro pointing at the same skills
There is no .cursor/rules/, no parallel resources/ folder, no
CLAUDE.md. All non-code material is a skill. Skills are markdown that humans
read and that AI agents auto-discover.
What to do next
Local dev
npm install
npm run dev # http://localhost:5173 — use this for prototyping
That's it — there's no registration step for new prototypes. Drop a folder
under src/prototypes/ and the route is live. Gallery title and
description must not be AI-generated — ask the author or omit; see
protowiki-create-prototype. CI runs
npm run build when
you push or open a PR; you only need a local build to debug GitHub Pages
issues — see protowiki-deploy.
1---2name: protowiki-getting-started3description: Orientation for the ProtoWiki repo — what it is, the Vite + Vue 3 + Codex + GitHub Pages stack, where code lives, where skills live, and the first thing to do. Use when first opening this repo, when asked "what is ProtoWiki" or "how does this repo work", or when an agent needs a high-level map before doing anything else.4---56# ProtoWiki — getting started78## What this repo is910ProtoWiki is a prototyping playground for Wikimedia features. It is **not**11a CMS, not a real wiki, not a deployed product. It exists so that designers,12PMs, and engineers can stand up a realistic-looking Wikipedia / MediaWiki13prototype in minutes, hand it to a researcher, and link it from a Phabricator14ticket — using the **same design system, the same fonts, and (optionally)15the same real data** as production.1617Realism is the goal. The repo bundles:1819- The Wikimedia [Codex design system](https://doc.wikimedia.org/codex/) (Vue 320 components, CSS tokens, icons) so prototypes look right.21- Data utilities that talk to the live Wikipedia REST and Action APIs.22- Single-concern layout wrappers that paint each Wikipedia surface (chrome,23 article column, special-page shell, plain canvas) and compose by nesting —24 for the **website** and for the **iOS / Android apps**.25- A skills system under `.agents/skills/` that documents every part of26 the repo for both humans and AI coding agents.2728For the full component catalogue, see29[`protowiki-components`](../protowiki-components/SKILL.md).3031## Tech stack3233- **Vite** + **Vue 3** (Composition API, `<script setup>`)34- **TypeScript**, non-strict (`strict: false`, `allowJs: true`) — optional35 for prototype authors; editors get autocomplete without build errors36- **`unplugin-vue-router`** — file-based routing under `src/prototypes/`37- **`@wikimedia/codex`** + `@wikimedia/codex-design-tokens` +38 `@wikimedia/codex-icons`39- Plain CSS (no preprocessor)40- **Prettier** + **ESLint**41- **GitHub Pages** for hosting (no server needed)4243## Where things live4445```46protowiki/47├── src/48│ ├── main.ts ← Vue mount + boot-time skin/theme setup49│ ├── App.vue ← thin shell (RouterView)50│ ├── prototypes/ ← prototypes (each folder = one route)51│ │ ├── index.vue ← home / gallery (auto-lists prototypes)52│ │ ├── template-chrome/index.vue53│ │ ├── template-dashboard/index.vue54│ │ └── template-homepage/index.vue55│ ├── components/ ← shipped components (wrappers, primitives, article, dashboard)56│ ├── composables/ ← useSkin / useTheme (read-only hooks)57│ ├── lib/ ← theming logic, helpers58│ └── styles/ ← global.css, wiki-skins/, dark.css59├── .agents/skills/ ← skills for both humans and agents (see below)60├── AGENTS.md ← thin index pointing at the skills61└── README.md ← human-friendly intro pointing at the same skills62```6364There is **no** `.cursor/rules/`, **no** parallel `resources/` folder, **no**65`CLAUDE.md`. All non-code material is a skill. Skills are markdown that humans66read and that AI agents auto-discover.6768## What to do next6970| If you want to… | Read… |71| --- | --- |72| Make a new prototype | [`protowiki-create-prototype`](../protowiki-create-prototype/SKILL.md) |73| Prototype the iOS / Android apps rather than the website | [`protowiki-app-prototyping`](../protowiki-app-prototyping/SKILL.md) |74| Customize home gallery listing | [`protowiki-create-prototype` → `gallery-meta.md`](../protowiki-create-prototype/references/gallery-meta.md) |75| Look up a component (wrappers, article surfaces, search bar…) | [`protowiki-components`](../protowiki-components/SKILL.md) |76| Use a Codex component, token, or icon | [`codex-usage`](../codex-usage/SKILL.md) |77| Fetch real data from Wikipedia | [`wiki-apis`](../wiki-apis/SKILL.md) |78| Snapshot an article + its skin CSS into the repo | [`protowiki-snapshot-data`](../protowiki-snapshot-data/SKILL.md) |79| Prototype VisualEditor-style editing (article template, suggestion mode) | [`protowiki-components` → `editors.md`](../protowiki-components/references/editors.md) |80| Make light/dark or desktop/mobile previews | [`protowiki-skins`](../protowiki-skins/SKILL.md) + [`protowiki-theme`](../protowiki-theme/SKILL.md) |81| Deploy to GitHub Pages | [`protowiki-deploy`](../protowiki-deploy/SKILL.md) |8283## Local dev8485```bash86npm install87npm run dev # http://localhost:5173 — use this for prototyping88```8990That's it — there's no registration step for new prototypes. Drop a folder91under `src/prototypes/` and the route is live. Gallery **title** and92**description** must not be AI-generated — ask the author or omit; see93[`protowiki-create-prototype`](../protowiki-create-prototype/SKILL.md). CI runs94`npm run build` when95you push or open a PR; you only need a local build to debug GitHub Pages96issues — see [`protowiki-deploy`](../protowiki-deploy/SKILL.md).
wikimedia