javascript

Как я запилил Skill для $mol, чтобы Claude Code перестал писать на React

  • воскресенье, 22 февраля 2026 г. в 00:00:06
https://habr.com/ru/articles/1002192/

Привет, Хабр! Последние несколько месяцев я пишу на фреймворке $mol. $mol очень крутая штука, но для иишки слишком мало информации в датасетах.

Поставить скил:

npx skills add b-on-g/mol_skill -y -g

Агент постоянно что то да путал, и даже не смотря на типизацию в моле ( даже в css ) это всё очень долго кругами ходило.

Агент:

  • Путает синтаксис биндингов (<= vs <=>)

  • Не знает, что $mol_view по умолчанию делает display: flex — и весь контент разъезжается горизонтально

  • Пишет стили в .css файл вместо типизированного css.ts ( а если пишет то постоянно ошибается )

  • Понятия не имеет про @$mol_mem и реактивные свойства

Каждый раз приходилось объяснять одно и то же, надоедало но что поделать, я сделал папку с парой мд файлов и скармливах их агенту каждый раз. А потом друг скинул skills.sh

Что такое Skills

Skill — это, точно такая же папка-репозиторий с файлами, которая и у меня и была, но поделиться с другими ей проще. Аналогичным образом можно создать свой скил

Структура скилла:

~/.claude/skills/mol/
├── SKILL.md                          # Точка входа — workflow + триггеры
├── agents/
│   └── openai.yaml                   # Интерфейс для других агентов
└── references/
    ├── MOL_QUICK_START.md            # Ядро: view.tree, компоненты, стили
    ├── MOL_GIPER_BAZA_GUIDE.md       # Распределённая CRDT-база
    ├── GIPER_BAZA_ADMIN_GUIDE.md     # Паттерны админок
    └── TAURI_SETUP.md                # Десктоп через Tauri

Агент не читает все справочники, а берет только то что нужно для задачи

## 2) Pick the right reference

- Use `references/MOL_QUICK_START.md` for core $mol/MAM structure,
  view.tree syntax, components, best practices.
- Use `references/MOL_GIPER_BAZA_GUIDE.md` for data modeling,
  auth/roles, CRUD, sync.
- Use `references/GIPER_BAZA_ADMIN_GUIDE.md` for admin panels,
  roles, UI patterns.
- Use `references/TAURI_SETUP.md` for desktop setup, build, CI.

Сначала читает SKILL.md или yaml, понимает, какой справочник нужен, и подгружает его.

Анатомия SKILL.md -- вы это уже читали

Yaml файл с роутингом + воркфлоу

---
name: mol
description: >
  Build or modify apps with $mol/MAM and related stack.
  Triggers include queries like "как на моле сделать …",
  "$mol view.tree", "MAM структура",
  "Giper Baza CRUD/roles/auth", "Tauri + $mol".
---

LLM аген сам активирует скилл по ключевым словам в запросе. Например при запросах "как на моле сделать список" или "$mol view.tree layout". Я обычно пишу - "подтяни скил мола ... задача..."

Далее алгоритм:

  1. Выбери справочник

  2. Реализуй задачу

  3. Giper Baza — если нужен бэкенд

  4. Валидация — проверяет web.audit.js после билда

  5. Tauri — если нужен десктоп

MOL_QUICK_START.md — тут вся база

Содержит:

Структуру проекта — как создать MAM-модуль, что такое index.html, meta.tree, как связаны файлы:

my/app/
├── index.html          # Точка входа
├── app.view.tree       # Декларативная вёрстка
├── app.view.ts         # Логика
├── app.view.css.ts     # Типизированные стили
├── app.test.ts         # Тесты
└── app.meta.tree       # Зависимости

Синтаксис view.tree — DSL, аналог html, но сильно удобнее и практичнее. Пример:

$club_card $mol_view - div по умолчанию
    post_data null
    sub / - то что суём в див
        <= Image $mol_image
            uri <= cover_image \ - обратный слеш всегда строка
        <= Content $mol_view -- можно вкладывать до бесконечности
            sub /
                <= Title $mol_paragraph
                    title <= post_title \
                <= Excerpt $mol_paragraph
                    title <= excerpt_text \
                <= Footer $mol_view
                    sub /
                        <= Author $mol_paragraph
                            title <= author_name \
                        <= Comments $mol_paragraph
                            title <= comments_label \

Правила биндингов:

  • <= — свойство только для чтения (parent → child)

  • <=> — двусторонний биндинг (parent ↔ child)

  • / — список дочерних элементов

  • * — словарь (key-value)

  • null — null

Встроенные компоненты$mol_button, $mol_search, $mol_text, $mol_page, $mol_list и десятки других.

Так же там я записываю частые проблемы, без них агент раз за разом наступает на одни и те же грабли.

MOL_GIPER_BAZA_GUIDE.md — распределённая база данных

Гипер База - это CRDT-база данных, встроенная в $mol. Данные синхронизируются между клиентами сами, конфликты разрешаются автоматически.

End to end шифрование by default. Безопасно доступно надежно.

Файл описывает:

  • Иерархию данных: Glob → Land → Node → Unit

  • Типы полей: atom_text, atom_bint, atom_real, atom_time, list_link_to, dict_to

  • Криптографическую авторизацию

  • Систему ролей: denyreadpostpullrule

  • Полные CRUD-паттерны

  • Как работает prof of work (Pow)

Пример модели/api:

class $my_task extends $giper_baza_entity.with({
    title: $giper_baza_atom_text,
    done: $giper_baza_atom_bint,
    tags: $giper_baza_list_str,
}) {}

GIPER_BAZA_ADMIN_GUIDE.md — паттерны админок

Практическое руководство: как построить админку с ролями, CRUD для пользователей и контента, валидацией и экспортом данных. Включает готовые паттерны для:

  • Иерархии прав (is_super_admin()is_admin()is_editor()is_viewer())

  • Защищённых действий (protected_action wrapper)

  • UI-компонентов админки (списки, формы, карточки редактирования)

TAURI_SETUP.md — все платформы

Как запаковать $mol-приложение в нативное десктопное через Tauri: для сборки под macOS/Windows/Linux/Andriod/IOS. ( привет Dart сообществу :) )

Тут я так же сделал github workflow для быстрого подключения.

На практике

До скилла

Я:    Сделай компонент комментария для $mol

Claude: Конечно! Вот компонент комментария:
        $clubСomment $molView
            sub | <=>> Text $mol_view sub /// <===> text \

Я:    Куча ошибок, изучи view.tree там то там то

Claude: Извините! Вот:
        $club_comment $mol_view
            sub / <= Text $mol_view sub / <= text \
            (кривой синтаксис, нет аватара, стили в .css)

Я:    *тратит 40 минут на правки*

После скилла

Я:    Сделай компонент комментария с аватаром, автором,
      датой и текстом

Claude: [читает SKILL.md → подгружает MOL_QUICK_START.md]

        club/comment/comment.view.tree:
        $club_comment $mol_view
            comment null
            sub /
                <= Side $mol_view
                    sub /
                        <= Avatar_link $mol_link
                            arg *
                                user <= author_slug \
                            sub /
                                <= Avatar $mol_image
                                    uri <= avatar_uri \
                <= Main $mol_view
                    sub /
                        <= Header $mol_view
                            sub /
                                <= Author $mol_link ...
                                <= Date $mol_paragraph ...
                        <= Body $mol_text
                            text <= comment_text \

        club/comment/comment.view.ts:
        (корректные @$mol_mem свойства, парсинг данных)

        club/comment/comment.view.css.ts:
        ($mol_style_define с правильными токенами темы)

Так оно хоть как то работает)

Результат

Теперь я пишу приложения чуть быстрее, они всё еще с багами, их всё еще нужно дорабатывать. Например вот вчера накидал formigo - сервис для создания форм. Он глючный)
Репозиторий


Технологии: Claude Code, $mol, MAM, Giper Baza, Tauri