skills.rest
otto-poblysh
otto-poblyshCOMMUNITY
Explore all skills by this author →
GitHub

ui-typography

Enforce correct typographic characters and spacing in HTML, CSS, React, and JSX text.

Updated Apr 24, 2026
Search Tags:#accessibility#design systems#punctuation#content formatting#ui typography#react jsx#web copy quality
One-click install
npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill ui-typography-otto-poblysh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/otto-poblysh/pedagemy-early-access/tree/main/.agents/skills/ui-typography
Command: npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill ui-typography-otto-poblysh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents common, hard-to-notice typography mistakes in UI copy and code-generated UI, producing more readable and more professional text without manual cleanup.

Core Features & Use Cases

  • Correct typography in generated UI: Enforces proper curly quotes, dash characters, ellipses, spacing, and hierarchy when creating HTML/CSS/React/JSX with visible text.
  • Audit and fix existing interfaces: Flags typography violations in legacy or newly produced UI markup and provides before/after corrections to align with the rules.
  • React/JSX-safe text guidance: Ensures punctuation and entities render correctly in UI code, including notes about Unicode escape handling in JSX.

Quick Start

Ask an AI to generate a professional landing page component with buttons, headings, and marketing copy, and it will automatically apply the typography rules to all visible text.

Frequently Asked Questions about ui-typography

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

FAQPage Schema
How do I fix typography and punctuation errors in React JSX components?▼

Fix UI typography in React JSX by enforcing curly quotes, proper hyphens, en-em dashes, ellipses, and nonbreaking spaces to prevent unprofessional punctuation mistakes in visible text.

What is the best way to audit existing HTML and CSS for typography violations?▼

Auditing HTML and CSS typography involves flagging incorrect typographic characters and spacing in legacy or newly produced UI markup. The process identifies violations and provides before and after corrections to align text with professional layout rules.

Does this approach work for generating accessible design system landing pages?▼

Yes, applying strict typographic rules works for accessible design system landing pages by silently enforcing correct characters, spacing, and hierarchy. This prevents unreadable text and ensures professional content formatting across generated UI components and marketing copy.

How do I handle Unicode escape characters when formatting web copy in JSX?▼

Handling Unicode escape characters in JSX requires ensuring punctuation and entities render correctly in UI code. Proper text guidance prevents misinterpreted dashes, quotes, and ellipses, maintaining web copy quality without breaking component rendering.

When should I enforce nonbreaking spaces and ellipses in UI text formatting?▼

Enforce nonbreaking spaces and ellipses during UI text formatting whenever building or auditing interfaces, dashboards, or components. This prevents text wrapping errors and maintains visual hierarchy across human-visible text in HTML, CSS, and React artifacts.

Related Skills

Explore More Design & Creative Skills→
pablolospepablolospe

ui-typography

Enforce Butterick's typographic rules on visible UI text.

Community
Advanced
vuminhieuvuminhieu

web-design-guidelines

Audit UI code against Web Interface Guidelines and report file:line findings.

Community
Intermediate
rafifosrafifos
6

baseline-ui

Validate Tailwind CSS UI animations, typography, accessibility, and layout rules.

Community
Advanced
breakingcircuits1337breakingcircuits1337

nano-pdf

Edit PDF text on specific pages using natural language instructions.

Community
Intermediate