Репозиторий навыков Claude Code для создания тем и блочных компонентов Discourse:
Что включено
Навык создания тем (Theme Authoring Skill) — охватывает полный спектр разработки тем для Discourse: создание каркаса с помощью CLI discourse_theme, архитектура SCSS, библиотека viewports, локализация, настройки, модификаторы, преобразователи значений, иконки и CSS-переменные. Отдельно включены подробные справочные файлы для иконок, переменных и преобразователей, которые можно загружать по требованию. SKILL.md
Навык создания блоков (Block Authoring Skill) — охватывает сторону тем в API блоков: написание компонентов блоков с помощью декоратора @block, определение схем аргументов, рендеринг блоков в доступные основные слоты (outlets), условия, контейнерные блоки и группировку макетов, а также интеграцию переводов тем и настроек в аргументы блоков. SKILL.md
Пример темы — рабочая тема с кастомной главной страницей, созданной с использованием блоков, демонстрирующая реальные паттерны для слотов, условий и композиции макетов.
О API блоков
API блоков — это новый фреймворк Discourse для создания модульных, композируемых UI-компонентов в темах и плагинах. Блоки — это компоненты Glimmer, зарегистрированные в именованные слоты (outlets), такие как homepage-blocks, hero-blocks или sidebar-discovery. Они могут отображаться условно в зависимости от маршрута, пользователя, viewports, настроек сайта или доступности плагинов.
Ключевое преимущество системы заключается в том, что блоки имеют узкую, сфокусированную область применения и единые паттерны. Это делает их идеально подходящими для разработки с помощью ИИ: модель с навыком работы с блоками может создать каркас рабочего компонента блока, зарегистрировать его в слоте и настроить условия за один проход.
Пример темы в этом репозитории демонстрирует главную страницу, которая адаптируется в зависимости от доступных плагинов и контента. Вот как выглядит базовая главная страница с блоком героя и списком рекомендуемых тем:
При выполнении дополнительных условий (настроен рекомендуемый тег, активен плагин Discourse Events и доступен плагин Discourse Leaderboard) дополнительные блоки условно рендерятся в макет:
Блоки не ограничиваются главной страницей. Пример темы также использует слот sidebar-blocks для добавления ссылки Home, слот sidebar-discovery для добавления содержимого боковой панели, специфичного для категорий, и блок category-banner в верхней части страниц категорий:
Инспектор блоков в DevTools отображает метки слотов и идентификаторы блоков, наложенные на страницу. Это упрощает понимание структуры макета и отладку того, где и что рендерится:
Использование с MCP платформами дизайна
Навыки отлично сочетаются с MCP платформами дизайна (такими как Penpot или Figma MCP). При подключении одной из них Claude может читать спецификации компонентов и дизайн-токены напрямую из ваших дизайн-файлов и реализовывать их, следуя конвенциям навыка. Это обеспечивает более тесную связь между дизайном и кодом, особенно при работе со структурированной дизайн-системой.
Форк и настройка
Некоторые конвенции в навыках больше относятся к предпочтениям, чем к стандартам, например, архитектура папок SCSS. Вы можете сделать форк репозитория и адаптировать навыки под свой собственный рабочий процесс и конвенции.
Делитесь тем, что создали
Попробуйте и расскажите нам, как всё прошло! Мы будем рады узнать, как вы используете эти навыки, что создали с их помощью и где они не справляются. Отзывы, исправления и форки всегда приветствуются.