From UI Motion & States
Adds data-screen-label attributes to slides/screens for precise referencing in feedback (e.g., 'slide 05 Roadmap') instead of vague descriptions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-motion:screen-labelsWhen to use
Любой артефакт с >1 экраном/слайдом — slides, interactive-prototype, design-canvas.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Без меток разговор о правках выглядит так: «там, где синий блок с тремя кнопками». С метками: «слайд 05 Roadmap» — однозначно.
Без меток разговор о правках выглядит так: «там, где синий блок с тремя кнопками». С метками: «слайд 05 Roadmap» — однозначно.
На каждый «экран» (слайд, маршрут прототипа, артборд canvas) — атрибут data-screen-label:
<!-- слайды -->
<deck-stage>
<section data-screen-label="01 Title">...</section>
<section data-screen-label="02 Problem">...</section>
<section data-screen-label="03 Solution">...</section>
</deck-stage>
<!-- прототип -->
<div class="screen" data-screen-label="Login">...</div>
<div class="screen" data-screen-label="Feed">...</div>
<div class="screen" data-screen-label="Profile">...</div>
<!-- design-canvas -->
<dc-artboard data-screen-label="Hero — variant A" width="1440" height="900">
1-indexed двузначные: 01 Title, 02 Agenda, 10 Roadmap. Совпадает со счётчиком, который видит юзер (5/12).
<!-- хорошо -->
<section data-screen-label="01 Title">
<!-- плохо: 0-индексация ломает диалог -->
<section data-screen-label="00 Title">
Когда юзер говорит «исправь слайд 5» — он подразумевает 5-й слайд, никогда index 4.
Короткое имя экрана, человеческое: Login, Feed, Settings, Onboarding step 2.
<имя экрана> — <вариант>: Hero — minimal, Hero — editorial, Pricing — 3-tier.
В чате юзер: «слайд 05, измени h1 на ...» → в HTML находим [data-screen-label="05 ..."] и точечно правим.
deck_stage.js автоматически тегирует слайды — если нет ручного data-screen-label. Но ручной — лучше: говорящий, не «slide-3».
Когда юзер кликает на элемент в превью с подключённым comment-injector — в clipboard падает селектор; присутствие data-screen-label у предка делает его читаемым:
SELECTOR: section[data-screen-label="03 Solution"] h1
id="slide-1" вместо data-screen-label. ID должен быть уникальным и не привязанным к визуальному порядку — а слайды переставляются.data-screen-label="Слайд 1 — Заголовок страницы — версия 2 от 28 апреля". Короче.Если хочется не вручную:
document.querySelectorAll('deck-stage > section').forEach((s, i) => {
if (s.dataset.screenLabel) return;
const h = s.querySelector('h1, h2');
const idx = String(i + 1).padStart(2, '0');
s.dataset.screenLabel = `${idx} ${h?.textContent || 'untitled'}`;
});
Запускать при загрузке. Но лучше — вручную, label остаётся стабильным.
npx claudepluginhub jhamidun/claude-code-config-pack --plugin ui-motionProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.