typeset

Overview of typeset skill

What the typeset skill does

The typeset skill improves typography in UI work by diagnosing weak font choices, muddy hierarchy, inconsistent sizing, weak contrast, and low readability. It is not a generic “make it prettier” prompt. It is a focused typography pass that turns default-looking text into a more intentional type system.

Who should use typeset

This skill is best for people working on product UI, landing pages, dashboards, or app surfaces where the text feels bland, inconsistent, or hard to scan. It is especially useful for designers, frontend builders, and AI-assisted prototypers who already have a layout but know the typography is underperforming.

The real job to be done

Most users do not need abstract type theory. They need the skill to answer practical questions such as:

• why the interface feels generic
• whether the current fonts fit the brand
• how to create clearer hierarchy
• what text sizes and weights should change first
• how to make typography more readable without redesigning the whole UI

What makes typeset different from a normal prompt

The main differentiator is scope discipline. typeset is specifically about typography quality in context: font family choice, scale, hierarchy, line length, spacing, and readability. It also requires upstream design context first, rather than guessing in a vacuum. That makes it more reliable than asking an assistant to “improve the text styling” with no framework.

Important adoption constraint

The biggest thing to know before install is that typeset depends on another skill. Its own instructions say to invoke /frontend-design first and follow that skill's context-gathering protocol. If no design context exists yet, it requires /teach-impeccable before proceeding. If you want a standalone typography tool with all context collection built in, this is not that.

How to Use typeset skill

Install context for typeset

Because the upstream SKILL.md does not publish a repo-specific install command, directory users typically add it from the repository skill path through their skills toolchain. If your environment supports skill installs by repo, use your normal add flow for pbakaus/impeccable and select the typeset skill.

If you are evaluating whether to install it, the practical question is simpler: do you already use the impeccable design skills and are you comfortable with chained skill workflows? If yes, typeset fits well.

Read this file first

Start with:

• SKILL.md

This skill has no visible helper scripts, references, or rule files in the published tree preview, so nearly all of the operating logic is in that one file. That is good for quick evaluation, but it also means you should read it directly rather than assume hidden tooling will handle edge cases.

Required dependency before first use

Before using typeset, the skill explicitly requires:

1. /frontend-design
2. its Context Gathering Protocol
3. /teach-impeccable if design context has not yet been established

This matters because typeset is meant to refine typography in an existing design context, not invent brand and UX principles from scratch.

Best input types for typeset for UI Design

The best typeset for UI Design inputs are concrete and visual. Good inputs include:

• a screenshot of the current UI
• a component list with current text styles
• CSS or design token values for font family, sizes, weights, and line heights
• the product tone or brand personality
• the target surface, such as dashboard, mobile app, or marketing page

Weak input:

• “Make the typography better.”

Strong input:

• “Audit the typography on this B2B dashboard. Current body text is 14px Inter, headings are 16px and 18px, everything feels flat, and dense tables are hard to scan. Keep a practical SaaS tone and avoid decorative display fonts.”

The stronger version gives the skill something it can actually optimize.

What typeset looks for in practice

From the source, typeset evaluates typography through a practical set of checks:

• default or overused font choices
• mismatch between font personality and brand
• too many font families
• weak hierarchy between headings, body, and captions
• size steps that are too close together
• weight differences that are too subtle
• arbitrary sizing instead of a clear scale
• body text below readable minimums
• context mismatch between fixed and fluid sizing strategies

This makes the skill strongest when you want a structured audit, not just inspiration.

Turn a rough request into a better typeset prompt

To get better typeset usage, phrase the request around four things:

1. target surface
2. current typography problems
3. constraints
4. desired feel

Example:

• “Use typeset on this settings page. The current typography feels default and hard to scan. Keep the existing layout, stay within system font performance constraints, and make hierarchy clearer for headings, labels, helper text, and table content.”

That is much better than:

• “Polish the design.”

Suggested workflow for a real typography pass

A practical workflow is:

1. gather design context with /frontend-design
2. provide screenshots or current styles
3. ask typeset for an assessment first
4. review proposed hierarchy, font, scale, and readability changes
5. ask for revised tokens or CSS-ready recommendations
6. apply changes
7. run one more pass focused on edge cases like dense forms, tables, and mobile screens

This staged workflow helps prevent overcorrecting typography before the context is clear.

What good output should include

A useful typeset guide outcome should usually include:

• what feels generic or inconsistent today
• which font choices are helping or hurting
• a clearer type hierarchy
• recommended size and weight changes
• readability issues such as body size or line length
• guidance tied to your actual UI context, not generic typography rules

If the output only says “increase contrast” or “use a better font,” it is too shallow. Ask for explicit role-by-role recommendations.

When typeset is a strong fit

Use the typeset skill when:

• your UI looks default despite decent layout
• headings and body text blur together
• text feels too small or dense
• the brand tone and typeface feel misaligned
• you want a systematic typography review instead of ad hoc tweaks

When typeset is the wrong tool

Skip typeset if your main problem is not typography. It is a weak fit when:

• the layout itself is broken
• spacing and composition are the bigger issue
• you need copywriting, not visual hierarchy
• there is no design context at all and you are unwilling to run the prerequisite skills
• you want production-ready code from typography advice alone

typeset skill FAQ

Is typeset beginner-friendly?

Yes, with one caveat: the skill itself is readable, but it assumes you can provide design context or follow a dependency chain. Beginners can still use it well if they bring screenshots and ask for plain-language recommendations instead of abstract type theory.

Does typeset replace normal design critique?

No. typeset is narrower than a broad UI review. It helps with font choice, hierarchy, scale, and readability, but it will not replace a full audit of layout, interaction, spacing, or visual identity.

How is typeset different from asking an AI to improve typography?

A generic prompt often gives surface-level advice. typeset is better when you want a repeatable typography lens with specific checks for defaults, hierarchy gaps, weak weight contrast, and scale consistency. Its biggest advantage is that it is meant to run inside a broader design workflow.

Do I need frontend code to use the typeset skill?

No, but it helps. You can use screenshots alone for a critique. However, if you want actionable output, current CSS, design tokens, or style definitions make the recommendations much easier to apply.

Is typeset only for polished brand systems?

No. It can help early-stage prototypes too, especially when everything still uses generic defaults. In fact, that is one of the clearest use cases surfaced by the skill description.

Can typeset help with responsive typography?

Yes, to a degree. The source explicitly distinguishes between fixed rem scales for app UIs and fluid clamp(...) approaches for some responsive contexts. That means responsive sizing strategy is part of the review, not an afterthought.

When should I not install typeset?

Do not install typeset if you want a self-contained typography agent with no prerequisites. Also skip it if your team does not use the impeccable ecosystem, because part of its value comes from the linked workflow rather than this file alone.

How to Improve typeset skill

Give typeset the text roles, not just a screenshot

One of the best ways to improve typeset output is to identify text roles explicitly:

• page title
• section heading
• body copy
• label
• helper text
• caption
• table text
• button text

This lets the skill recommend a clearer hierarchy instead of making vague observations from a screenshot.

Include constraints that matter in implementation

Tell typeset what it cannot change:

• must keep system fonts
• can use only one family plus monospace
• cannot reduce density
• must support mobile first
• must preserve enterprise readability

Constraints improve realism. Without them, the skill may suggest typography that looks better in theory than in your product.

Ask for a prioritized fix order

A common failure mode is getting too many suggestions at once. Ask typeset to rank fixes by impact:

1. readability blockers
2. hierarchy issues
3. font-family mismatch
4. scale cleanup
5. polish

This makes the first pass easier to apply and review.

Request token-ready output

If you want implementation help, ask for output in a structure your team can use, such as:

• typography tokens
• CSS variables
• role-based style table
• before/after style mapping

For example:

• “Use typeset and return a compact table for display, h1, h2, body, caption, and label with size, weight, line height, and notes.”

Improve weak first outputs with comparative prompts

If the first result feels generic, ask for comparison:

• “Compare the current typography with a stronger alternative and explain the tradeoff.”
• “Show a conservative version and a more opinionated version.”
• “Keep the same font family but improve hierarchy using only size, weight, and spacing.”

This pushes the skill past obvious critique into usable options.

Focus on one surface at a time

Do not ask typeset to fix an entire product in one shot. Typography quality depends on context. Run it on one surface first, such as onboarding, dashboard, settings, or article view. Then reuse the resulting logic elsewhere.

Catch common failure modes early

The most common reasons typeset underdelivers are:

• no design context
• no brand tone
• no current style values
• asking for aesthetic polish without usability constraints
• mixing typography problems with unrelated layout issues

When these are present, the fix is usually better input, not more output.

Iterate after the first pass

After applying recommendations, run typeset again with the updated design and ask:

• what still feels generic
• where hierarchy is still too weak
• whether body text is now readable enough
• which text roles remain too similar

The skill is most useful as an iterative audit loop, not a one-time magic command.