# custom-blocks

Помогает собрать интерактивный интерфейс внутри Notion, который читает и меняет данные рабочего пространства.

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

## Что делает

Скилл ведёт автора кастомного блока по всему пути: подготовка проекта, объявление блока, подключение фронтенда к Notion, локальный предпросмотр и деплой. Блок состоит из двух частей — объявления Worker на `@notionhq/workers` и фронтенда на `@notionhq/custom-blocks`, который работает в песочнице iframe.

Новый проект создаётся из шаблона: `ntn workers new my-worker-name --template <template>`, на выбор есть `custom`, `whiteboard`, `habit-tracker` и `org-chart`. Объявление живёт в `src/index.ts`, файлы фронтенда — в `blocks/<key>/`, а зависимости держат в корневом `package.json` воркера. Для React с Vite скилл ставит `@notionhq/custom-blocks`, `react`, `react-dom` и dev-пакеты вроде `@notionhq/custom-blocks-dev-shell` и `vite`. Поле `command` лучше задать явно: его значение по умолчанию `npm run build` может собрать воркер вместо фронтенда.

Ограничения стоит прочитать до начала работы. Фронтенд не может обращаться к внешним API и тянуть зависимости с CDN, поэтому скрипты, стили и шрифты кладут в собранный артефакт. `useDataSource` отдаёт не больше 999 строк за запрос, по умолчанию 20, а фильтры не поддерживают группы `or` и вложенные группы. Кастомные блоки находятся в private alpha: если Notion сообщает, что функция отключена, рабочему пространству нужен доступ, иначе блок не заработает. Гости страницы такие блоки не видят, а Notion Sites их не отрисовывает.

## Требования
- Работает с: Notion

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add makenotion/notion-cookbook --skill custom-blocks -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add makenotion/notion-cookbook --skill custom-blocks -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add makenotion/notion-cookbook --skill custom-blocks -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install makenotion/notion-cookbook custom-blocks
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add makenotion/notion-cookbook --skill custom-blocks -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/makenotion/notion-cookbook --path workers/agents/skills/custom-blocks
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add makenotion/notion-cookbook --skill custom-blocks -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/makenotion/notion-cookbook/tree/HEAD/workers/agents/skills/custom-blocks/SKILL.md

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

## Примеры запросов агенту
- Создай новый кастомный блок из шаблона `habit-tracker`
- Объяви блок `issueBoard` в `src/index.ts` и подключи фронтенд к источнику данных
- Проверь, почему блок не отрисовывается в Notion Sites

## Похожие
- [notion-api](https://affpapa.org/nevibecode/rules/notion-api.md) — правило · ★ 3579
- [notion](https://affpapa.org/nevibecode/skills/notion.md) — скилл · 5600 установок
- [notion-automation](https://affpapa.org/nevibecode/skills/notion-automation.md) — скилл · 4800 установок
- [notion-meeting-intelligence](https://affpapa.org/nevibecode/skills/openai-notion-meeting-intelligence.md) — скилл · 3100 установок
- [discover-brand](https://affpapa.org/nevibecode/skills/discover-brand.md) — скилл · 2900 установок
- [sred-project-organizer](https://affpapa.org/nevibecode/skills/sred-project-organizer.md) — скилл · 2100 установок

## Другие версии с тем же именем
- [custom-blocks · makenotion](https://affpapa.org/nevibecode/skills/custom-blocks.md) — ★ 220

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

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