skills.rest
scamai
scamaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-typography

Enforce typographic rules for quotes, dashes, spacing, and hierarchy in UI code.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

In UI development, typography is often mishandled across HTML, CSS, and JSX, leading to inconsistent quotes, dash usage, spacing, and visual hierarchy. This Skill centralizes and enforces a complete typography system so text renders correctly in all UI contexts.

Core Features & Use Cases

  • Automatic typography enforcement: when generating UI output (HTML, CSS, JSX), apply the full set of rules silently.
  • Audit and remediation: identify and fix typographic violations in existing interfaces.
  • Reference-guided standards: leverage included CSS typography templates and HTML entities to ensure correct characters and spacing.

Quick Start

Apply all typography rules to any UI output you generate and return corrected code with proper quotes, dashes, spacing, and layout.

Frequently Asked Questions about ui-typography

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

FAQPage Schema
How do I enforce proper typography and curly quotes in UI code generation?▼

To enforce professional UI typography, a centralized system automatically applies curly quotes, correct dashes, and proper spacing across HTML, CSS, and JSX. This ensures text renders consistently without manual character corrections during UI component creation.

What is the best way to fix typographic inconsistencies like straight quotes and spacing in existing interfaces?▼

Auditing and remediating typographic inconsistencies involves scanning existing interfaces to identify violations like straight quotes or incorrect spacing. The system then returns corrected code, replacing them with proper HTML entities and applying CSS typography templates.

How does automatic typography enforcement handle CSS templates and HTML entities?▼

Automatic typography enforcement works by referencing built-in CSS typography templates and HTML entities. When generating UI output, it silently replaces invalid characters with proper entities and applies layout rules to maintain visual hierarchy.

Can I use automated typography rules for dashboards and landing pages built with JSX?▼

Yes, automated typography rules are specifically designed to be applied across code generation for landing pages, dashboards, and design systems. They satisfy requirements for correct quotes, dashes, and spacing within JSX, CSS, and HTML contexts.

Why does my UI text render with inconsistent visual hierarchy and incorrect dash characters?▼

UI text renders with inconsistent visual hierarchy and incorrect dash characters when typography is mishandled across HTML, CSS, and JSX. Applying a comprehensive typography system enforces single/double spacing, en/em dashes, and layout standards to resolve this.

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
pablolospepablolospe

ui-typography

Enforce Butterick's typographic rules on visible UI text.

Community
Advanced
leexb-wp21-progleexb-wp21-prog

ui-typography

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

Community
Advanced
daominahdaominah

writing-style

Enforce consistent punctuation and straight quotes across prose and comments.

Community
Basic