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