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

codex-typography

Enforce canonical text styles across prototype UI typography.

7|6|Updated Apr 28, 2026
Search Tags:#typography#accessibility#codex#semantic-html#styles#font-family
One-click install
npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codex-typography
Source: https://github.com/wikimedia/ProtoWiki/tree/main/.agents/skills/codex-typography
Command: npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The rule ensures that every piece of text uses exactly one of the nine canonical text styles, preventing font or size drift and delivering consistent typography across prototypes.

Core Features & Use Cases

  • Fixed token sets: Each style maps to a fixed combination of font-family, font-size, font-weight, and line-height.
  • Semantic markup guidance: Encourages using semantic HTML elements (h1–h4, p, small, figcaption, blockquote, cite) to apply styles consistently.
  • Prototyping consistency: Helps maintain readable, accessible typography across pages and components.

Quick Start

Apply a single canonical text style to every text block in your prototype using semantic HTML elements.

Frequently Asked Questions about codex-typography

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

FAQPage Schema
How do I enforce consistent typography across UI prototypes?▼

Canonical typography uses nine fixed text styles mapped to semantic HTML elements like h1 through h4, p, blockquote, and cite, ensuring consistent font-family, font-size, font-weight, and line-height across all components.

Why does font size drift in my HTML prototypes and how do I prevent it?▼

Font size drift occurs when text elements lack fixed style tokens. Prevent it by mapping every text block to one of nine canonical styles using semantic HTML elements for strict typographic consistency.

Do I need semantic HTML to apply consistent text styles?▼

Yes, semantic HTML is required to apply consistent text styles. Using elements like h1, p, small, figcaption, blockquote, and cite maps each text block directly to its canonical typography token set.

What text elements are covered by canonical typography styles?▼

Canonical typography styles cover headings h1 through h4, body text, captions, quotes, and citations, ensuring accessible and readable text across all prototype pages and components.

Can I use custom font tokens for headings and body text?▼

No, you cannot use custom font tokens. Each of the nine canonical text styles requires a fixed combination of font-family, font-size, font-weight, and line-height to prevent any font or size drift.

What's the best way to maintain accessible typography in documentation?▼

The best way to maintain accessible typography in documentation is to enforce a single canonical text style on every text block using semantic HTML markup for consistent and readable rendering.

Related Skills

Explore More Design & Creative Skills→
aemysitesaemysites

Modeling Content

Creates editable ASTIN-like content models for WordPress blocks.

Official
Basic
MyHeavenDyfMyHeavenDyf

web-prototype

Generate a single self-contained HTML file from a seed template and layout library.

Community
Intermediate
tillysosotillysoso

typography-audit

Audit CSS/HTML typography and generate code-ready fixes for punctuation, fonts, sizing, spacing, and OpenType features.

Community
Advanced
mambisimambisi

pine-stylekit

Compile Tailwind-style utility classes into static CSS for Pocopine projects.

Community
Advanced