ui-typography

Automate typographic rules for HTML, CSS, and UI code.

Updated Mar 23, 2026

Search Tags:#typography #ui #accessibility #css #web-design #quotes #dashes

Ready to run

npx skills add https://github.com/ProLeadAppt/doggroomerdemo --skill ui-typography-proleadappt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/ProLeadAppt/doggroomerdemo/tree/main/.agents/skills/bencium-typography
Command: npx skills add https://github.com/ProLeadAppt/doggroomerdemo --skill ui-typography-proleadappt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI text often suffers from inconsistent quotation marks, dash usage, spacing, and typographic hierarchy across interfaces. This Skill enforces timeless typographic correctness in all screen-based text, automatically applying rules to HTML, CSS, React, and UI code while providing an audit process for existing interfaces.

Core Features & Use Cases

Enforces curly quotes and correct dash usage across UI outputs.
Automatically applies typographic rules in generation and builds, while auditing legacy code for violations.
Provides reference materials for HTML entities and baseline CSS typography templates to guide teams.

Quick Start

Apply the typography rules to all UI text outputs in this project to ensure consistent, high-quality typography.

Frequently Asked Questions about ui-typography

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

FAQPage Schema

How do I enforce correct typography and curly quotes in UI code?▼

Enforcing UI typography requires applying automated rules to HTML, CSS, and React code outputs. This corrects quotation marks, dash usage, and spacing automatically during generation and audits legacy code for typographic violations.

What is the best way to audit legacy UI code for typographic errors?▼

Auditing legacy UI code for typographic errors involves validating existing interfaces against a forward-facing typography policy. This process identifies violations in dash usage, spacing, and hierarchy to ensure consistent screen-based text.

Do I need a CSS baseline to automate responsive typography?▼

Yes, automating responsive typography requires a CSS baseline and HTML entity references. These prerequisites provide the foundational templates needed to auto-apply rules and validate typographic hierarchy across web designs.

How does automated web design typography handle HTML entities and dashes?▼

Automated web design typography handles HTML entities and dashes by applying a reference policy during code generation. It automatically replaces straight quotes with curly ones and enforces correct en- and em-dash spacing.

Can I use automated typography rules for accessibility and hierarchy in CSS?▼

Yes, you can use automated typography rules for accessibility and hierarchy in CSS. By validating outputs against a baseline template, the rules enforce structured typographic hierarchy and spacing to improve overall UI accessibility.

Why does my UI text have inconsistent quotation marks and spacing?▼

Inconsistent quotation marks and spacing in UI text occur when interfaces lack an automated typography policy. Applying automated rules to HTML and CSS outputs enforces curly quotes and correct spacing to resolve these typographic inconsistencies.