106.9K+Скачать
Перейти к руководству
Component Canvasавтор ibelick

Component Canvas Навык.

Изучайте реальные UI-компоненты и варианты на холсте с панорамированием и масштабированием.

  • Варианты компонентов
  • Сравнение
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · component-canvasSKILL.md
Задача Изучайте реальные UI-компоненты и варианты на холсте с панорамированием и масштабированием. Результаты Изолированный маршрут или точка входа холста с запрошенными компонентами. Перед началом Холст не должен менять исходный код, хуки или стили компонента ради работы предпросмотра.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Изучайте реальные UI-компоненты и варианты на холсте с панорамированием и масштабированием

Создайте изолированный холст для существующих компонентов, сравнивайте поддерживаемые варианты, сохраняя штатное поведение клавиатуры, порталов и ввода.

Процесс на основе источникаНе тест выполнения

Принцип работы

Component Canvas создаёт полноэкранную среду проверки вокруг компонентов, уже существующих в проекте. Поддерживаемые варианты и полезные состояния сгруппированы для быстрого сравнения, после которого дизайнер может взаимодействовать с настоящими элементами управления. Источник сохраняет независимость реализации компонента от холста.

Процесс точно определяет смысл сравнения. При сравнении размеров текст, стили и данные остаются постоянными; при сравнении стиля меняется только стиль. Он также сохраняет штатные порталы, фокус и вложенную прокрутку, поэтому полезный предпросмотр должен выдерживать больше, чем снимок состояния по умолчанию.

Ожидаемые результаты

  • Изолированный маршрут или точка входа холста с запрошенными компонентами.
  • Именованные группы вариантов с перечнем покрытия и объяснением пропусков.
  • Отчёт об изменённых файлах, проведённых проверках, решениях и непроверенном поведении.
Смотреть пример задания

От задания до проверки

  1. 01
    Подключите один безопасный пример

    Прочитайте публичные API компонентов и правила проекта. До подключения одного компонента используйте тестовые данные, моки или существующие обратные вызовы, чтобы исключить реальные записи.

  2. 02
    Создайте сравнимые группы

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

  3. 03
    Проверьте холст вокруг компонентов

    Проверьте панорамирование, масштабирование, вписывание и клавиатурную навигацию вместе с вложенной прокруткой и штатными порталами. Сохраняйте только камеру и убедитесь, что сброс не меняет состояние предпросмотра.

02 Когда использовать

Когда использовать

Холст не должен менять исходный код, хуки или стили компонента ради работы предпросмотра.

Хорошо подходит

  • Проверка вариантовСравнивайте кнопки, поля и другие существующие компоненты через их реальные публичные API.
  • Ревью компонентовДайте дизайнерам место для проверки поддерживаемых состояний без изменения продакшен-реализации.

Ограничения

  • Компоненты только для чтенияХолст не должен менять исходный код, хуки или стили компонента ради работы предпросмотра.
  • Ограниченная рабочая средаГруппы нельзя перетаскивать; у холста нет истории редактирования, отмены и повтора.
  • Безопасные тестовые данныеЖивой пример исключают, если нельзя безопасно изолировать продакшен-вызовы и записи.

Что подготовить

  • Набор компонентовНазовите включаемые компоненты и публичные варианты.
  • Подготовка тестовых примеровПредоставьте безопасные данные, провайдеры и обратные вызовы для интерактивных примеров.
  • Правила проектаИспользуйте существующие маршруты, API тем, зависимости и контроль доступа.

03 Важные решения

Важные решения

  1. Реальное поведение

    Примеры реагируют на штатное взаимодействие указателем и клавиатурой.

  2. Честные сравнения

    Постоянство остальных свойств показывает, что именно меняет вариант.

  3. Изолированная реализация

    Логика камеры и размещения отделена от исходного кода компонента.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Назовите включаемые компоненты и публичные варианты.

Исходный файл в репозитории
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй component-canvas для проверки существующих Button, Select и Dialog. Прочитай их публичные API и покажи поддерживаемые именованные варианты на тестовых данных. Сравнивай по одному свойству, сохраняя подписи и прочие настройки. Не меняй исходный код компонентов и используй текущий провайдер темы. Начни с одного безопасного примера, затем добавь остальные группы. Проверь клавиатурный ввод, фокус, вложенную прокрутку и размещение порталов при разных масштабах. Укажи пропущенные случаи и проверки, требующие недоступных устройств.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Изменений в исходном коде компонентов нет, а тестовые примеры не выполняют реальных записей.
  • Выравнивание порталов, фокус и штатный ввод остаются пригодными при масштабировании.
  • Положение камеры восстанавливается после перезагрузки; сброс сохраняет текущее состояние предпросмотра. Восстановление черновиков после перезагрузки не гарантируется; сбои хранилища обрабатываются безопасно.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
ibelick
Репозиторий
ibelick/ui-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 4907a526b079
Редакционное резюме источника
Изучайте реальные UI-компоненты и варианты на холсте с панорамированием и масштабированием.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Можно перетаскивать группы компонентов?

Источник явно фиксирует группы. Панорамирование и масштабирование перемещают камеру.

Он придумывает отсутствующие варианты?

Нет. Он читает публичный API и перечисляет пропуски, а не меняет компонент для имитации поддержки.

Что сохраняется после перезагрузки?

Предписанное сохранение касается камеры. Черновики предпросмотра не обязаны переживать перезагрузку без отдельного запроса.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md