Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

ui-ux-pro-max

Name: ui-ux-pro-max
Author: sickn33

WebおよびモバイルアプリのUI/UXに関する包括的なデザインガイド。新しいUIコンポーネントやページのデザイン、カラーパレットやタイポグラフィの選定、またはコードのUX品質レビューを行う際に活用してください。

description の原文を見る

Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.

SKILL.md 本文

UI/UX Pro Max - Design Intelligence

Webおよびモバイルアプリケーション向けの包括的なデザインガイド。50以上のスタイル、97個のカラーパレット、57個のフォントペアリング、99個のUXガイドライン、および9つの技術スタック全体で25種類のチャートタイプを含みます。優先度ベースのレコメンデーション機能付きの検索可能なデータベース。

使用タイミング

以下の場面でこれらのガイドラインを参照してください：

新しいUIコンポーネントまたはページを設計する場合
カラーパレットとタイポグラフィーを選択する場合
コードのUX問題をレビューする場合
ランディングページまたはダッシュボードを構築する場合
アクセシビリティ要件を実装する場合

ルールカテゴリー（優先度別）

優先度	カテゴリー	影響度	ドメイン
1	アクセシビリティ	重大	`ux`
2	タッチ＆インタラクション	重大	`ux`
3	パフォーマンス	高	`ux`
4	レイアウト＆レスポンシブ	高	`ux`
5	タイポグラフィー＆カラー	中	`typography`, `color`
6	アニメーション	中	`ux`
7	スタイル選択	中	`style`, `product`
8	チャート＆データ	低	`chart`

クイックリファレンス

1. アクセシビリティ（重大）

color-contrast - 通常テキストの最小コントラスト比 4.5:1
focus-states - インタラクティブ要素に目に見えるフォーカスリング
alt-text - 意味のある画像に対する説明的な代替テキスト
aria-labels - アイコンのみのボタンに aria-label を使用
keyboard-nav - タブ順序が視覚的な順序と一致
form-labels - for属性付きのlabelを使用

2. タッチ＆インタラクション（重大）

touch-target-size - 最小 44x44px のタッチターゲット
hover-vs-tap - プライマリインタラクションにはクリック/タップを使用
loading-buttons - 非同期操作中はボタンを無効化
error-feedback - 問題の近くに明確なエラーメッセージ
cursor-pointer - クリック可能な要素に cursor-pointer を追加

3. パフォーマンス（高）

image-optimization - WebP、srcset、遅延読み込みを使用
reduced-motion - prefers-reduced-motion をチェック
content-jumping - 非同期コンテンツのためにスペースを確保

4. レイアウト＆レスポンシブ（高）

viewport-meta - width=device-width initial-scale=1
readable-font-size - モバイルでのボディテキストの最小 16px
horizontal-scroll - コンテンツがビューポート幅に収まることを確認
z-index-management - z-indexスケール（10、20、30、50）を定義

5. タイポグラフィー＆カラー（中）

line-height - ボディテキストに 1.5-1.75 を使用
line-length - 1行あたり 65-75 文字に制限
font-pairing - 見出しとボディのフォント特性を合わせる

6. アニメーション（中）

duration-timing - マイクロインタラクションに 150-300ms を使用
transform-performance - width/height ではなく transform/opacity を使用
loading-states - スケルトンスクリーンまたはスピナー

7. スタイル選択（中）

style-match - スタイルを製品タイプと合わせる
consistency - すべてのページで同じスタイルを使用
no-emoji-icons - 絵文字ではなく SVG アイコンを使用

8. チャート＆データ（低）

chart-type - チャートタイプをデータタイプと合わせる
color-guidance - アクセシブルなカラーパレットを使用
data-table - アクセシビリティのための表形式の代替手段を提供

使用方法

CLIツールを使用して特定のドメインを検索します。

前提条件

Pythonがインストールされているかを確認します：

python3 --version || python --version

Pythonがインストールされていない場合は、ユーザーのOSに基づいてインストールします：

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

このスキルの使用方法

ユーザーがUI/UX作業（設計、構築、作成、実装、レビュー、修正、改善）をリクエストした場合、以下のワークフローに従います：

ステップ1：ユーザーの要件を分析

ユーザーのリクエストから重要な情報を抽出します：

製品タイプ：SaaS、e-commerce、ポートフォリオ、ダッシュボード、ランディングページなど
スタイルキーワード：ミニマル、楽しい、プロフェッショナル、エレガント、ダークモードなど
業界：ヘルスケア、フィンテック、ゲーム、教育など
スタック：React、Vue、Next.js、またはデフォルトの html-tailwind

ステップ2：デザインシステムを生成（必須）

常に --design-system で開始して、推論を含む包括的なレコメンデーションを取得します：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンド：

5つのドメインを並列検索（product、style、color、landing、typography）
ui-reasoning.csv から推論ルールを適用して最適なマッチを選択
完全なデザインシステムを返す：パターン、スタイル、色、タイポグラフィー、エフェクト
避けるべきアンチパターンを含める

例：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ3：必要に応じて詳細検索で補足

デザインシステムを取得した後、ドメイン検索を使用して追加の詳細を取得します：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使用するタイミング：

必要な情報	ドメイン	例
より多くのスタイルオプション	`style`	`--domain style "glassmorphism dark"`
チャートのレコメンデーション	`chart`	`--domain chart "real-time dashboard"`
UXベストプラクティス	`ux`	`--domain ux "animation accessibility"`
代替フォント	`typography`	`--domain typography "elegant luxury"`
ランディングページ構造	`landing`	`--domain landing "hero social-proof"`

ステップ4：スタックガイドライン（デフォルト：html-tailwind）

実装固有のベストプラクティスを取得します。ユーザーがスタックを指定しない場合は、デフォルトを html-tailwind にします。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワード例
`product`	製品タイプのレコメンデーション	SaaS、e-commerce、ポートフォリオ、ヘルスケア、ビューティー、サービス
`style`	UIスタイル、色、エフェクト	glassmorphism、minimalism、ダークモード、brutalism
`typography`	フォントペアリング、Google Fonts	エレガント、楽しい、プロフェッショナル、モダン
`color`	製品タイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
`landing`	ページ構造、CTA戦略	hero、hero-centric、testimonial、pricing、social-proof
`chart`	チャートタイプ、ライブラリレコメンデーション	trend、comparison、timeline、funnel、pie
`ux`	ベストプラクティス、アンチパターン	animation、accessibility、z-index、loading
`react`	React/Next.jsパフォーマンス	waterfall、bundle、suspense、memo、rerender、cache
`web`	Webインターフェースガイドライン	aria、focus、keyboard、semantic、virtualize
`prompt`	AIプロンプト、CSSキーワード	（スタイル名）

利用可能なスタック

スタック	焦点
`html-tailwind`	Tailwindユーティリティ、レスポンシブ、a11y（デフォルト）
`react`	ステート、フック、パフォーマンス、パターン
`nextjs`	SSR、ルーティング、画像、APIルート
`vue`	Composition API、Pinia、Vue Router
`svelte`	Runes、ストア、SvelteKit
`swiftui`	ビュー、ステート、ナビゲーション、アニメーション
`react-native`	コンポーネント、ナビゲーション、リスト
`flutter`	ウィジェット、ステート、レイアウト、テーマ
`shadcn`	shadcn/uiコンポーネント、テーマ、フォーム、パターン

ワークフロー例

ユーザーリクエスト： "美容とスキンケアサービスのランディングページを作成してください"

ステップ1：要件を分析

製品タイプ：ビューティー/スパサービス
スタイルキーワード：エレガント、プロフェッショナル、ソフト
業界：ビューティー/ウェルネス
スタック：html-tailwind（デフォルト）

ステップ2：デザインシステムを生成（必須）

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

出力： パターン、スタイル、色、タイポグラフィー、エフェクト、およびアンチパターンを含む完全なデザインシステム。

ステップ3：必要に応じて詳細検索で補足

# アニメーションとアクセシビリティのUXガイドラインを取得
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 必要に応じて代替タイポグラフィーオプションを取得
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

ステップ4：スタックガイドライン

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

その後： デザインシステム+詳細検索を統合し、デザインを実装します。

出力形式

--design-system フラグは2つの出力形式をサポートしています：

# ASCIIボックス（デフォルト）- ターミナル表示に最適
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - ドキュメントに最適
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

より良い結果のためのヒント

キーワードを具体的に - "healthcare SaaS dashboard" > "app"
複数回検索 - 異なるキーワードで異なるインサイトが得られます
ドメインを組み合わせる - Style + Typography + Color = 完全なデザインシステム
常にUXをチェック - "animation"、"z-index"、"accessibility" を検索して一般的な問題を確認
スタックフラグを使用 - 実装固有のベストプラクティスを取得
反復処理 - 最初の検索がマッチしない場合は、異なるキーワードを試します

プロフェッショナルUIの一般的なルール

これらはしばしば見落とされる問題で、UIをプロフェッショナルに見せません：

アイコン＆ビジュアル要素

ルール	すること	しないこと
絵文字アイコンなし	SVGアイコン（Heroicons、Lucide、Simple Icons）を使用	🎨 🚀 ⚙️ のような絵文字をUIアイコンとして使用
安定したホバー状態	ホバー時に色/不透明度遷移を使用	レイアウトをシフトするスケール変換を使用
正しいブランドロゴ	Simple Iconsから公式SVGを調査	ロゴを推測または誤ったパスを使用
一貫したアイコンサイズ	固定viewBox（24x24）を w-6 h-6 で使用	アイコンサイズをランダムに混在

インタラクション＆カーソル

ルール	すること	しないこと
カーソルポインター	すべてのクリック可能/ホバー可能なカードに `cursor-pointer` を追加	インタラクティブ要素にデフォルトカーソルを残す
ホバーフィードバック	ビジュアルフィードバックを提供（色、影、ボーダー）	要素がインタラクティブであることを示さない
スムーズな遷移	`transition-colors duration-200` を使用	インスタント状態変化または遅すぎる（>500ms）

ライト/ダークモードコントラスト

ルール	すること	しないこと
ガラスカードライトモード	`bg-white/80` 以上の不透明度を使用	`bg-white/10` を使用（透過性が高すぎる）
テキストコントラストライト	`#0F172A`（slate-900）をテキストに使用	`#94A3B8`（slate-400）をボディテキストに使用
ミュートテキストライト	`#475569`（slate-600）以上を使用	gray-400またはそれより明るい色を使用
ボーダー可視性	ライトモードで `border-gray-200` を使用	`border-white/10` を使用（不可視）

レイアウト＆スペーシング

ルール	すること	しないこと
フローティングナビバー	`top-4 left-4 right-4` スペーシングを追加	ナビバーを `top-0 left-0 right-0` に固定
コンテンツパディング	固定ナビバー高を考慮	固定要素の後ろにコンテンツを隠す
一貫した最大幅	同じ `max-w-6xl` または `max-w-7xl` を使用	コンテナ幅を異なるものと混在

配信前チェックリスト

UIコードを配信する前に、以下の項目を確認します：

ビジュアルクオリティ

アイコンとして絵文字が使用されていない（SVGを使用）
すべてのアイコンが一貫したアイコンセットから（Heroicons/Lucide）
ブランドロゴが正確（Simple Iconsから確認済み）
ホバー状態がレイアウトシフトを引き起こさない
var()ラッパーではなくテーマ色を直接使用（bg-primary）

インタラクション

すべてのクリック可能な要素に cursor-pointer がある
ホバー状態が明確なビジュアルフィードバックを提供
遷移がスムーズ（150-300ms）
キーボードナビゲーション用のフォーカス状態が可視

ライト/ダークモード

ライトモードテキストが十分なコントラスト（最小4.5:1）
ガラス/透明要素がライトモードで可視
ボーダーが両方のモードで可視
配信前に両方のモードをテスト

レイアウト

フローティング要素が端から適切にスペーシング
コンテンツが固定ナビバーの後ろに隠れない
375px、768px、1024px、1440pxでレスポンシブ
モバイルで横スクロールなし

アクセシビリティ

すべての画像に代替テキストがある
フォーム入力にラベルがある
色が唯一のインジケーターではない
prefers-reduced-motion が尊重されている

使用タイミング

このスキルは、上記の概要で説明されているワークフローまたはアクションを実行するときに適用されます。

制限事項

このスキルは、上記で説明されたスコープと明確に一致するタスクの場合にのみ使用してください。
出力を環境固有の検証、テスト、または専門家によるレビューの代替とは見なさないでください。
必要な入力、権限、安全境界、または成功基準が不明な場合は、停止して明確化を求めてください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: sickn33
リポジトリ: sickn33/antigravity-awesome-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/sickn33/antigravity-awesome-skills / ライセンス: MIT

SKILL.md 本文

UI/UX Pro Max - Design Intelligence

使用タイミング

ルールカテゴリー（優先度別）

クイックリファレンス

1. アクセシビリティ（重大）

2. タッチ＆インタラクション（重大）

3. パフォーマンス（高）

4. レイアウト＆レスポンシブ（高）

5. タイポグラフィー＆カラー（中）

6. アニメーション（中）

7. スタイル選択（中）

8. チャート＆データ（低）

使用方法

前提条件

このスキルの使用方法

ステップ1：ユーザーの要件を分析

ステップ2：デザインシステムを生成（必須）

ステップ3：必要に応じて詳細検索で補足

ステップ4：スタックガイドライン（デフォルト：html-tailwind）

検索リファレンス

利用可能なドメイン

利用可能なスタック

ワークフロー例

ステップ1：要件を分析

ステップ2：デザインシステムを生成（必須）

ステップ3：必要に応じて詳細検索で補足

ステップ4：スタックガイドライン

出力形式

より良い結果のためのヒント

プロフェッショナルUIの一般的なルール

アイコン＆ビジュアル要素

インタラクション＆カーソル

ライト/ダークモードコントラスト

レイアウト＆スペーシング

配信前チェックリスト

ビジュアルクオリティ

インタラクション

ライト/ダークモード

レイアウト

アクセシビリティ

使用タイミング

制限事項

詳細情報

関連スキル

doubt-driven-development

apprun-skills

desloppify

debugging-and-error-recovery

test-driven-development

incremental-implementation