Навыки ui-visual-validator

📦

ui-visual-validator

Name: ui-visual-validator
Author: sickn33

Ревизия содержимого r1 Безопасно ⚙️ Внешние команды

Проверка изменений UI с помощью визуальных доказательств

Изменения UI могут пройти code review, но при этом не достичь визуальных, адаптивных или accessibility-целей. Этот skill помогает проводить строгую проверку на основе скриншотов с измеримыми выводами и рекомендациями по исправлению.

Поддерживает: Claude Codex Code(CC)

🥉 78 Бронза

Установить с помощью моего Агента

Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.

Запрос агента

Review the Skillstore skill "ui-visual-validator" from https://skillstore.io/skills/sickn33-ui-visual-validator.md and its manifest at https://skillstore.io/api/skills/sickn33-ui-visual-validator/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.

Ресурсы для AI-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

Markdown-детали GET /skills/sickn33-ui-visual-validator.md Подписанный manifest GET /api/skills/sickn33-ui-visual-validator/manifest Подписанный lockfile GET /api/skills/sickn33-ui-visual-validator/lockfile

Протестировать

Использование «ui-visual-validator». Скриншот до и после редизайна кнопки checkout.

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

По визуальным доказательствам кнопка стала больше и легче воспринимается при сканировании, но disabled state не показан. Перед одобрением следует измерить цветовой контраст.

Использование «ui-visual-validator». Mobile-скриншоты навигационного меню после адаптивного обновления.

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

Меню сворачивается на ожидаемой ширине, но активный элемент теряет свое визуальное состояние. Индикатор фокуса также слишком незаметен на темных фонах.

Использование «ui-visual-validator». Скриншоты формы с ошибками валидации и loading states.

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

Текст ошибки видим и расположен близко к каждому полю, но loading state сдвигает кнопку submit. Зарезервируйте стабильное пространство, чтобы предотвратить движение макета.

Аудит безопасности

Безопасно

v4 • 07.07.2026 Открыть версионный отчет

The only static finding is a false positive caused by Markdown inline code at SKILL.md line 27. The skill is prompt-only guidance for UI visual validation and contains no executable command behavior or data exfiltration intent. No prompt injection attempt or semantic security issue was found.

Просканировано файлов

215

Проанализировано строк

Пункты проверки

Ложные срабатывания проигнорированы

Факторы риска

⚙️ Внешние команды (1)

SKILL.md:27

Последний завершенный статический и семантический аудит не обнаружил подтвержденных проблем безопасности. Это не доказывает отсутствие побочных эффектов у навыка.

Аудитор:: codex Посмотреть историю аудитов →

Поделиться и цитировать этот отчет

Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.

Открыть версионный отчет

Копировать ссылку на отчёт

https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Значок Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-ui-visual-validator/security.svg)](https://skillstore.io/skills/sickn33-ui-visual-validator?utm_source=security_passport_badge)

Значок HTML

<a href="https://skillstore.io/skills/sickn33-ui-visual-validator?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-ui-visual-validator/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Встраиваемая карточка

<iframe src="https://skillstore.io/embed/skills/sickn33-ui-visual-validator.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Академические ссылки (APA · BibTeX · CFF)

Цитата APA

sickn33. (2026). ui-visual-validator security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4

Цитата BibTeX

@techreport{sickn33-sickn33-ui-visual-validator-2026,
  author = {sickn33},
  title = {ui-visual-validator security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-visual-validator security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-ui-visual-validator:audit:4"
    description: "Skillstore immutable audit report identifier"

Оценка Skillstore

Почему такая оценка Достоверность доказательств: Высокий

Архитектура

Сопровождаемость

Контент

Сообщество

Соответствие спецификации

Что вы можете построить

Проверка UI-изменений в Pull Request

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

Аудит соответствия Design System

Проверьте компоненты на соответствие design tokens, правилам типографики, стандартам отступов, цветовым палитрам и использованию иконок.

Проверка визуальных состояний Accessibility

Оцените контраст, индикаторы фокуса, читаемый текст, адаптивные макеты, loading states и error states перед релизом.

Попробуйте эти промпты

Проверить один скриншот

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

Проверить до и после

Сравните эти скриншоты до и после с этой целью: [describe goal]. Определите, достигнута ли цель, достигнута частично или не достигнута.

Аудит адаптивности и Accessibility

Оцените эти скриншоты desktop, tablet и mobile на адаптивное поведение, визуальную иерархию, контраст, видимость фокуса, а также error или loading states.

Спроектировать Regression Workflow

Создайте план визуальной проверки для этой библиотеки компонентов с использованием проверки скриншотов, регрессионного тестирования, accessibility checks и review gates для pull request.

Лучшие практики

Предоставляйте четкие цели, скриншоты до и после, а также целевые размеры viewport.
Проверяйте ключевые состояния, включая hover, focus, disabled, loading, error, empty и dark mode.
Совмещайте визуальную проверку с инструментами измерения для pixel diffs, коэффициентов контрастности и кроссбраузерного покрытия.

Избегать

Объявлять изменение UI успешным на основе изменений кода без визуальных доказательств.
Тестировать только один desktop-скриншот для адаптивной или кроссплатформенной функции.
Игнорировать focus, contrast, loading, error и empty states во время визуальной проверки.

Часто задаваемые вопросы

Запускает ли этот skill визуальные тесты автоматически?

Нет. Он предоставляет экспертные рекомендации для анализа и проектирования workflow, но отдельные инструменты должны делать скриншоты или запускать тесты.

Какие инструменты визуального тестирования он охватывает?

Он ссылается на Chromatic, Percy, Applitools, BackstopJS, визуальные сравнения Playwright, визуальное тестирование Cypress и Jest image snapshots.

Может ли он проверять accessibility?

Да. Он фокусируется на визуальных признаках accessibility, таких как контраст, индикаторы фокуса, читаемость, иерархия и адаптивное поведение.

Какие входные данные дают лучший результат?

Используйте скриншоты до и после, целевые цели, сведения о viewport, информацию о теме и любые известные правила design system.

Может ли он заменить human design review?

Нет. Он структурирует visual QA и подсвечивает проблемы, но контекст продукта и финальное дизайнерское суждение по-прежнему важны.

Полезен ли он для pull requests?

Да. Он может помочь reviewers проверять видимые изменения UI, документировать регрессии и запрашивать конкретные исправления перед merge.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Ревизия Skillstore

Примечание о версии

Автор не указал версию.

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-visual-validator

Ссылка

9f814fc6a43fd99946f2da5e0df231c65a38bc76

Актуальность поддержки

20.07.2026

Использование

11 загрузок · 154 просмотров

Структура файлов

📄 SKILL.md