img-grid — Claude Code skill: what it does, how to install
Overlays a numbered grid onto layout screenshots and printed forms. It helps calculate column spans and widths before building table documents.
/plugin marketplace add Nikolay-Shirokov/cc-1c-skills
/plugin install 1c-skills@cc-1c-skillsWhat img-grid does
The skill runs the overlay-grid.py script to draw semi-transparent reference lines over an image: red vertical and blue horizontal markers. By default, it splits horizontal space into 50 divisions and sets row counts automatically to maintain square cells.
Line indices sit on separate top and left margins, keeping the original document legible. Every fifth and tenth line appears brighter to speed up counting. You can map out column boundaries directly from the grid and convert them into a JSON DSL layout structure.
Running this tool requires Python 3 with the Pillow imaging library (pip install Pillow). Without this dependency in your system path, the script fails immediately.
What it helps with
- overlay a calibrated reference grid onto layout screenshots
- calculate column proportions and spans for printed forms
- extract grid coordinates for table layout JSON DSL
- align column boundaries across multiple tables on a single page
Example prompts for the agent
- Add a reference grid to the layout: /img-grid ./docs/invoice.png -c 50
- Split the scanned form into 60 columns: /img-grid form-scan.jpg -c 60 -o form-grid.png
- Inspect column proportions on ./assets/m11.png using /img-grid
How to install img-grid
1Plugin marketplace
/plugin marketplace add Nikolay-Shirokov/cc-1c-skills/plugin install 1c-skills@cc-1c-skillsThis installs the whole 1c-skills plugin with all its skills
2Skills CLI (Vercel)
npx skills add Nikolay-Shirokov/cc-1c-skills --skill img-grid -a claude-code3Manually: put the files in place
~/.claude/skills/img-grid/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/img-grid/
1Skills CLI (Vercel)
npx skills add Nikolay-Shirokov/cc-1c-skills --skill img-grid -a codex2Manually: put the files in place
.agents/skills/img-grid/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/img-grid/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Nikolay-Shirokov/cc-1c-skills img-grid2Manually: put the files in place
.github/skills/img-grid/SKILL.mdPlatform CLI
gemini skills install https://github.com/Nikolay-Shirokov/cc-1c-skills --path .claude/skills/img-gridManually: put the files in place
.devin/skills/img-grid/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about img-grid
How to install img-grid in Claude Code?
Add the marketplace and install the package with /plugin marketplace add Nikolay-Shirokov/cc-1c-skills followed by /plugin install 1c-skills@cc-1c-skills. Alternatively, run npx skills add Nikolay-Shirokov/cc-1c-skills --skill img-grid -a claude-code.
What does img-grid do?
It overlays a numbered coordinate grid on images with accented markers every 5 and 10 divisions. This allows measuring column widths and table cells before generating structured documents.
What dependencies are needed for img-grid?
It requires Python 3 and the Pillow library, installed via pip install Pillow. The skill executes commands through Bash and Read tools.
Source text
SKILL.md · MIT
---
name: img-grid
description: Наложить пронумерованную сетку на изображение. Используй при анализе скриншота макета или печатной формы — измерить пропорции колонок перед генерацией табличного документа
argument-hint: <ImagePath> [-c COLS]
allowed-tools:
- Bash
- Read
---
# /img-grid — Сетка для анализа макета
Накладывает пронумерованную сетку на изображение печатной формы. Позволяет точно определить границы колонок, их пропорции и span-ы для генерации макета табличного документа.
## Использование
```
/img-grid <ImagePath> [-c COLS] [-o OUTPUT]
```
## Параметры
| Параметр | Обязательный | По умолчанию | Описание |
|-----------|:------------:|--------------|-----------------------------------------------|
| ImagePath | да | — | Путь к изображению (PNG, JPG) |
| -c COLS | нет | 50 | Количество вертикальных делений |
| -r ROWS | нет | авто | Количество горизонтальных делений (авто = квадратные ячейки) |
| -o OUTPUT | нет | `<name>-grid.<ext>` | Путь для результата |
## Команда
```bash
python "${CLAUDE_SKILL_DIR}/scripts/overlay-grid.py" "<ImagePath>" [-c 50] [-o "<OutputPath>"]
```
Требуется Python 3 с библиотекой Pillow (`pip install Pillow`).
## Что делает
1. Рисует полупрозрачные вертикальные (красные) и горизонтальные (синие) линии
2. Нумерует линии в отдельных полях сверху и слева (не перекрывает содержимое)
3. Каждая 5-я и 10-я линия выделены ярче для удобства счёта
## Как использовать результат
### 1. Определить границы колонок
Посмотреть на изображение с сеткой и записать координаты вертикальных границ каждой колонки таблицы (в номерах grid-линий).
### 2. Найти базовую решётку
Если на форме несколько таблиц с разной раскладкой (например, шапка документа и основная таблица), объединить все граничные точки. Каждый сегмент между соседними границами — одна колонка MXL.
Пример для М-11:
- Шапка: границы 0, 2, 4, 9, 14, 21, 28, 34, 40, 48
- Таблица: границы 0, 2, 4, 11, 16, 19, 23, 28, 32, 36, 42, 48
- Объединение: 0, 2, 4, 9, 11, 14, 16, 19, 21, 23, 28, 32, 34, 36, 40, 42, 48
- Результат: **16 базовых колонок** с пропорциями 2, 2, 5, 2, 3, 2, 3, 2, 2, 5, 4, 2, 2, 4, 2, 6
### 3. Записать в JSON DSL
```json
{
"columns": 16,
"page": "A4-landscape",
"columnWidths": {
"1": "2x", "2": "2x", "3": "5x", "4": "2x", "5": "3x",
"6": "2x", "7": "3x", "8": "2x", "9": "2x", "10": "5x",
"11": "4x", "12": "2x", "13": "2x", "14": "4x", "15": "2x", "16": "6x"
}
}
```
Поле `"page"` позволяет компилятору автоматически вычислить абсолютные ширины из пропорций.
### 4. Скомпилировать
`/mxl-compile` → `/mxl-validate` → `/mxl-info`
© Nikolay Shirokov · MIT · Nikolay-Shirokov/cc-1c-skills
