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

codex-tokens

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

Related Skills

Explore More Design & Creative Skills→
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced
bipinksbipinks
3

design-systems

Create token-based design systems with CSS variables and theming.

Community
Advanced
AvaloniaUIAvaloniaUI
157

docusaurus-styling

Align Docusaurus visuals with the Avalonia Customer Portal theme using TailwindCSS and CSS variables.

Official
Intermediate
AlexandrePontesjrAlexandrePontesjr

reversa-design-system

Extract design tokens and markdown documentation from legacy styling sources.

Community
Intermediate