スキル ui-ux-pro-max

🎨

ui-ux-pro-max

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

低リスク

AIガイダンスによるプロフェッショナルなUI/UXデザインの構築

こちらからも入手できます: ZhanlinCui,DCjanus,nextlevelbuilder

デザイナーや開発者は、プロジェクト間で一貫性のあるアクセシブルなデザインシステムを維持することに苦労しています。このスキルは、9つの主要技術スタックにわたる総合的なデザインガイドライン、カラーパレット、タイポグラフィの推奨事項、コンポーネントパターンを提供します。

対応: Claude Codex Code(CC)

⚠️ 68 貧弱

スキルZIPをダウンロード

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

オンにして利用開始

テストする

「ui-ux-pro-max」を使用しています。医療アプリのカラーパレットを推奨してください

期待される結果:

医療アプリカラーパレット：プライマリ（#0891B2 - カルムシアン）は信頼と落ち着きを確立します。セカンダリ（#22D3EE - ライトシアン）は視覚的な階層を提供します。CTA（#059669 - Success Green）はメインアクション用。背景（#ECFEFF - ソフトホワイト）は目の疲れを軽減します。テキスト（#164E63 - ディープティール）は可読性を確保します。ボーダー（#A5F3FC - ライトボーダー）は微妙な分離用。このパレットは、医療アプリケーションでユーザーが不安を感じ可能性がある場合に重要な落ち着きと信頼を優先します。

「ui-ux-pro-max」を使用しています。モバイルボタンのタッチターゲットの要件は何ですか？

期待される結果:

タッチターゲットガイドライン：最小44x44ピクセル（iOS HIGとWCAG要件）。頻繁に利用されるアクションには48x48ピクセルを推奨。Paddingは可視ボタンだけでなく、測定に含める必要があります。タッチターゲット間の間隔：誤タップ防止のため最小8px。重要なアクション（削除、購入など）は最小56x56ピクセルを検討してください。

セキュリティ監査

低リスク

v1 • 2/25/2026

Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.

スキャンされたファイル

2,560

解析された行数

検出結果

総監査数

中リスクの問題 (1)

scripts/design_system.py:9 scripts/design_system.py:423-425

External Command Execution in Design Scripts

scripts/design_system.py contains shell command execution patterns for design tooling integration. This is legitimate for a design system generator but represents a minor risk if the script were modified to accept untrusted input.

低リスクの問題 (3)

data/stacks/nuxt-ui.csv:2 data/stacks/nextjs.csv:2

Documentation URLs in Design Guidelines

CSV data files contain documentation URLs (e.g., https://ui.nuxt.com/docs/) as part of design guidelines. These are reference links, not network calls made by the skill.

data/colors.csv:2-30 data/products.csv:2-30

False Positive: Hex Color Codes Flagged as Crypto

Static analyzer flagged hex color codes (e.g., #2563EB, #3B82F6) as 'weak cryptographic algorithm'. These are design color values, not cryptographic operations.

data/ux-guidelines.csv:1-100

False Positive: Design Terminology Flagged as Suspicious

Terms like 'reconnaissance' (in UX research context), 'keylogger' (in security UI guidelines), and 'C2' (likely 'call-to-action' abbreviation) triggered keyword detectors but are legitimate design domain vocabulary.

監査者: claude

品質スコア

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

セキュリティ

仕様準拠

作れるもの

MVPデザインシステムを構築するスタートアップ

Soloファウンダーは、このスキルを使用してSaaS製品の一貫したUIパターンを確立し、Reactベースのアプリケーションに適切なカラーパレット、コンポーネントスタイル、アクセシビリティガイドラインを選択します。

コンポーネントを標準化するデザインチーム

デザインチームリーダーは包括的なガイドラインを活用して統一されたデザインシステムドキュメントを作成し、すべてのチームメンバーが複数の製品ラインで一貫したパターンを遵守することを確保します。

アクセシビリティ要件を実装する開発者

フロントエンド開発者はアクセシビリティガイドラインを参照して、VueアプリケーションがWCAG 2.1要件を満たすことを確認します。これには、適切な色のコントラスト、フォーカス管理、キーボードナビゲーションパターンが含まれます。

これらのプロンプトを試す

基本的なカラーパレット選択

[製品タイプ、例：SaaSダッシュボード]を構築しています。プライマリ、セカンダリ、CTA、背景、テキスト、ボーダー色を含むカラーパレットを推奨してください。Hexコードを含み、色心理学を説明してください。

コンポーネント実装ガイド

[フレームワーク、例：React]で[コンポーネント、例：データテーブル]を実装するためのベストプラクティスを教えてください。アクセシビリティ要件、一般的なパターン、コード例を含んでください。

アクセシビリティ監査リクエスト

[ページ/コンポーネントタイプ]のアクセシビリティの問題をレビューしてください。[UIの説明]があります。どのようなWCAGガイドラインを確認すべきですか？優先順位付きのチェックリストを提供してください。

完全なデザインシステム生成

[対象ユーザー]を対象とした[製品タイプ]の包括的なデザインシステムを生成してください。カラーパレット、タイポグラフィスケール、コンポーネントスタイル.spacingシステム、対象ドメインに固有のUXガイドラインを含んでください。

ベストプラクティス

デザイン最終確定前に、WCAG AA最小要件（標準テキスト4.5:1、大きいテキスト3:1）を確認してください
すべてのページで一貫性を維持 - アプリケーション全体で同じスタイル、カラーパレット、コンポーネントパターンを使用
モバイルファーストでデザイン：タッチフレンドリーレイアウト（44px以上のターゲット）から始め、大きなスクリーン用にスケールアップ
テーマ設定やダークモードサポートを可能にするため、ハードコード値ではなくセマンティックな色名（プライマリ、セカンダリ、エラー）を使用
前庭機能障害のあるユーザーのアクセシビリティを確保するため、reduced motion設定（prefers-reduced-motion）でデザインをテスト

回避

本番インターフェースで絵文字をアイコンとして使用 - プラットフォーム間で一貫してレンダリングされず、プロフェッショナルな外観を欠く
タップ/クリックの代替なしでホバー専用のインタラクションを実装 - タッチデバイスユーザーとアクセシビリティシナリオを除外
ローディング状態とスケルトンスクリーンをスキップ - 非同期操作中に知覚されるパフォーマンスの問題とユーザーの不確実性を生み出す
デザイントークンやCSS変数ではなく色をインラインでハードコード - テーマ設定を防ぎ、メンテナンス負担を発生させる
prefers-reduced-motionを尊重せずに装飾目的のみでアニメーションを使用 - 一部のユーザーに不快感やめまいを引き起こす可能性がある

よくある質問

このスキルはClaude、Codex、Claude Codeで動作しますか？

はい。このスキルは3つのAIアシスタントすべてと互換性があります。それぞれがデザインガイドラインにアクセスし、特定のプロジェクトニーズに基づいて推奨を提供できます。

これらのガイドラインを商用プロジェクトで使用できますか？

はい。スキルはMITライセンスの下でライセンスされており、商用利用が許可されています。ガイドラインは確立されたデザインシステムからの業界標準のベストプラクティスを参照しています。

これらのガイドラインを既存のブランド色に適応させるにはどうすればいいですか？

ブランドプライマリ色を置き換えながら、色心理学とコントラスト推奨を使用してください。ガイドラインは任意のベースカラーで機能する比率と関係を提供します。

これらのアクセシビリティガイドラインはWCAG準拠ですか？

はい。ガイドラインは色のコントラスト、タッチターゲット、フォーカス状態、キーボードナビゲーションのWCAG 2.1 AA標準を参照しています。本番環境では常に自動テストツールで検証してください。

プロジェクトにはどの技術スタックを選択すべきですか？

このスキルは9つのスタックのガイドラインを提供します。WebアプリにはReact/Next.js、モバイルにはReact Native/SwiftUI/Flutter、軽量WebにはVue/Svelte、ユーティリティファーストCSSにはTailwind、Radixベースのコンポーネントにはshadcn/ui。チームの専門知識とプロジェクトの要件を考慮してください。

デザインガイドラインはどのくらいの頻度で更新されますか？

デザインベストプラクティスは時間とともに進化する可能性があります。スキルには、主要なデザインシステム（Material Design、Human Interface Guidelines、Carbonなど）からの確立されたパターンが含まれており、フレームワークバージョンに関係なく関連性を維持しています。