# ui-typography

Скилл задаёт правила типографики для интерфейсов и заставляет агента молча применять их при генерации HTML, CSS и React.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3900 установок · ★ 467
- Автор: bencium
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bencium/bencium-marketplace/tree/HEAD/typography/skills/typography/SKILL.md
- Обновлён: 2026-10-04
- HTML: https://affpapa.org/nevibecode/skills/ui-typography

## Что делает

Скилл описывает, как правильно ставить кавычки, тире, многоточия и пробелы в тексте на экране. Агент применяет эти правила сам, когда пишет разметку или компоненты, и не спрашивает разрешения. Отдельный режим — аудит: при разборе чужого кода скилл показывает нарушения и предлагает исправления.

Внутри два справочных файла: `references/css-templates.md` с базовым CSS и OpenType-настройками и `references/html-entities.md` с таблицей сущностей. Правила собраны по книге Мэтью Баттерика Practical Typography. Есть предупреждение про JSX: escape-последовательности вроде `\u2019` в тексте между тегами рендерятся буквально, поэтому нужен либо настоящий символ UTF-8, либо выражение в фигурных скобках.

Скилл рассчитан на любой код с видимым текстом: лендинги, дашборды, презентации, документы. Если в проекте уже есть свой линтер типографики, правила скилла будут дублировать его замечания — это повод проверить, кто из них главнее.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill ui-typography -a claude-code
```
```bash
npx skills add bencium/bencium-marketplace --skill typography -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/typography/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/typography/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill typography -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/typography/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill typography -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/typography/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bencium/bencium-marketplace typography
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/typography/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill typography -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bencium/bencium-marketplace --path typography/skills/typography
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/typography/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill typography -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/bencium/bencium-marketplace/tree/HEAD/typography/skills/typography/SKILL.md

## Когда брать
- поставить правильные кавычки и тире в тексте интерфейса
- найти нарушения типографики в старом коде и получить исправления
- собрать базовый CSS с OpenType-настройками
- поправить апострофы в JSX, которые рендерятся как escape-последовательности
- привести к одному виду отступы и пробелы вокруг знаков

## Примеры запросов агенту
- собери лендинг для нового продукта, типографику примени сам
- проверь типографику в этом компоненте и покажи, что исправить
- сделай дашборд с таблицей заказов, текст оформи по правилам

## Похожие
- [typography-scale](https://affpapa.org/nevibecode/skills/typography-scale.md) — скилл · 2600 установок
- [better-typography](https://affpapa.org/nevibecode/skills/better-typography.md) — скилл · 34200 установок
- [web-typography](https://affpapa.org/nevibecode/skills/web-typography.md) — скилл · 9200 установок
- [kinetic-typography](https://affpapa.org/nevibecode/skills/kinetic-typography.md) — скилл · 2200 установок
- [modular-scale-typography](https://affpapa.org/nevibecode/skills/modular-scale-typography.md) — скилл · 884 установки
- [critique-typography](https://affpapa.org/nevibecode/skills/critique-typography.md) — скилл · 2000 установок

Из того же набора: [bencium/bencium-marketplace](https://affpapa.org/nevibecode/by/bencium/bencium-marketplace.md) — 16 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md