skills.rest
aptxaptx
aptxaptxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-typography

Enforce typographic rules in UI code and audit existing interfaces.

Updated Aug 23, 2026
Search Tags:#typography#html#web development#react#readability#css#ui design
One-click install
npx skills add https://github.com/aptxaptx/scamai-landing --skill ui-typography-aptxaptx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/aptxaptx/scamai-landing/tree/main/.agents/skills/ui-typography
Command: npx skills add https://github.com/aptxaptx/scamai-landing --skill ui-typography-aptxaptx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all text within user interfaces, web applications, and software adheres to professional typographic standards, preventing common errors made by LLMs in areas like punctuation, spacing, and text hierarchy.

Core Features & Use Cases

  • Enforces Typographic Correctness: Automatically applies rules for quotes, dashes, spacing, and more when generating UI code.
  • Audits Existing Interfaces: Identifies and suggests fixes for typographic violations in legacy code or designs.
  • Use Case: When asked to "create a landing page component," this Skill will ensure all headings, body text, and button labels use correct curly quotes, appropriate dashes, and optimal spacing without explicit instruction.

Quick Start

Use the ui-typography skill to review the provided HTML snippet for any typographic errors.

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 spacing errors in generated UI code?▼

To fix UI typography errors, this Skill enforces professional rules for punctuation, spacing, and hierarchy during code generation. It automatically corrects common LLM mistakes like straight quotes and improper dashes in HTML and React interfaces.

How do I audit existing web interfaces for typographic violations?▼

You can audit existing web interfaces by using this Skill's AUDIT MODE. It scans your legacy code and designs to identify typographic violations, flagging incorrect punctuation, spacing, and text hierarchy issues for correction.

Does this UI typography checker work with React and standard HTML?▼

Yes, this UI typography checker works with both React and standard HTML. It enforces typographic correctness across web applications and software interfaces without requiring external dependencies.

What is the best way to ensure readability in web application layouts?▼

The best way to ensure readability is applying professional typography rules to text hierarchy and layout. This Skill operates in ENFORCEMENT MODE to auto-apply optimal spacing and punctuation standards when generating UI components.

Can I automatically apply curly quotes and correct dashes when creating UI components?▼

Yes, you can automatically apply curly quotes and appropriate dashes when creating UI components. The Skill enforces typographic correctness automatically during UI code generation without needing explicit instructions for each element.

Why does my LLM generated landing page have inconsistent text hierarchy?▼

LLM generated landing pages often have inconsistent text hierarchy due to lacking typographic standards. This Skill resolves the issue by enforcing professional rules for spacing, hierarchy, and layout during the UI generation process.

Related Skills

Explore More Design & Creative Skills→
venom9833venom9833

ui-typography

Correct typographic mistakes in HTML, CSS, and React code.

Community
Advanced
svengrazianisvengraziani
2

ui-design-principles

Guide CSS/HTML styling with visual hierarchy, spacing, typography, and depth principles.

Community
Intermediate
akobryan1akobryan1
1

ui-styling

Generate React components styled with Tailwind CSS for web apps.

Community
Intermediate
leexb-wp21-progleexb-wp21-prog

ui-typography

Fix quote marks, dashes, and spacing in HTML/CSS/React/JSX UI text.

Community
Advanced