What types of typography scales can this skill generate?

It supports modular scales based on mathematical ratios (like the Golden Ratio), musical intervals (like a Perfect Fourth), or completely custom user-defined scales.

Is the output accessible?

Yes, the generated systems default to a 16px base, utilize relative units (rem), and enforce WCAG-compliant line heights and hierarchy rules.

Does it handle responsive design automatically?

Yes, the skill generates media queries and responsive overrides for large display text and headings to ensure they scale down appropriately for mobile devices.

How does it improve web performance?

The skill generates optimized HTML head tags for font preloading, preconnecting to font providers, and implementing 'font-display: swap' to prevent layout shifts.

Typography System Designer

Name: Typography System Designer
Author: melodic-software

bymelodic-software

•

디자인 도구

Architects comprehensive, responsive typography scales and semantic text systems using modular mathematical ratios.

The Define Typography skill empowers developers to build professional-grade text hierarchies with ease. It calculates modular scales based on mathematical or musical intervals, generates semantic text styles for headings and body copy, and produces production-ready CSS variables. Beyond simple styling, it automates font-loading strategies and ensures compliance with WCAG accessibility standards, making it an essential tool for building robust design systems and content-heavy applications within the Claude Code environment.

주요 기능

01Mathematical scale generation using modular, musical, or custom ratios

0238 GitHub stars

03Responsive typography rules with built-in mobile overrides

04Production-ready CSS output with variables and utility classes

05Optimized font-loading configurations including preloading and subsetting

06Automatic calculation of rem-based sizes and proportional line heights

사용 사례

01Establishing a new design system's typographic foundation

02Refactoring legacy CSS into a modern, token-based typography system

03Implementing high-performance font loading strategies for improved Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add melodic-software/claude-code-plugins define-typography

For use in Claude.ai and ChatGPT

Download Skill