fix(docs-site): disable Geist Mono ligatures on every font-mono surface (#228)

Geist Mono fuses `--` into an em-dash glyph that visually swallows the
adjacent space, so prompts like `npx skills add Kaelio/ktx --skill ktx`
rendered as `Kaelio/ktx--skill ktx` on the quickstart page. The existing
ligature-off rule only covered <code>/<pre> and the .ktx-code wrapper —
quickstart.mdx puts the prompt in a plain <div className="font-mono">,
so the rule didn't apply. Extend the selector to also match the
.font-mono Tailwind utility and any inline-style opt-in via the mono
font CSS variable.

Document the convention in AGENTS.md so future docs additions keep
ligatures off on any new monospace container.
This commit is contained in:
Andrey Avtomonov 2026-05-28 12:51:17 +02:00 committed by GitHub
parent 39f94f39ff
commit 2a85346613
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 2 deletions

View file

@ -375,6 +375,22 @@ that do not change user-facing behavior. When you do update docs, follow the
warrants docs but you are out of scope, call it out in your final summary warrants docs but you are out of scope, call it out in your final summary
rather than silently skipping it. rather than silently skipping it.
#### Monospace ligatures in `docs-site/`
- **MUST**: Disable monospace ligatures on every surface that uses the
`var(--font-mono)` family (Geist Mono). Geist Mono fuses `--` into an
em-dash glyph that visually eats the adjacent space, so prompts like
`npx skills add Kaelio/ktx --skill ktx` render as `Kaelio/ktx--skill ktx`.
- **MUST**: When adding a new container that renders user-visible monospace
text outside `<code>` / `<pre>` (e.g. a styled `<div className="font-mono">`
for a copyable prompt), verify the global ligature-off rule in
`docs-site/app/global.css` covers its selector. Either use Tailwind's
`font-mono` utility (already covered) or extend the rule to match the new
class — do not silently rely on Geist Mono's defaults.
- **SHOULD**: Prefer `<code>` / `<pre>` (or a `font-mono` wrapper) for any
string that contains CLI flags, paths, or other tokens with `--`, `->`,
`>=`, `!=`, `==`, `//` so ligatures never alter intent.
## LLM and Prompt Development ## LLM and Prompt Development
When creating or modifying agent prompts, system prompts, tool descriptions, or When creating or modifying agent prompts, system prompts, tool descriptions, or

View file

@ -166,12 +166,16 @@ pre {
} }
/* Disable monospace ligatures so `--flag` keeps a visible space and double /* Disable monospace ligatures so `--flag` keeps a visible space and double
dashes don't fuse into an em-dash glyph. */ dashes don't fuse into an em-dash glyph. Covers every monospace surface:
raw <code>/<pre>, the ktx-code wrapper, Tailwind's `font-mono` utility,
and anything that opts in via the `var(--font-mono)` family directly. */
code, code,
pre, pre,
pre code, pre code,
.ktx-code, .ktx-code,
.ktx-code code { .ktx-code code,
.font-mono,
[style*="--font-mono"] {
font-variant-ligatures: none !important; font-variant-ligatures: none !important;
font-feature-settings: "liga" 0, "calt" 0 !important; font-feature-settings: "liga" 0, "calt" 0 !important;
} }