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

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

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

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

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

Агент:

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

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

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

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

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

Что такое 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 ^[4] или 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".
---

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 — распределённая база данных

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

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

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

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

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

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

• Систему ролей: deny → read → post → pull → rule

• Полные 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 ^[6] для быстрого подключения.

На практике

До скилла

Я:    Сделай компонент комментария для $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 ^[7] - сервис для создания форм. Он глючный)
Репозиторий ^[8]

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