codex-tokens

Name: codex-tokens
Availability: InStock
Author: Wikimedia

Standardize Codex design tokens across ProtoWiki themes and components.

7|6|Updated Apr 28, 2026

Search Tags:#theming #dark-mode #css-variables #design-tokens #frontend-design #codex-tokens #tokens-inventory

Ready to run

npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-tokens

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Codex tokens provide a single source of truth for UI color, spacing, typography, borders, and shadows, enabling consistent styling across themes and components and reducing drift.

Core Features & Use Cases

Centralized token inventory in assets/tokens.css (light) and the dark block under html.skin-theme-clientpref-night.
Guidance and references for token usage across colors, spacing, typography, borders, and shadows.
ProtoWiki-wide theming support through per-subtree theme scoping and re-use of Codex tokens in templates.

Quick Start

Inspect assets/tokens.css to view the current light and dark token values and reference the colors, spacing, and typography guides in references.

Frequently Asked Questions about codex-tokens

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

FAQPage Schema

How do I standardize design tokens for consistent UI theming across light and dark modes?▼

Design tokens are standardized by maintaining a centralized inventory in tokens.css, defining light values globally and dark mode values under the skin-theme-clientpref-night block. This ensures consistent color, spacing, and typography application across all UI components.

What are CSS variables and how do they manage frontend design consistency across components?▼

CSS variables act as a single source of truth for UI styling rules like color, spacing, borders, and shadows. Referencing these tokens in front-end templates reduces design drift and maintains visual consistency across different themes and components.

How do I apply Codex tokens in front-end templates for ProtoWiki component styling?▼

To apply Codex tokens in front-end templates, inspect the assets/tokens.css file to view available values, then reference the color, spacing, and typography guides in the references directory to ensure correct token usage and component styling.

Does this design tokens inventory support per-subtree theme scoping for component styling?▼

Yes, the design tokens inventory supports ProtoWiki-wide theming through per-subtree theme scoping. This allows specific sections of the application to apply distinct themes while re-using the central Codex tokens for consistent styling.

Why does my UI design drift when switching between light and dark CSS variables?▼

UI design drift occurs when templates bypass the central token inventory and use hardcoded values. Verifying that all components reference the standardized tokens in assets/tokens.css ensures consistent rendering across both light and dark modes.

Can I use this tokens inventory for design QA across typography and spacing references?▼

Yes, the tokens inventory is applicable for design QA across light and dark modes, component styling, and documentation pipelines. It provides color, spacing, typography, border, and shadow references to verify UI consistency.