Skills от Мен То: когда навыков много не бывает

Мен То — автор Aura Build, Fable и ещё нескольких инструментов, которые фронтенд-сообщество использует для прототипирования интерфейсов. Его новый репозиторий MengTo/Skills — это попытка систематизировать всё, что он узнал про работу с AI-агентами в дизайне и фронтенде. Семьсот девяносто семь звёзд, 75 навыков в четырёх категориях, лицензия MIT.

Главная идея простая: не нужно каждый раз заново объяснять агенту, как сделать хорошую посадочную страницу, написать GSAP-анимацию или подобрать стоковые картинки в правильной стилистике. Всё это уже описано один раз — и оформлено в виде переиспользуемых навыков.

Что внутри

Репозиторий устроен максимально приземлённо. Никаких сложных пакетов, никаких зависимостей. Папки и Markdown-файлы, которые агент может прочитать и выполнить.

agent-skills/
  codex/        # 10 операционных процессов
  media/        # 2 навыка про работу с изображениями
  ui/           # 1 навык про design-first prompting
  web-design/   # 62 навыка про лендинги, анимации, WebGL

Каждый навык — это папка с обязательным SKILL.md и опциональными REFERENCES.md, ARTICLE.md и assets/. В SKILL.md — frontmatter с name и description, плюс сам workflow: когда использовать, что делать в первую очередь, какие дефолты применять, каких ошибок избегать. Длинные объяснения выносятся в ARTICLE.md, ссылки — в REFERENCES.md. Эта дисциплина важна: агент читает SKILL.md и сразу понимает, что делать.

Поддержка разных агентов

Формат намеренно простой — Markdown и папки. Это работает с чем угодно:

• Codex: загрузить нужный SKILL.md перед действием. Поведение репозитория описывается в AGENTS.md. Браузерная работа в репозитории должна идти через Codex browser.
• Claude Code: подключить навык через CLAUDE.md, скопировать в настройки skills или открыть SKILL.md как рабочий контекст.
• Cursor: направить правила Cursor или контекст чата на нужную папку навыка. Переиспользуемые сниппеты, ограничения и дефолты должны легко вставляться.
• Другие агенты: тот же контракт — прочитать самый узкий подходящий навык, затем следовать его шагам и ссылкам.

Это сильно отличает подход от того же mattpocock/skills, где навыки нацелены в основном на процессы разработки (TDD, диагностика, гриллинг). У Мен То фокус жёстко на визуальный результат: как сделать так, чтобы лендинг выглядел дорого, а анимация не тормозила на телефоне.

Философия

В README выделены четыре принципа, и они хорошо объясняют, почему этот набор навыков работает именно как набор, а не как один большой промпт.

Промпты — это активы. Если что-то получилось хорошо один раз, это должно быть переиспользуемым. Хранить промпты как файлы, версионировать их, собирать библиотеки и stylecards. Согласен — самый частый грех при работе с AI это попытка каждый раз переизобрести промпт с нуля.

Спецификации бьют вайбы. Самый быстрый путь к стабильному результату — чёткие ограничения, чёткая иерархия, итерации «меняй одну-две вещи за раз». Не надо скармливать агенту абстрактное «сделай красиво» — нужно «вот палитра, вот шрифт, вот сетка, вот референс».

Референсы бьют абзацы. Скриншоты и примеры передают шрифты, интервалы, цвета, ритм раскладки, стиль иконок. Словами это всё описывается мучительно долго, а скриншотом — мгновенно.

Навыки — это операционные процедуры. Хороший навык говорит агенту, когда его использовать, что делать в первую очередь, какие дефолты применять и каких ошибок избегать. Никакой воды, только инструкции.

Главный флагманский процесс

Если открыть репозиторий и прочитать только один раздел, пусть это будет codex/. Там четыре связанных навыка, которые вместе составляют полный цикл «видео или сайт → готовый промпт для пересоздания»:

1. Video to Super Prompt — превращает запись экрана с дизайном, лендингом или анимацией в детальный промпт, по которому Fable 5 может сгенерировать HTML с одной попытки.
2. HTML to Interaction Prompts — берёт готовую HTML-страницу (например, из Aura Build) и разбирает её на переиспользуемые промпты: одна секция, одна анимация, одна кнопка, одно hover-состояние, один WebGL-эффект.
3. Stitched Full Page Capture — снимает всю посадочную страницу, а не только hero-секцию. Агент получает полностраничный референс со структурой, ритмом и визуальной иерархией.
4. Daily UI Inspiration — связывает всё в петлю: браузинг → снимки → разбор референсов → генерация промптов. Сильные лендинги превращаются в детальные наборы промптов.

Вместе они закрывают самый частый сценарий: «увидел крутой лендинг, хочу такой же, но свой». Вместо того чтобы пытаться объяснить агенту словами, что именно понравилось, — даёте ему видео или URL, и он сам разбирает, что там работает.

Web design: 62 навыка на все случаи

Самая большая категория. Здесь собран набор инструментов, который покрывает почти все задачи современного фронтенд-разработчика.

Конверсионные и имплементационные — landing-page, pricing-page, tailwindcss, animation-systems, webgl-landing-steering. Базовый набор для сборки маркетинговых страниц.

Motion и scroll — animation-on-scroll, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, gsap, gsap-scrolltrigger-storytelling, marquee-loop, masked-reveal, staggered-word-reveal. Если вы делаете кинематографичный скролл-эффект, здесь уже есть навык под него.

WebGL, canvas, 3D — background-grid-webgl, cobejs, globe-gl, globe-particles, matterjs, threejs, unicorn-studio, vantajs, webgl-3d-object, webgl-laser. Десять навыков покрывают почти все популярные 3D-библиотеки.

CSS-эффекты — beautiful-shadows, company-logos, container-lines, corner-diagonals, corner-lasers, css-alpha-masking, css-border-gradient, gooey-blob-system, number-details, progressive-blur, solar-duotone-bold. Мелочи, которые делают интерфейс запоминающимся.

Лейаут-системы — agency-grid-layout-minimal, book-serif-index, editorial-tech, framed-grid-layout, image-first-grid-layout, nested-container-frames, split-layout-technical, technical-wireframe-info-layout. Готовые рецепты раскладок под разные стилистики.

Визуальные стили — это самая любопытная часть. Двадцать два навыка в духе blue-cloudy-clean-modern, dark-glass-clean-layout, funky-purple-container-tech, mesh-gradient-dark-blue-clean, skeuomorphic-ui, tech-green-dark-mode-modern. По сути это stylecards: «хочу вот такое настроение — открой соответствующий навык, и агент уже знает палитру, типографику и характерные приёмы».

Идея в том, что не нужно каждый раз описывать «сделай в стиле glassmorphism, но с зелёным акцентом и грубыми границами». Навык glass-dark-ui + framed-tech-dark-border-gradient даст агенту весь набор согласованных дефолтов.

UI prompting: design-first подход

Один навык, но важный — design-first-ui-prompting. Шаблон промпта строится по цепочке: цель → формат → раскладка → типографика → цвет → ограничения. Рабочий процесс «варианты лучше, чем reroll» — генерируете 3-4 варианта, выбираете лучший, дорабатываете. Плюс negative prompts как guardrails, и двухпроходная типографика: сначала сгенерировать раскладку, потом отдельно выверить шрифты в Figma.

Это ровно та дисциплина, которой часто не хватает. Без неё агент делает 30 попыток в одном направлении, и все одинаково посредственные.

Как добавить свой навык

В README есть короткий пятишаговый workflow:

1. Создать папку agent-skills/<category>/<skill-name>/.
2. Добавить SKILL.md с frontmatter (name, description) и контентом: когда использовать, workflow, pitfalls, recipes, что уточнять.
3. По желанию — REFERENCES.md со ссылками.
4. Проверить контракт: чёткий триггер, конкретный workflow, переиспользуемые сниппеты или команды, pitfalls и acceptance checks, никаких секретов или приватных данных клиентов.
5. Коммит — маленькие коммиты по одному навыку, понятное сообщение.

Стиль написания задан прямо в README: «пишите как Мен То — скиммируемо, практично, уверенно. Предпочитайте ограничения и дефолты. Избегайте воды. Длинные объяснения — в ARTICLE.md, ссылки — в REFERENCES.md».

Кому это пригодится

Если вы делаете лендинги, прототипы, маркетинговые страницы, motion-эффекты или 3D-демо — это, пожалуй, самый полный набор навыков, который сейчас есть в открытом доступе. 75 переиспользуемых кубиков, которые можно комбинировать как угодно.

Если вы больше про серверный код, инфраструктуру или чистую инженерную дисциплину — скорее смотрите на mattpocock/skills или obra/superpowers. Там фокус на процессе разработки, а не на визуальном результате.

Лицензия MIT, так что можно спокойно копировать навыки в свой репозиторий и адаптировать под свои задачи. Семьсот с лишним звёзд за полгода существования — хороший знак, что проект живой и будет развиваться.