HTML-артефакты: когда default, а когда специализированный — Блог
$ cat html-artifacts-default-ili-specializirovannyi.md

HTML-артефакты: когда default, а когда специализированный

🤖 AI и машинное обучение
#Skills #Frontend #HTML #Design #Astro #Tailwind #Plotly

HTML-артефакты: когда default, а когда специализированный

Самая большая категория в коллекции — больше 40 скиллов генерируют HTML-артефакты разного типа: дашборды, runbook’и, invoice’ы, decks, motion-видео, mobile frames. На поверхности — «всё про HTML, можно унифицировать». На практике — несколько разных архитектур и лишь пара реальных кандидатов на merge.

Контекст: 7 категорий HTML-артефактов

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

Категория A: Single-page HTML-прототипы (20 шт)

Вертикальные шаблоны для конкретных бизнес-документов и маркетинговых страниц:

  • Контент-маркетинг: web-prototype, saas-landing, pricing-page, docs-page, email-marketing, social-carousel
  • Бизнес-документы: eng-runbook, hr-onboarding, invoice, meeting-notes, pm-spec, team-okrs, weekly-update
  • Визуальные/специализированные: dashboard, dating-web, kanban-board, magazine-poster, wireframe-sketch, digital-eguide, gamified-app

Все 20 выдают один self-contained HTML с inline style, обёрткой artifact, маркерами data-od-id. Идентичный workflow (read DESIGN.md → layout list → write → self-check → emit). Различаются только layout-блоками.

Категория B: Mobile frames (3 шт)

  • mobile-app — single iPhone 15 Pro frame, 6 archetypes (Feed/Detail/Onboarding/Profile/Checkout/Focus)
  • mobile-onboarding — 3 phone frames side-by-side (splash/value/sign-in), ~50 строк SKILL.md
  • gamified-app — 3 phone frames для gamified-домена (cover/quests/detail)

Категория C: Slide decks (4 шт)

  • simple-deck — общий horizontal-swipe deck, 8 layouts, DESIGN.md-bound
  • replit-deck — 8 frozen token systems (helix/holm/vance/bevel/world-dark/world-mint/atlas/bluehouse)
  • magazine-web-ppt — magazine-стиль с WebGL fluid background, default_for: deck
  • weekly-update — специализация на weekly cadence (8 слайдов: cover/headline/shipped/in flight/blocked/metrics/asks/closing)

Категория D: Video / animation (4 шт)

  • hyperframes — production framework с GSAP, scene transitions, 9 reference docs
  • motion-frames — single CSS-keyframes frame (ring + globe + ticker)
  • sprite-animation — pixel-art + Japanese type (vertical video)
  • video-shortform — диспетчер к upstream video моделям (Seedance/Kling/Veo/Sora), НЕ HTML

Категория E: Media generation (2 шт)

  • image-poster — single image (PNG/JPEG)
  • audio-jingle — audio (MP3/WAV)

Категория F: Meta-design (6 шт)

  • ui-ux-pro-max — Python CLI + CSV knowledge base (161 палитры, 99 UX-guidelines)
  • frontend-design — aesthetic guide, production-grade HTML/CSS
  • design-brief — parse I-Lang design brief в DESIGN.md
  • design-an-interface — software API design (НЕ UI)
  • tweaks — side panel с live controls
  • critique — 5-dimension design review (0-10 scoring)

Категория G: Framework docs (3 шт)

  • vite, vitepress, opentui — документация для build-tools, не артефакты

Уникальные знания в каждой категории

Категория A: Plotly dark theme + DESIGN.md-конвенция

Все 20 скиллов в категории A разделяют общий визуальный язык:

  • Plotly dark theme: не просто template="plotly_dark", а полная палитра (фон #0E1117, текст #FAFAFA, accent #636EFA), кастомные шрифты (Inter для UI, JetBrains Mono для данных)
  • DESIGN.md dependency: каждый скилл читает DESIGN.md из проекта, чтобы взять color/typography/layout tokens. Без DESIGN.md — фоллбек на свой дефолт
  • data-od-id маркеры: каждый интерактивный элемент получает атрибут data-od-id="SKILL:ELEMENT" для двухсторонней связи с хост-приложением
  • Self-check before emit: перед emit’ом артефакта скилл делает проверку (нет битых ссылок, шрифты загружаются, нет inline JS, размер < 500KB)

Это сильная конвенция, но не фунциональное пересечение — каждый скилл реализует свой layout.

Категория B: iPhone 15 Pro visual accuracy

Mobile-фреймы должны быть pixel-accurate:

  • Status bar: 9:41, full battery, signal, WiFi (правильный SVG)
  • Dynamic Island: точные размеры и скругления
  • Bottom tab bar: blur effect, правильные иконки
  • Notch shadow, bezel reflection

Без этих деталей фрейм выглядит фейково, и mobile-app skill это явно контролирует.

Категория C: Horizontal-swipe nav

Все 4 deck-скилла используют один и тот же скрипт навигации (5-rule iframe nav из simple-deck assets/template.html):

  • Arrow keys для prev/next
  • PageUp/PageDown для jump
  • Click-to-jump
  • Scroll-snap
  • Progress indicator

replit-deck дополнительно предлагает 8 frozen тем — каждая со своей палитрой, типографикой, accent. Это не просто скин, а полная дизайн-система: helix (helix-inspired), holm (Holm — minimal), vance (vintage), bevel (3D), world-dark/world-mint (Bloomberg-стиль), atlas (cartographic), bluehouse (warm minimal).

Категория D: hyperframes как production framework

hyperframes — единственный скилл в этой категории, который является настоящим production-фреймворком, а не шаблоном:

  • 9 reference docs: captions, tts, audio-reactive, css-patterns, transitions, typography, motion-principles, visual-styles, scene-detection
  • GSAP-driven: не CSS-keyframes, а full timeline engine с возможностью scene transitions
  • Sub-composition support: одна композиция может вкладывать другие
  • Scene-detection валидатор: проверяет, что сцены не «прыгают», transitions плавные, audio-sync корректен

motion-frames и sprite-animation — это одиночные CSS-keyframes файлы, single hero poster, не production framework. video-shortform — диспетчер к внешним video моделям (вообще не HTML).

Реальные кандидаты на объединение

🟡 CONDITIONAL MERGE: 6× business-docs → business-doc

eng-runbook, hr-onboarding, invoice, meeting-notes, pm-spec, team-okrs

Все 6 имеют идентичный workflow и 47-52 строки SKILL.md каждый (то есть 90% — повторяющийся boilerplate). Содержательные различия — это layout-блоки:

  • eng-runbook: alerts table, on-call rotation, severity tier, code blocks
  • hr-onboarding: 30/60/90 milestones, “you’re set when…” checklist
  • invoice: line items + tax breakdown + print stylesheet
  • meeting-notes: agenda checklist + decisions + action items
  • pm-spec: status pill, user stories, scope milestones
  • team-okrs: progress bars, owner avatars, status pills

Эти layout’ы переносятся 1:1 в ## Layout: NAME секции внутри единого business-doc SKILL.md.

Стратегия:

/business-doc runbook   <data>
/business-doc onboarding <data>
/business-doc invoice   <data>
/business-doc notes     <data>
/business-doc spec      <data>
/business-doc okrs      <data>

Общий workflow (read DESIGN.md → write → self-check → emit) описывается один раз. 6 layout-блоков ≈ по 30 строк каждый. Итого: ~180 строк + 30 строк обёртки = 210 строк, против текущих 6×50 = 300 строк.

Что выиграем: −5 скиллов, единая точка входа, проще добавить новый layout (например, business-doc sop для Standard Operating Procedure).

Что потеряем: отдельные slash-команды. Но /business-doc runbook короче и читаемее, чем /eng-runbook.

✅ KILL+POINTER: mobile-onboarding → секция в mobile-app

mobile-app уже покрывает archetype C (Onboarding). mobile-onboarding — это тот же archetype C, повторённый 3 раза side-by-side.

Стратегия:

  1. Удалить mobile-onboarding/ (50 строк, 1 файл)
  2. В mobile-app/SKILL.md добавить секцию «For 3-screen onboarding flow, use archetype C × 3 with progressive content (splash → value-prop → sign-in)»

Что выиграем: −1 скилл, −50 строк.

Что потеряем: ничего — контент тривиально воспроизводится.

Что НЕЛЬЗЯ объединять (и почему)

wireframe-sketch + что-либо из hi-fi Category A

wireframe-sketch имеет fidelity: wireframe, design_system: requires: false в frontmatter. В SKILL.md прямо сказано: «Skip the DESIGN.md if it pushes for finished UI… looseness is the brand». Это принципиально другая философия — целенаправленно сломанная эстетика, marker/pencil тон, graph-paper background, scribbled chart placeholders, hatched fills. Объединить = убить главное.

magazine-poster + любой другой

Editorial newsprint, dateline, oversized serif headline с strikethrough, two-column body, 6 numbered sections с pull-quote captions. Триггеры: «essay, manifesto, long-form poster» — нет пересечения с page-style артефактами. Это постер, а не страничка.

hyperframes + motion-frames / sprite-animation

hyperframes — production framework с GSAP, 9 reference docs, scene transitions. motion-frames — single CSS-keyframes файл, ring + globe + ticker. sprite-animation — pixel-art + Japanese type. Разные масштабы: framework → single frame → single frame. Слить = потерять 9 reference docs или раздуть SKILL.md.

design-an-interface + UI-генераторы

Это вообще другой домен: «method count, interface simplicity, general-purpose vs specialized». Это про software API design («Design It Twice»), не про UI. Стоит рядом с improve-codebase-architecture, не с дизайн-артефактами.

ui-ux-pro-max + frontend-design

ui-ux-pro-max — Python CLI + CSV-базы знаний (advisor). frontend-design — aesthetic guide для production HTML (producer). Симбиоз, не дубликат. ui-ux-pro-max выбирает design system, frontend-design реализует. Слить = раздуть 659 строк + 42 строки до неюзабельного монолита.

Umbrella-позиционирование (без слияния)

Сейчас web-prototype заявляет себя как «default for any landing / marketing / docs / SaaS page when no more specific skill matches». Это правда, но только для ~50% категории A (landing, marketing, docs index, pricing, simple SaaS). Не покрывает dashboard, kanban, runbook, onboarding plan, invoice, meeting notes, okr, e-guide, gamified, social carousel.

Рекомендация: добавить в web-prototype/SKILL.md явный conditional trigger:

## When to use a specialized skill instead

If the brief matches one of these archetypes, prefer the specialized skill:
- Dashboard / analytics → `dashboard` or `dating-web`
- Task management → `kanban-board`
- Engineering runbook → `eng-runbook` (or `business-doc runbook` after merge)
- New-hire onboarding → `hr-onboarding`
- Invoice / billing → `invoice`
- Meeting minutes → `meeting-notes`
- PRD / spec → `pm-spec`
- OKR tracker → `team-okrs`
- Editorial poster → `magazine-poster`
- Wireframe exploration → `wireframe-sketch`
- Digital e-guide → `digital-eguide`
- Gamified app → `gamified-app`
- Social media carousel → `social-carousel`

То же для simple-deck:

## When to use a specialized skill instead

- Magazine/editorial style → `magazine-web-ppt`
- Replit aesthetic (helix/holm/etc.) → `replit-deck`
- Weekly cadence → `weekly-update`

Что остаётся отдельно по дизайну

  • web-prototype, dashboard, dating-web, docs-page, email-marketing, eng-runbook, hr-onboarding, invoice, kanban-board, magazine-poster, meeting-notes, pm-spec, pricing-page, saas-landing, team-okrs, weekly-update, wireframe-sketch, digital-eguide, gamified-app, social-carousel — 19 специализированных vertical-шаблонов
  • mobile-app, gamified-app — мобильные фреймы
  • simple-deck, replit-deck, magazine-web-ppt — deck-фреймворки с разными эстетиками
  • hyperframes, motion-frames, sprite-animation — video/animation на разных уровнях
  • image-poster, audio-jingle — media-диспетчеры
  • ui-ux-pro-max, frontend-design, design-brief, design-an-interface, tweaks, critique — каждый на своём уровне абстракции

Итоги

Из 40+ скиллов кластера Frontend/HTML реально объединить можно ~6 скиллов (1 KILL+POINTER для mobile-onboarding, 5 в conditional MERGE для business-doc семейства). Это −15% в кластере, или −1.4% от всех 210 скиллов.

Главный инсайт: «всё про HTML» ≠ «всё можно объединить». Каждый скилл в категории A решает свою бизнес-задачу (runbook ≠ invoice ≠ OKR), даже если технически они генерируют похожие HTML-структуры. Слить их вслепую = потерять domain-фокус. Аккуратный merge в business-doc с явными layout-блоками сохраняет специализацию и убирает boilerplate.

Остальные 33+ скиллов занимают уникальные ниши и не подлежат объединению — ни эстетически (wireframe vs hi-fi, magazine vs page), ни функционально (advisor vs producer, framework vs single-frame).

Ссылки

← Все статьи