skills.rest
pablolospe
pablolospeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-typography

Enforce Butterick's typographic rules on visible UI text.

Updated Feb 16, 2025
Search Tags:#typography#accessibility#ui-design#ui-components#curly-quotes#dashes#typographic-rules
One-click install
npx skills add https://github.com/pablolospe/el-destino2 --skill ui-typography-pablolospe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/pablolospe/el-destino2/tree/main/.agents/skills/ui-typography
Command: npx skills add https://github.com/pablolospe/el-destino2 --skill ui-typography-pablolospe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent typography across UI and generated interfaces, with improper quotes, dashes, spacing, and layout. This skill enforces typographic correctness by applying established rules to all visible text in UI output, reducing readability issues and manual fixes.

Core Features & Use Cases

  • Automatic typography enforcement: curly quotes, en/dashes, correct spacing, and proper punctuation in UI output.
  • Design-system alignment: ensures consistent typography across components, pages, and emails.
  • Accessibility-friendly defaults: improves readability by adhering to typographic best practices.

Quick Start

Enable the typography enforcement and apply all rules to any UI output containing 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 enforce professional typography rules in UI components?▼

To enforce professional UI typography automatically, this skill applies Butterick's typographic rules to correct curly quotes, en/em dashes, spacing, and punctuation across all visible text in your components.

What is the best way to fix inconsistent quotes and dashes in React apps?▼

The best way to fix inconsistent quotes and dashes in React apps is through automated typographic enforcement that converts straight quotes to curly quotes and standardizes en/em dashes across JSX pipelines.

Can I use automated typography correction for design system emails and dashboards?▼

Yes, automated typography correction ensures consistent typographic hierarchy, character encoding, and punctuation alignment across design system emails, dashboards, and web app components.

Does automated UI typography work with HTML and CSS pipelines?▼

Automated UI typography works with HTML and CSS pipelines by providing frontmatter-defined behavior and template guidance to satisfy character encoding, line length, and typographic hierarchy requirements.

Why does my UI typography have poor readability and inconsistent spacing?▼

Your UI typography has poor readability and inconsistent spacing due to lacking automated enforcement of typographic best practices, resulting in improper quotes, dashes, and layout that require manual fixes.

Related Skills

Explore More Design & Creative Skills→
benciumbencium
383

ui-typography

Enforces typographic standards like curly quotes in HTML, CSS, and React/JSX code.

Community
Advanced
Aurora-AIAurora-AI
1

sovereign-ui

Standardize Tailwind-based UI design with layout, typography, spacing, and color rules.

Community
Basic
yogvidwankhedeyogvidwankhede
1

typographic-systems

Define modular type scales and font-loading strategies for web interfaces.

Community
Advanced
kriscendobotkriscendobot
3

typist-friendly-code-points

Replace non-ASCII typographic glyphs with ASCII equivalents in text.

Community
Intermediate