skills.rest
bencium
benciumCOMMUNITY
Explore all skills by this author →
Website𝕏@benciumGitHub

ui-typography

Enforces typographic standards like curly quotes in HTML, CSS, and React/JSX code.

383|53|Updated Oct 18, 2025
Search Tags:#typography#frontend#ui-design#spacing#curly-quotes#dash-usage#css-baseline
One-click install
npx skills add https://github.com/bencium/bencium-marketplace --skill ui-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/bencium/bencium-marketplace/tree/main/typography/skills/typography
Command: npx skills add https://github.com/bencium/bencium-marketplace --skill ui-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Professional typography rules ensure correct quotes, dashes, spacing, hierarchy, and layout in UI text, preventing common typographic errors in UI code output.

Core Features & Use Cases

  • Auto-enforce curly quotes in HTML/JSX to ensure consistent typography across interfaces.
  • Enforce en/em dash usage & spacing to improve readability and polish.
  • Provide CSS baseline templates and references to maintain typographic consistency in web apps.
  • Use case: When building a modern web UI, this skill guarantees typographic correctness from design to implementation.

Quick Start

Integrate the typography rules into your UI generation workflow so that every visible text output automatically adheres to typographic best practices.

Frequently Asked Questions about ui-typography

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

FAQPage Schema
How do I automatically enforce curly quotes and correct dash usage in React and HTML output?▼

To enforce curly quotes and correct dash usage, this skill automates professional typography rules across HTML, CSS, and React/JSX outputs. It applies typographic standards directly within UI generation workflows to ensure consistent text rendering.

What is the best way to maintain CSS baseline typography consistency in web apps?▼

The best way to maintain CSS baseline typography consistency is to apply baseline templates and explicit typography rule references. This provides a standardized structural foundation for spacing and layout consistency across modern web interfaces.

Does this typography automation work with both standard CSS and React JSX components?▼

Yes, this typography automation works across HTML, CSS, and React/JSX environments. It applies professional typography rules directly to these web UI development workflows to enforce correct quotes, dashes, and spacing.

How do I fix common typographic errors like incorrect spacing and hierarchy in UI code?▼

To fix common typographic errors like incorrect spacing and hierarchy in UI code, you can apply automated professional typography rules. This prevents layout inconsistencies and enforces correct text formatting from design through to implementation.

Why does my UI text rendering show straight quotes instead of curly quotes in HTML?▼

Your UI text rendering shows straight quotes instead of curly quotes because professional typography rules are not being applied to the HTML output. Automating these typography rules ensures curly quotes and correct dash usage are enforced across interfaces.

Related Skills

Explore More Design & Creative Skills→
pablolospepablolospe

ui-typography

Enforce Butterick's typographic rules on visible UI text.

Community
Advanced
otto-poblyshotto-poblysh

ui-typography

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

Community
Intermediate
leexb-wp21-progleexb-wp21-prog

ui-typography

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

Community
Advanced
ProLeadApptProLeadAppt

ui-typography

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

Community
Advanced