skills.rest
akavinashsingh
akavinashsinghCOMMUNITY
Explore all skills by this author →
GitHub

ui-typography

Enforce typography rules for quotes, dashes, spacing, and font features in CSS and JSX.

Updated Dec 21, 2025
Search Tags:#typography#React#UI#CSS#text formatting#font
One-click install
npx skills add https://github.com/akavinashsingh/campus-mart --skill ui-typography-akavinashsingh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-typography
Source: https://github.com/akavinashsingh/campus-mart/tree/main/.claude/skills/typography
Command: npx skills add https://github.com/akavinashsingh/campus-mart --skill ui-typography-akavinashsingh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures that all UI-generated text adheres to professional typography standards, correcting common mistakes and maintaining high visual quality automatically.

Core Features & Use Cases

  • Automatic Typography Enforcement: When generating UI code, apply rules for quotes, dashes, spacing, and font usage without user intervention.
  • Audit and Flag Violations: Review existing interfaces or code snippets to detect typography issues and suggest corrections.
  • Use Case: Designing a professional landing page where all quote marks, dash types, and spacing conform to typographic best practices, ensuring a polished appearance.

Quick Start

Generate React components with properly formatted quotes and dashes, or review existing UI code for typographic violations.

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 in React components automatically?▼

Typography in React components is enforced automatically by applying CSS and JSX style rules for quotes, dashes, and spacing without user intervention, ensuring visual consistency across platforms.

Can I audit existing UI code for typography violations?▼

Yes, you can audit existing UI code snippets to detect typography issues like incorrect quote marks or dash types, and the tool will suggest corrections to maintain professional visual quality.

What typography issues does automatic UI formatting correct?▼

Automatic UI formatting corrects common typography mistakes including improper quote marks, incorrect dash types, spacing errors, and font feature usage to ensure text adheres to professional standards.

Does this typography automation work with CSS and JSX?▼

Yes, typography automation uses CSS and JSX to automatically correct and audit typography issues in UI development workflows, suitable for both designing new interfaces and improving legacy code.

What's the best way to fix typography inconsistencies in legacy UI code?▼

The best way to fix typography inconsistencies in legacy UI code is to audit existing snippets for typographic violations, which automatically detects issues and suggests corrections for quotes, dashes, and spacing.

When do I need automated typography enforcement in UI development?▼

Automated typography enforcement is needed when designing professional landing pages or interfaces where all text elements must conform to typographic best practices for a polished appearance.

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
MomoDavilukeMomoDaviluke
2

design-taste-frontend

Codify frontend UI constraints and patterns for React-based dashboards.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic