typeset

Audit and fix typography in Puree panels using YAML/SCSS-driven UI components.

20|2|Updated Oct 5, 2025

Search Tags:#typography #design #ui #consistency #readability #yaml #type-scale

Ready to run

npx skills add https://github.com/nicolaiprodromov/puree --skill typeset-nicolaiprodromov

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/nicolaiprodromov/puree/tree/main/.agents/skills/typeset
Command: npx skills add https://github.com/nicolaiprodromov/puree --skill typeset-nicolaiprodromov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography in Puree UI remains generic and inconsistent, making interfaces harder to read and navigate. This skill provides a structured approach to identify typography issues, establish a deliberate type system, and apply readability and consistency practices across panels and components.

Core Features & Use Cases

Establish a modular type scale (font families, sizes, and weights) for headings, body text, and captions to ensure clear hierarchy.
Audit font choices, loading methods via YAML font attributes, and ensure consistent typography across UI panels.
Provide a workflow for planning, implementing, and validating typography improvements with real-world examples like panel labels, info blocks, and forms.

Quick Start

Describe the panel or text-heavy component to improve and provide any current typography context to begin the enhancement.

Frequently Asked Questions about typeset

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

FAQPage Schema

How do I fix inconsistent typography in Puree UI panels?▼

To fix inconsistent typography in Puree UI panels, you establish a modular type scale for headings, body text, and captions, and audit font loading via YAML font attributes to ensure consistent hierarchy and readability across components.

What is a modular type scale and how does it improve dashboard readability?▼

A modular type scale defines deliberate font families, sizes, and weights for headings and body text. It improves dashboard readability by establishing clear visual hierarchy and consistent text presentation across UI components like info blocks and labels.

How do I audit font choices and loading methods using YAML attributes?▼

You audit font choices and loading methods by reviewing YAML font attributes within your SCSS-driven UI components. This process identifies generic text and ensures consistent typography application across panels and forms.

Can I use this structured typography workflow for SCSS-driven components?▼

Yes, this structured typography workflow applies to YAML and SCSS-driven UI components. It guides you through preparation, assessment, and implementation to establish deliberate type systems and readability practices across dashboards and labels.

What is the best way to establish a consistent type system for UI labels and forms?▼

The best way to establish a consistent type system for UI labels and forms is to follow a structured workflow covering font choices, type scale, and readability. This ensures brand voice and clear hierarchy in everyday interface workflows.