📦
content-creator
88ブランドに一貫したマーケティングコンテンツを作成
マーケティングチームには、チャネルを横断して一貫性を保つコンテンツが必要です。このスキルは、ブランドボイスとSEOに合わせてコンテンツを計画、執筆、分析、最適化するのに役立ちます。
ライティング＆コンテンツ 表示
スキル ui-visual-validator
📦
ui-visual-validator
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド
視覚的証拠でUI変更を検証
UI変更はコードレビューを通過しても、視覚面、レスポンシブ対応、アクセシビリティの目標を満たしていない場合があります。このスキルは、測定可能な所見と修正方針に基づく、スクリーンショットを使った厳密な検証を支援します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「ui-visual-validator」を使用しています。 再設計されたチェックアウトボタンの変更前後のスクリーンショット。
期待される結果:
視覚的証拠から見ると、ボタンは大きくなり見つけやすくなっていますが、無効状態が示されていません。承認前に色のコントラストを測定する必要があります。
「ui-visual-validator」を使用しています。 レスポンシブ更新後のナビゲーションメニューのモバイルスクリーンショット。
期待される結果:
メニューは想定された幅で折りたたまれますが、アクティブ項目の視覚状態が失われています。ダーク背景ではフォーカス表示も目立ちにくすぎます。
「ui-visual-validator」を使用しています。 バリデーションエラーと読み込み状態を含むフォームのスクリーンショット。
期待される結果:
エラーテキストは表示されており各フィールドの近くにありますが、読み込み状態で送信ボタンの位置がずれます。レイアウトの移動を防ぐために安定したスペースを確保してください。
セキュリティ監査
安全v4 • 2026/7/7 バージョン別レポートを開く
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.
1
スキャンされたファイル
215
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (1)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](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/4BibTeX形式の引用
@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 スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
69
コミュニティ
83
仕様準拠
作成できるもの
プルリクエストのUI変更を検証
変更前後のスクリーンショットをレビューし、UI変更が明示された目標を満たしており、目に見えるリグレッションがないことを確認します。
デザインシステム準拠を監査
コンポーネントをデザイントークン、タイポグラフィ規則、余白基準、カラーパレット、アイコン使用方法と照合します。
アクセシビリティの視覚状態を確認
リリース前に、コントラスト、フォーカス表示、読みやすいテキスト、レスポンシブレイアウト、読み込み状態、エラー状態を評価します。
これらのプロンプトを試す
1枚のスクリーンショットをレビュー
このUIスクリーンショットについて、目に見えるレイアウト、タイポグラフィ、余白、色、アクセシビリティの問題をレビューしてください。観察できる視覚的証拠から始め、その後に具体的な修正点を列挙してください。
変更前後を検証
次の目標に照らして、これらの変更前後のスクリーンショットを比較してください: [describe goal]。目標が達成されたか、部分的に達成されたか、達成されていないかを判断してください。
レスポンシブアクセシビリティを監査
これらのデスクトップ、タブレット、モバイルのスクリーンショットについて、レスポンシブ挙動、視覚的階層、コントラスト、フォーカスの見えやすさ、エラー状態または読み込み状態を評価してください。
リグレッションワークフローを設計
このコンポーネントライブラリ向けに、スクリーンショットレビュー、リグレッションテスト、アクセシビリティチェック、プルリクエストレビューゲートを使用した視覚検証計画を作成してください。
ベストプラクティス
- 明確な目標、変更前後のスクリーンショット、対象のビューポートサイズを提供します。
- hover、focus、disabled、loading、error、empty、dark modeを含む主要な状態を検証します。
- 視覚レビューと、ピクセル差分、コントラスト比、クロスブラウザ対応範囲の測定ツールを組み合わせます。
回避
- 視覚的証拠なしに、コード変更だけでUI変更が成功したと判断すること。
- レスポンシブまたはクロスプラットフォーム機能に対して、デスクトップのスクリーンショット1枚だけをテストすること。
- 視覚レビュー中に、フォーカス、コントラスト、読み込み、エラー、空状態を無視すること。
よくある質問
このスキルはビジュアルテストを自動実行しますか？
いいえ。分析とワークフロー設計のための専門的なガイダンスを提供しますが、スクリーンショットの取得やテスト実行には別のツールが必要です。
どのビジュアルテストツールを扱いますか？
Chromatic、Percy、Applitools、BackstopJS、Playwrightのビジュアル比較、Cypressのビジュアルテスト、Jest image snapshotsを参照します。
アクセシビリティをレビューできますか？
はい。コントラスト、フォーカス表示、読みやすさ、階層、レスポンシブ挙動など、視覚的なアクセシビリティの兆候に重点を置きます。
最良の結果を得るにはどのような入力が必要ですか？
変更前後のスクリーンショット、対象目標、ビューポートの詳細、テーマ情報、既知のデザインシステム規則を使用してください。
人間によるデザインレビューを置き換えられますか？
いいえ。ビジュアルQAを構造化し問題を強調しますが、プロダクトの文脈と最終的なデザイン判断は依然として重要です。
プルリクエストに役立ちますか？
はい。レビュアーが目に見えるUI変更を確認し、リグレッションを記録し、マージ前に具体的な修正を依頼するのに役立ちます。
開発者情報
作成者
sickn33ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
9f814fc6a43fd99946f2da5e0df231c65a38bc76
メンテナンスの新しさ
2026/7/20
利用状況
11 ダウンロード · 154 閲覧
ファイル構成
📄 SKILL.md
sickn33 のその他のスキル
すべて表示📦
prompt-engineering-patterns
85実証済みパターンでLLMプロンプトを改善
一貫性のないプロンプトは時間を浪費し、AIの出力を信頼しにくくします。このスキルは、再利用可能なパターン、例、評価手順、最適化ワークフローを使ってプロンプト設計を支援します。
生産性 表示
📦
senior-architect
81スケーラブルなソフトウェアアーキテクチャを設計する
アーキテクチャ上の意思決定は、Web、モバイル、バックエンド、クラウドシステム全体で比較するのが困難です。このスキルは、レポート、依存関係レビュー、トレードオフ文書化のための構造化されたガイドとローカルのスキャフォールドスクリプトを提供します。
コーディング＆開発 表示
📦
senior-fullstack
81シニアレベルのパターンでフルスタックアプリを構築
チームには、モダンなWebアプリケーション向けに一貫したセットアップ、アーキテクチャ、レビュー指針が必要です。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQLプロジェクト向けのスキャフォールダー、ワークフローのリファレンス、品質向上のためのプロンプトを提供します。
コーディング＆開発 表示
📦
prompt-engineer
81Prompt EngineerでAIプロンプトを最適化
目標が曖昧だったり複雑だったりすると、明確なプロンプトを書くのは困難です。このスキルは、実績のあるプロンプトフレームワークを使って、粗い依頼を構造化されたプロンプトに変換します。
生産性 表示
📦
product-manager-toolkit
80リサーチインサイトでプロダクト業務の優先順位を決める
プロダクトチームには、機能の順位付け、インタビューの統合、意思決定の文書化をより速く行う方法が必要です。このスキルは、構造化された計画のために、RICEスコアリング、インタビュー分析、PRDテンプレートを提供します。
生産性 表示
関連スキル
すべて表示📦
ux-designer
80リサーチ主導のデザインガイダンスでUXを改善
作成者 shubhamsaboo
チームは思い込みに基づいてフローを設計し、アクセシビリティの問題を見落としがちです。このスキルは、UXのベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。
デザイン＆クリエイティブ 表示
📦
ui-styling
83Build Accessible Tailwind Interfaces
作成者 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
デザイン＆クリエイティブ 表示
📦
web-accessibility
82WCAG準拠のためのWebアクセシビリティ監査
作成者 89jobrien
アクセシビリティ上のギャップは、ユーザーの利用を妨げ、コンプライアンスリスクを生む可能性があります。このスキルは、WCAG監査、スクリーンリーダーチェック、キーボードテスト、改善計画を支援します。
デザイン＆クリエイティブ 表示
📦
design-system
82Build Consistent Design Systems and Slides
作成者 nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
デザイン＆クリエイティブ 表示
📦
design-lint
80Check designs with deterministic CSS rules
作成者 cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
デザイン＆クリエイティブ 表示
📦
uizze-ui
80Build and Refine Interfaces with Uizze
作成者 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
デザイン＆クリエイティブ 表示