recursica-skill-typography-semantics

Enforces typography token usage and semantic HTML markup rules for enterprise web applications.

1|Updated May 29, 2026

Search Tags:#typography #accessibility #design system #design tokens #semantic html #headings #line length

Ready to run

npx skills add https://github.com/borderux/recursica-knowledge --skill recursica-skill-typography-semantics-borderux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: recursica-skill-typography-semantics
Source: https://github.com/borderux/recursica-knowledge/tree/main/skills/design-rules/recursica-skill-typography-semantics
Command: npx skills add https://github.com/borderux/recursica-knowledge --skill recursica-skill-typography-semantics-borderux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents common typography and markup defects in enterprise web applications, such as styling divs into buttons, missing H1 elements, custom font values that bypass design tokens, and text blocks that run too wide to read comfortably. ## Core Features & Use Cases - Semantic markup enforcement: Requires real platform elements (button, em, strong, table) instead of visual substitutes, exactly one H1 per page, and heading levels that follow document structure rather than desired size. - Token-based typography: Mandates that all type styles come from design system tokens, that every brand typeface is loaded, and that the base font family is set from the primary brand token. - Computed line length: Provides a formula to calculate max-width for h3-h6, body, and caption text blocks based on font size, line height, weight, and letter spacing. - Use Case: When reviewing a page where the navigation renders in a different typeface than the page title, use this Skill to diagnose the missing base font family token and verify all brand typefaces are loaded. ## Quick Start Review this page's headings, emphasis markup, and text block widths against the typography and semantics house rules.

Frequently Asked Questions about recursica-skill-typography-semantics

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

FAQPage Schema

How do I enforce semantic HTML in a design system?▼

Use the real platform element for every purpose: button elements for actions, em and strong for emphasis, and semantic tables for data. Never attach onclick handlers or role="button" to divs, and let CSS define what semantic tags look like.

How do I calculate the optimal line length for body text?▼

Compute average character width from font size, typeface ratio, weight multiplier, and letter spacing, then multiply by an optimal character count derived from the line-height ratio. For 16px Inter body text with 24px line height, this yields a max-width of about 528px.

Should a page have more than one H1 heading?▼

No, exactly one H1 per page is required, and it must exist in the markup even when hidden by CSS. Heading levels follow document structure, not desired visual size; use type styles to change appearance instead of demoting heading levels.

Why do fonts look wrong even when the webfont is loaded?▼

Loading only the primary typeface causes the browser to silently substitute defaults for secondary and tertiary faces. You must load every typeface the brand names and set the document's base font family from the primary brand token so unstyled elements inherit correctly.

When should headings be visually hidden from sighted users?▼

Hide a heading visually only when showing it disrupts the layout and it adds no understanding to what sighted users see. Keep it available to screen readers; if the heading does add meaning, show it rather than hiding meaningful content for layout tidiness.

What are the limits of the line-length calculation formula?▼

The font width and weight ratios are estimates acting as guard rails, not precise measurements. Prefer real rendered glyph measurements when available, and never apply the check to non-wrapping text like labels, buttons, badges, or single-line table cells.