# canvas

Генерирует файлы .canvas для Nimbalyst с карточками файлов проекта, заметками и связями. Пригодится, когда нужно визуально разложить экраны интерфейса или документы воркспейса.

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

## Что делает

Скилл обучает агента собирать файлы досок формата `.canvas`. Этот формат расширяет спецификацию JSON Canvas 1.0. Карточки на полотне работают живыми редакторами для файлов проекта вроде макетов `.mockup.html` или таблиц `.csv`. Это не статичные скриншоты.

У скилла нет собственного MCP-сервера. Агент генерирует JSON напрямую через стандартный инструмент записи файлов. В разметке порядок элементов в массиве `nodes` задаёт глубину z-order. Рамки групп поэтому объявляются раньше вложенных карточек. Если указать путь к отсутствующему файлу, холст покажет серый плейсхолдер.

Координаты и размеры карточек кратны шагу сетки в 20 пикселей. Между соседними блоками агент оставляет отступ 60–100 пикселей. Так панели инструментов и бейджи комментариев не перекрывают друг друга.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add nimbalyst/nimbalyst --skill canvas -a claude-code
```

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install nimbalyst/nimbalyst canvas
```

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

### Gemini CLI

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

2. **Командой платформы**
```bash
gemini skills install https://github.com/nimbalyst/nimbalyst --path packages/extensions/canvas/claude-plugin/skills/canvas
```

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- собрать визуальную карту экранов и пользовательского пути
- разложить документы воркспейса на бесконечном холсте
- сгруппировать макеты и заметки в интерактивные фреймы
- соединить связанные файлы проекта направленными рёбрами

## Примеры запросов агенту
- Сделай `.canvas` доску с онбордингом пользователей из файлов в папке `design/mockups`
- Разложи файлы документации на холсте слева направо и свяжи их стрелками
- Создай обзорный `.canvas` файл проекта с фреймами для архитектуры и заметок

## Похожие
- [find-skills](https://affpapa.org/nevibecode/skills/find-skills.md) — скилл · 4000000 установок
- [grill-me](https://affpapa.org/nevibecode/skills/grill-me.md) — скилл · 1424476 установок
- [grill-with-docs](https://affpapa.org/nevibecode/skills/grill-with-docs.md) — скилл · 1219756 установок
- [handoff](https://affpapa.org/nevibecode/skills/handoff.md) — скилл · 1038491 установка
- [grilling](https://affpapa.org/nevibecode/skills/grilling.md) — скилл · 979543 установки
- [teach](https://affpapa.org/nevibecode/skills/teach.md) — скилл · 862247 установок

## Другие версии с тем же именем
- [canvas · agricidaniel](https://affpapa.org/nevibecode/skills/agricidaniel-canvas.md) — 454 установки

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

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

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