SKILL.md

---
name: typography-direction-comparison
description: Develop, preview, and compare distinct Google Font directions for one brand or product brief. Use when a user asks for multiple typography concepts, alternatives, mood-based routes, or an A/B-style creative comparison before choosing a trio. Default to three clearly differentiated directions unless the user requests another manageable count; use a separate `suggest-fonts` call and widget for each direction.
---

# Typography Direction Comparison

Create alternatives that represent meaningful strategic choices, not minor substitutions within one idea.

## Verify the app tool

Confirm that `suggest-fonts` is available before defining or describing font directions. If it is unavailable, stop and say that the Font Pairing app must be enabled to generate the previews; do not present speculative families as completed directions. Describe a preview as rendered only after its tool call returns structured font output.

## Frame the comparison

Identify the shared audience, context, brand traits, constraints, and evaluation criteria. Default to three directions. Honor an explicit smaller count, and keep a larger request manageable by grouping or narrowing it before generating excessive widgets.

Define and name every direction before selecting fonts. Make each direction differ on at least two useful dimensions, such as:

- traditional versus contemporary;
- expressive versus restrained;
- serif-led versus sans-led;
- high versus subtle role contrast;
- editorial warmth versus product precision.

Keep non-typographic constraints consistent so the comparison remains meaningful.

## Generate the directions

For each direction:

1. State its name and one-sentence intent.
2. Select a coordinated heading, accent, and body trio that embodies that intent.
3. Invoke `suggest-fonts` once for that direction. Use only schema-listed families and supported weight/style combinations, and identify the direction in the optional `reason`.
4. Add one concise strength and one tradeoff after its widget.

Do not reuse two of three families across directions unless a fixed or locked font is part of the brief. When a font is fixed, vary the surrounding roles enough to create genuinely different systems.

## Compare and recommend

After all requested widgets appear:

- compare the directions against the same criteria;
- identify the strongest context for each;
- recommend one direction and explain the decisive tradeoff;
- ask the user to choose a direction or name the element to preserve.

On the next refinement, work only from the chosen direction unless the user requests another comparison. Preserve model-visible locked fonts and invoke `suggest-fonts` again only for the revised trio.

## Deliver the result

Provide:

- named and clearly differentiated directions;
- one `suggest-fonts` widget per direction;
- a compact strengths-and-tradeoffs comparison;
- one reasoned recommendation;
- a direct refinement choice.

## Boundaries

- The app renders one trio per tool call; do not claim the widgets form a single side-by-side canvas.
- Treat the `suggest-fonts` schema as authoritative and correct any rejected variant instead of describing an unrendered preview as successful.
- Do not claim that a subjective recommendation is an objective score or user-test result.
- Do not claim to operate locks, similarity, or preview-text controls. Use only model-visible state and explicit follow-up instructions.