Мастер-класс по Claude Code от ИИшенка Pro
Claude Code Мастер-класс
От установки и настройки до приложения на Next.js и Supabase: команды, скиллы, MCP, плагины и субагенты — всё в одном мастер-классе.
Темы мастер-класса
Мастер-класс состоит из 17 тем, которые последовательно проведут вас от основ Claude Code до приложения на Next.js с аутентификацией и базой данных Supabase.
Введение в Claude Code
В этом видео мы разберёмся, что такое Claude Code, зачем он нужен и как его эффективно использовать. Мы узнаем о его возможностях, отличиях от других инструментов и настроимся на продуктивную работу в рамках мастер-класса.
Ключевые темы:
- •Что такое Claude Code и зачем он нужен
- •Не про программирование, а про использование инструмента
- •Нейросеть в терминале: возможности и ограничения
- •Сравнение с Gemini CLI и Cursor
- •Claude Code как трендсеттер: MCP, скиллы, кастомные команды
- •Планы на мастер-класс: NextJS и Firebase
Тайм-коды видео:
Установка и настройка Claude Code
Пошаговая инструкция по установке Claude Code на различные операционные системы. Мы также подготовим необходимое окружение: установим Git, Visual Studio Code и настроим авторизацию в Claude Code.
Ключевые темы:
- •Способы установки Claude Code (документация)
- •Установка на macOS, Linux и Windows (WSL)
- •Требования к плану подписки (Pro Plan)
- •Установка через терминал и проверка версии
- •Рекомендация использовать Visual Studio Code
- •Установка Git и настройка терминала в VS Code
- •Первый запуск, выбор темы, авторизация и Security Notes
- •Интеграция с IDE (команда /ide)
Тайм-коды видео:
Структура проекта Next.js и маршрутизация
Знакомство с базовой структурой проекта Next.js, подготовленного для мастер-класса. Разбор принципов маршрутизации, группировки маршрутов и работы с layout. Запуск dev-сервера и обзор страниц приложения.
Ключевые темы:
- •Импорт базовой структуры проекта в VS Code
- •Обзор структуры: frontend и backend
- •Основы маршрутизации в Next.js
- •Папка app и группировка маршрутов (круглые скобки)
- •Маркетинговые страницы и layout
- •Страницы аутентификации (sign-in, sign-up)
- •Платформа и дашборд (защищенные маршруты)
- •Запуск сервера (npm run dev) и проверка в браузере
Тайм-коды видео:
Основы коммуникации с Claude Code
Учимся взаимодействовать с Claude Code: задавать общие вопросы о проекте и контекстные вопросы по конкретным файлам. Разбираем способы добавления файлов в контекст и применение изменений, предложенных нейросетью.
Ключевые темы:
- •Запуск Claude Code в проекте
- •Общие вопросы о проекте и разрешение на чтение файлов
- •Вопросы по конкретным файлам (через @ и sidebar)
- •Добавление фрагментов кода в контекст (выделение)
- •Запрос на изменение и применение изменений
Тайм-коды видео:
Выбор моделей и управление контекстом
Разбор доступных моделей в Claude Code (Sonnet, Opus, Haiku) и рекомендации по их использованию. Изучение команд для проверки статистики, управления сессиями и оптимизации контекстного окна (compact).
Ключевые темы:
- •Модели в Claude Code: Sonnet, Opus, Haiku
- •Слэш-команды для управления моделями (/model)
- •Когда использовать Opus, Sonnet и Haiku
- •Лимиты использования, Extra usage и кредиты
- •Статистика использования (/stats) и контекст (/context)
- •Влияние скиллов и MCP на контекст
- •Управление сессиями: новая сессия и resume (-r)
- •Хранение сессий (папка .claude) и компактизация (/compact)
Тайм-коды видео:
Инструменты управления Claude Code
Обзор основных способов управления Claude Code: встроенные и кастомные команды, скиллы (как эволюция команд), MCP-серверы для интеграции с внешними сервисами, хуки для продвинутой разработки и плагины, объединяющие всё вышеперечисленное.
Ключевые темы:
- •Пять способов управления: команды, скиллы, MCP, хуки, плагины
- •Команды (Commands) и слэш-меню
- •Скиллы (Skills) как замена командам
- •MCP-серверы: выход во внешний мир
- •Хуки (Hooks) для разработчиков
- •Плагины (Plugins): объединение функционала
- •Команда /init и создание CLAUDE.md
- •Контроль версий и команда /rewind, конфигурация /config
Тайм-коды видео:
Управление разрешениями и настройками
Разбор системы разрешений (permissions) в Claude Code. Понимание того, как нейросеть запрашивает доступ к инструментам (создание файлов, выполнение команд). Настройка автоматических разрешений для ускорения работы через команду /permissions и файл settings.local.json.
Ключевые темы:
- •Как работают permissions в Claude Code
- •Типы инструментов и их разрешения (Bash, Edit)
- •Три опции ответа: Yes, Skip, Don't ask again
- •Режим Accept Edits On (Shift+Tab)
- •Команды websearch и webfetch
- •Папка .claude и файл settings.local.json
- •Управление разрешениями через /permissions
- •Добавление правил для Bash-команд (пример с git)
Тайм-коды видео:
Создание собственных команд
Практическое руководство по созданию кастомных команд в Claude Code. Создание директории .claude/commands, структура markdown-файла команды (description, arguments, tools). Пример создания команды /create-spec для генерации спецификаций в стиле Spec Driven Development.
Ключевые темы:
- •Зачем нужны кастомные команды
- •Хранение команд (папка .claude)
- •Создание файла команды (create-spec.md)
- •Структура команды: Frontmatter (Description)
- •Spec Driven Development: подход к разработке
- •Аргументы в командах ($1, $2...)
- •Pre-authorized tools: прописываем разрешения заранее
- •Создание шаблона для спецификации (template.md)
- •Использование референсов (Figma) в командах
Тайм-коды видео:
Разработка через спецификации и Git
Демонстрация полного цикла разработки: создание спецификации с помощью кастомной команды, проверка изменений, и использование Git для фиксации версий. Использование команды /rewind как аналога git reset для отката изменений.
Ключевые темы:
- •Основы Git: add, commit, push (кратко)
- •Команда git add и git commit
- •Откат изменений: git reset vs /rewind
- •Изменение спецификации вручную и git status
- •Переключение в Bash Mode (!)
- •Ручной коммит изменений спецификации
- •Запуск кастомной команды /create-spec
- •Fetching URL для анализа структуры (Trello landing)
- •Генерация спецификации на основе шаблона и референса
Тайм-коды видео:
Обновление контекста и CLAUDE.md
Важность переинициализации проекта после внесения значимых изменений. Как обновлять файл CLAUDE.md, чтобы нейросеть всегда имела актуальное представление о структуре и компонентах проекта, экономя время и токены.
Ключевые темы:
- •Когда нужно обновлять CLAUDE.md
- •Переключение модели на Sonnet для экономии токенов
- •Повторный запуск /init
- •Сравнение старого и нового CLAUDE.md
- •Влияние актуального контекста на качество работы нейросети
Тайм-коды видео:
MCP-серверы: теория и Context
Глубокое погружение в Model Context Protocol (MCP). Что это такое, зачем нужно и как позволяет нейросети взаимодействовать с внешним миром (файловой системой, API, базами данных). Установка MCP-сервера Context (Context 7) для доступа к актуальной документации библиотек (NextJS, Shadcn UI и др.). Разбор скоупов (Local, Project, User).
Ключевые темы:
- •Что такое MCP-сервер (Model Context Protocol)
- •Как MCP связывает нейросеть с внешними системами
- •Context (Context 7) — сервер с документациями
- •Процесс установки MCP-сервера в Claude Code
- •Понятие Scope (Local, Project, User)
- •Получение API Key для Context
- •Проверка установки сервера
Тайм-коды видео:
Интеграция с Figma через MCP
Подключение MCP-сервера для работы с Figma (Framelink/Figma MCP). Это позволяет нейросети «видеть» структуру макетов, слоев и свойств из Figma напрямую, минуя скриншоты. Генерация Personal Access Token в Figma и настройка интеграции.
Ключевые темы:
- •Зачем нужен Figma MCP (генерация кода из дизайна)
- •Выбор и установка MCP-сервера (Framelink)
- •Разница между локальным и удаленным (Remote) запуском
- •Получение Personal Access Token в Figma
- •Команда /mcp: проверка подключенных серверов
- •Инструменты сервера: get Figma Data, Download Images
Тайм-коды видео:
Создание Dashboard с помощью MCP
Практическое применение MCP-серверов. Создание страницы Dashboard на Next.js по макету из Figma. Использование Figma MCP для анализа дизайна и Context/Shadcn MCP для генерации правильного кода компонентов. Полный цикл: Промт -> План (Spec) -> Имплементация -> Проверка.
Ключевые темы:
- •Обзор задачи: создание Dashboard
- •Подготовка макета в Figma (Shadcn style)
- •Копирование ссылки на фрейм
- •Составление промта с Figma MCP и Shadcn MCP
- •Анализ макета нейросетью через MCP
- •Генерация и утверждение плана (Implementation Plan)
- •Имплементация кода (режим принятия изменений)
- •Демонстрация результата в браузере
Тайм-коды видео:
Скиллы (Skills) vs Команды (Commands)
В чем разница между командами и скиллами? Скиллы как расширенная версия команд с поддержкой скриптов и данных. Автоматическое попадание описания скиллов в контекст (Auto-discovery). Установка готового скилла «UI UX Pro Max» для улучшения дизайна. Структура папки .claude/skills.
Ключевые темы:
- •Экосистема: Команды, Скиллы, Плагины, Агенты
- •Почему команда /create-spec лежит в /skills
- •Структура скилла: skill.md, скрипты, данные
- •Главное отличие: нейросеть сама решает, когда вызвать скилл
- •Ручное создание структуры скилла
- •Пример скилла: UI UX Pro Max (правила дизайна)
- •Глобальная установка скилла
Тайм-коды видео:
Субагенты (Sub-agents)
Что такое субагенты и чем они отличаются от линейного выполнения команд. Итеративный подход к решению задач: агент сам проверяет результат и переделывает, если нужно. Создание кастомного агента «Accessibility Checker» для проверки доступности интерфейсов. Настройка инструментов и модели для агента.
Ключевые темы:
- •Введение в субагенты
- •Итеративность: главное отличие агента от команды
- •Встроенные агенты: Planning, Explore, Bash
- •Создание своего агента через /agents
- •Пример: агент для проверки Accessibility (доступности)
- •Настройка инструментов (Tools) и модели (Opus, Sonnet)
- •Скоуп агента (Project vs User)
Тайм-коды видео:
Плагины (Plugins) и Supabase
Плагины в Claude Code — это «коробка», объединяющая команды, скиллы, MCP-серверы и агентов. Установка плагина Supabase из официального маркетплейса. Настройка интеграции с базой данных Supabase через плагин.
Ключевые темы:
- •Плагины — «главный босс» в Claude Code
- •Из чего состоит плагин (Commands, Skills, MCP, Agents)
- •Маркетплейсы плагинов (Official & Community)
- •Установка Supabase Plugin
- •Создание и привязка проекта Supabase через Claude
Тайм-коды видео:
Аутентификация и БД с Supabase
Практическое внедрение базы данных и аутентификации. Использование Supabase Plugin для планирования архитектуры БД (Таблицы: Profiles, Boards, Lists, Cards) и настройки Auth (Sign Up, Log In). Генерация SQL-схем и RLS-политик с помощью нейросети. Проверка регистрации пользователей.
Ключевые темы:
- •Планирование архитектуры БД через Supabase Plugin
- •Анализ спецификации: таблицы и RLS (Row Level Security)
- •Таблицы: Profiles, Boards, Lists, Cards
- •Настройка Auth (Sign Up, Log In)
- •Внедрение изменений (создание таблиц)
- •Проверка схемы в Supabase Dashboard
- •Проверка регистрации и создания пользователя
Тайм-коды видео:
Из чего состоит Pro-сообщество
Огромное количество материалов доступно сразу при вступлении в сообщество. Ещё больше материалов будут выходить по мере готовности.
Материалы сообщества, доступные
уже сегодня
Откройте для себя всю базу знаний, собранную участниками и экспертами сообщества. Все материалы доступны после покупки доступа.
Присоединяйся к Pro-сообществу сегодня
- ✅ Доступ ко всем текущим и будущим материалам
- ✅ Уникальный мастер-класс по N8N для новичков
- ✅ Уникальный мастер-класс по Claude Code для новичков
- ✅ Регулярно пополняющийся материал про ИИ
- ✅ Приватное сообщество
- ✅ Шаблоны и ресурсы для ИИ-агентов
- 🎁 БОНУС — Эксклюзивные знания про ИИ-агентов
- 🎁 БОНУС — Эксклюзивный нетворкинг