skills.rest
ProLeadAppt
ProLeadApptCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ProLeadAppt/doggroomerdemo --skill ui-typography-proleadappt
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
pablolospepablolospe

ui-typography

Enforce Butterick's typographic rules on visible UI text.

Community
Advanced
CleanExpoCleanExpo
1

visual-excellence-enforcer

Audit customer-facing UI screenshots against design system tokens and block releases.

Community
Advanced
KAFKA2306KAFKA2306

japanese-typography

Standardize Japanese text rendering with Noto Sans JP typographic rules.

Community
Basic
alangebalangeb

code-review-workflow

Run pyscan, pyanalyze, ruff, and black to generate a unified markdown report.

Community
Intermediate