skills.rest
leexb-wp21-prog
leexb-wp21-progCOMMUNITY
Explore all skills by this author →
GitHub

ui-typography

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

Updated Apr 28, 2026
Search Tags:#ui typography#web typography#react jsx#typographic rules#quotes and punctuation#spacing and layout#editorial audit
One-click install
npx skills add https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk --skill ui-typography-leexb-wp21-prog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk/tree/main/.cursor/skills/skills-main/skills-main/skills/typography
Command: npx skills add https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk --skill ui-typography-leexb-wp21-prog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Prevents typographic mistakes in UI copy (quotes, dashes, spacing, hierarchy, and punctuation) that make interfaces look unprofessional or inconsistent.

Core Features & Use Cases

  • Enforcement for generated UI: Automatically applies correct typographic rules whenever creating HTML/CSS/React/JSX or UI code that includes visible text.
  • Audit and fixes for legacy code: Flags typography violations in existing interfaces and provides before/after corrections.
  • Consistent screen-safe typography: Ensures readable, professional layout defaults such as line length, line spacing, spacing rules, and heading formatting.

Quick Start

Use the ui-typography skill to generate UI content and ensure every visible text artifact uses correct quotes, dashes, spacing, and hierarchy automatically.

Frequently Asked Questions about ui-typography

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

FAQPage Schema
How do I fix typographic errors in React JSX components?▼

To fix typographic errors in React JSX, the skill audits visible UI text and auto-applies correct quote marks, dashes, and spacing conventions to ensure professional, screen-safe layout defaults.

What is the best way to enforce proper quotes and punctuation in web typography?▼

Enforcing proper quotes and punctuation in web typography is achieved by using enforcement mode to automatically apply correct typographic entities and spacing rules whenever generating HTML or CSS interface code.

Can I audit legacy UI code for spacing and layout convention violations?▼

Yes, you can audit legacy UI code for spacing and layout violations; the skill detects typography issues in existing interfaces and flags them with actionable before and after corrections.

Does this typographic rules tool work with standard HTML and CSS landing pages?▼

Yes, the typographic rules tool works with standard HTML and CSS landing pages, automatically ensuring readable, professional layout defaults like line length, line spacing, and heading formatting for visible copy.

Why does my UI text look unprofessional despite correct CSS styling?▼

Your UI text looks unprofessional due to typographic mistakes in quotes, dashes, or spacing; running an editorial audit detects these hierarchy and punctuation violations and provides actionable fixes.

Related Skills

Explore More Design & Creative Skills→
otto-poblyshotto-poblysh

ui-typography

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

Community
Intermediate
Aurora-AIAurora-AI
1

sovereign-ui

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

Community
Basic
arthtyagiarthtyagi
1

baseline-ui

Enforce consistent Tailwind CSS and React UI constraints across design reviews.

Community
Intermediate
chaorenex1chaorenex1
3

code-fix-assistant

Format and fix code errors across Python, JavaScript/TypeScript, Java, Go, and Rust.

Community
Advanced