# mapbox-style-quality

Скилл проверяет стили Mapbox перед релизом: валидирует выражения и GeoJSON, считает контраст текста по WCAG, оптимизирует файл стиля.

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

## Что делает

Скилл ведёт агента по чек-листу качества стиля Mapbox. Внутри набор инструментов: `validate_geojson_tool` проверяет источники GeoJSON, `validate_expression_tool` ловит ошибки в выражениях, `check_color_contrast_tool` считает контраст текста и фона, `optimize_style_tool` уменьшает размер файла, `compare_styles_tool` строит отчёт о различиях между версиями.

Порядок работы задан явно. Сначала валидация всех выражений и источников GeoJSON, потом проверка контраста текстовых слоёв, затем сравнение с прошлой продакшен-версией и оптимизация. Отдельным шагом идёт чистка: удалить пустые слои без видимых paint-свойств и упростить лишнюю булеву логику в фильтрах, например `["all", expr]` до `expr`.

Контраст считается по WCAG: минимум AA — 4.5:1 для обычного текста и 3:1 для крупного, AAA — 7:1 и 4.5:1. Крупным считается текст от 18pt или от 14pt полужирного. Проверять стоит и на светлых, и на тёмных тайлах, а также на фоне попапов — на мобильном под открытым небом разница видна сразу. Если стиль ломается в рантайме, начните со сравнения рабочей и сломанной версий: обычно причина в одном выражении.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-style-quality -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-style-quality -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-style-quality -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mapbox/mapbox-agent-skills mapbox-style-quality
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-style-quality -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-style-quality -a opencode
```

### Claude.ai

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

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

## Когда брать
- поймать ошибку в выражении до рантайма карты
- проверить контраст подписей по WCAG AA или AAA
- уменьшить вес файла стиля перед деплоем
- разобраться, что изменилось между двумя версиями стиля
- отбраковать GeoJSON с битыми координатами и незакрытыми полигонами

## Примеры запросов агенту
- проверь выражения в этом стиле через validate_expression_tool
- посчитай контраст для слоёв с подписями и скажи, где не хватает до WCAG AA
- сравни текущий стиль с продакшен-версией и покажи различия

## Похожие
- [maplibre-mapbox-migration](https://affpapa.org/nevibecode/skills/maplibre-mapbox-migration.md) — скилл · 464 установки
- [data-quality-checker](https://affpapa.org/nevibecode/skills/data-quality-checker.md) — скилл · 3300 установок
- [pr-feedback-quality-gate](https://affpapa.org/nevibecode/skills/pr-feedback-quality-gate.md) — скилл · 1800 установок
- [syncfusion-react-maps](https://affpapa.org/nevibecode/skills/syncfusion-react-maps.md) — скилл · 702 установки
- [accessibility](https://affpapa.org/nevibecode/skills/web-quality-skills-accessibility.md) — скилл · 64100 установок
- [better-accessibility](https://affpapa.org/nevibecode/skills/better-accessibility.md) — скилл · 29600 установок

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

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

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