skills.rest
maxxthedeveloper
maxxthedeveloperCOMMUNITY
Explore all skills by this author →
Website𝕏@maxxthedesignerGitHub

web-typography

Audit web typography in code or browser pages for accessibility and consistency.

3|Updated Jan 27, 2026
Search Tags:#typography#accessibility#web development#design system#css#audit#generate
One-click install
npx skills add https://github.com/maxxthedeveloper/skills-and-agents --skill web-typography-maxxthedeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-typography
Source: https://github.com/maxxthedeveloper/skills-and-agents/tree/main/skills/web-typography
Command: npx skills add https://github.com/maxxthedeveloper/skills-and-agents --skill web-typography-maxxthedeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenges of creating and maintaining consistent, accessible, and aesthetically pleasing typographic systems across web applications.

Core Features & Use Cases

  • Typography Auditing: Analyze existing code or live browser pages for typographic violations against established best practices and accessibility standards.
  • Type System Generation: Automatically create a complete, framework-aligned type system (scales, tokens, pairings) based on project context.
  • System Auditing: Verify the health and consistency of a project's typographic infrastructure.
  • Use Case: A design team is launching a new feature and needs to ensure its typography aligns with the existing design system and meets WCAG AA standards. They use the /type audit --browser command to get a comprehensive report.

Quick Start

Use the web-typography skill to audit the typography in the current project's CSS files.

Frequently Asked Questions about web-typography

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

FAQPage Schema
How do I audit my CSS typography for accessibility and consistency?▼

You can audit your CSS typography by scanning existing code or live browser pages to analyze scale, line height, hierarchy, measure, weight, and spacing against best practices and WCAG accessibility standards.

Can I generate a complete web typography system that aligns with Tailwind or Apple conventions?▼

Yes, you can automatically generate a complete, framework-aligned type system including scales, tokens, and pairings based on project context, with opinionated conventions towards Apple, Linear, and Tailwind.

What is a type scale and how does line height affect web typography?▼

A type scale systematically defines font size ratios for visual hierarchy, while line height controls vertical text spacing; both are essential for maintaining consistency, responsiveness, and accessibility across web applications.

How do I check if my design system's typography meets WCAG standards?▼

To check if your design system's typography meets WCAG standards, perform a system audit to verify the health, consistency, and accessibility of the project's typographic infrastructure across web applications.

Does this web typography tool work with existing CSS files or live browser pages?▼

Yes, this web typography tool supports multiple audit modes including direct code audits of existing CSS files and live browser audits of rendered pages to detect typographic violations and accessibility issues.

What are the limitations of automating web typography generation for responsive design?▼

Automating web typography generation for responsive design requires clear project context to establish accurate scales and tokens; without proper input, the generated system may not fully address specific layout edge cases.

Related Skills

Explore More Design & Creative Skills→
venom9833venom9833

ui-typography

Correct typographic mistakes in HTML, CSS, and React code.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
carayacaraya
1

css-testing

Detect visual regressions and accessibility issues in CSS across browsers and viewports.

Community
Advanced
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced