Design Audit

アクセシビリティ (WCAG 2.2)、パフォーマンス、テーマ設定、レスポンシブ/アダプティブデザイン、およびアンチパターン検出にわたる包括的な自律型デザイン品質監査。重要度評価と修正案を含む優先順位付けされたレポートを作成します。使用場面: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'。

概要

あなたは自律型のデザイン品質監査者です。アクセシビリティ、パフォーマンス、テーマ設定、レスポンシブ対応、モダンなパターンの使用、アンチパターン検出など、あらゆるデザインの側面を体系的に評価し、重要度評価と具体的な修正案を含む優先順位付けされたレポートを作成します。

ユースケース

AIエージェントのワークフローに追加する前にDesign Auditを評価する。
繰り返しの多いフロントエンドデザインタスクの開始点としてDesign Auditを使用する。
Design Auditをskills-hub-registryや他のGitHubリポジトリの関連スキルと比較する。

導入方法

# Review source first
open https://github.com/tinh2/skills-hub-registry/blob/main/ux/design-audit/SKILL.md

手順とスクリプトを確認した後、スキルフォルダーをエージェントのスキルディレクトリにコピーまたはクローンしてください。

セキュリティ

Design Auditをインストールする前に、ソースのSKILL.md、参照されているスクリプト、権限、および外部サービスを確認してください。サードパーティのスキルは、特にファイルの読み取り、APIの呼び出し、コマンドの実行が可能な場合、コードの依存関係と同様に扱ってください。

関連Skills

Constant Time Testing

trailofbits/skills

フロントエンドデザイン

Constant-time testingは、暗号コード内のタイミングサイドチャネルを検出します。暗号実装のタイミング脆弱性を監査する際に使用します。

Claude CodeClaude
securitytesting
6,280 Starsソースあり

Managed Deep Agents

langchain-ai/langchain-skills

フロントエンドデザイン

LangSmithでmda CLIを使用してManaged Deep Agentsを構築、テスト、またはデプロイする際のINVOKE THIS SKILL。コードファーストでファイルベースのプロジェクトレイアウト、define_deep_agent / defineDeepAgent、作成されたツールとミドルウェア、MCPコネクタ、cronスケジュール、スキル、サンドボックス、mda init/dev/deploy、Context Hub、およびPythonとTypeScriptでのヒューマンインザループ(human-in-the-loop)割り込みをカバーしています。

CodexClaude
typescriptpython
1,009 Starsソースあり

GSAP Core

mxyhi/ok-skills

フロントエンドデザイン

コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion)。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。

CodexClaude Code
reactsecurity
423 StarsApache-2.0

花叔Design · Huashu-Design

mxyhi/ok-skills

フロントエンドデザイン

花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家(UX、アニメーター、スライドデザイナー、プロトタイパー)になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード:プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説

CodexClaude Code
pythonreact
423 StarsApache-2.0

Design Build

tinh2/skills-hub-registry

フロントエンドデザイン

独特でプロダクションレベルのインターフェースを、Ralph Wiggumのようなスピードで構築します。最新の CSS、フルイドタイポグラフィ、意図のあるモーションを駆使し、一般的なAI特有のデザイン感のない、Webまたはモバイルの実用的なコードを提供します。使用場面:'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'。

CodexClaude Code
reactdesign
8 Starsソースあり

Design Claude

tinh2/skills-hub-registry

フロントエンドデザイン

HTMLファーストのハイファイデザインスキル:インタラクティブなプロトタイプ、スライドデッキ、アニメーションデモ、デザインバリエーションの探索、視覚的方向性のアドバイス、専門的なクリティーク。トリガー:make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, design p

CodexClaude Code
pythonreact
8 Starsソースあり