UI/UXエンジニアにおすすめのClaude Skills 8選
0 分で読めます
r/Frontend、r/UXDesign、Figma Communityのフォーラムを見ていると、デザイナーやフロントエンド開発者のAIツールに対する議論が変化していることに気づくでしょう。2年前、話題の中心はAIがデザイナーを完全に置き換えるのかどうかでした。その不安は今もなくなったわけではありません（おそらく今後もなくならないでしょう）。しかし最近は、AIに面倒な作業を任せて創造的な作業に集中するワークフローを共有する、より実践的な議論も増えています。
数字にもその傾向が表れています。Loop11の年次調査によると、UXリサーチャーのAI導入率は2025年に80%まで上昇しました。シニアデザイナーは、かつて3人チームで対応していた量の仕事をこなしていると報告しています。この傾向から、1人でデザインスタジオのように活動する「Super-IC」（スーパー個人貢献者）が生まれています。Redditでも、反応は熱心かつ実践的です。r/webdesignやr/Frontendでは、開発者がClaude Codeを使って30分で完全なプロトタイプを作っています。UX Collectiveでは、Claudeを使ってデザインを自動でダークモードに変換したり、アクセシブルなコンポーネントのバリエーションを生成したり、WCAGガイドラインに照らしてページを監査したりする詳細なワークフローを、デザイナーが公開しています。
懐疑的な見方は今もありますし、それは健全なことです。UXリサーチャーの91%が、出力の正確性やハルシネーションを懸念しています。コミュニティの見解は明確です。AIビルダーは初稿のモックアップやスキャフォールディングには優れていますが、個別の細かな調整、繊細なインタラクションパターン、そして実際のユーザーが実際のインターフェースに戸惑う様子を長年見てきた経験から生まれるデザイン判断は、まだ苦手です。AIがデザイナーの審美眼に取って代わるわけではありません。レスポンシブなバリエーションの生成、コントラスト比の確認、コンポーネントの定型コードの作成、チェックリストに基づく監査といった反復作業を担うことで、人間が本当に重要な判断により多くの時間を使えるようにします。
SnykのBrian Clarkが、BoltとFigmaを組み合わせてウェブサイトを構築する方法を紹介します。フロントエンド開発者の間で広がる、AIを活用したデザインワークフローの一例です。
Claude Skillsは、このワークフローを始めるうえで特に興味深い選択肢のひとつです。まだ使ったことがない方も、Claudeのエコシステムの中で独自の位置を占めているため、ぜひ知っておきましょう。
Claude Skillsとは（そして、そうではないもの）
Claudeのエコシステムには、いくつかの拡張の仕組みがあり、混同しやすいものです。簡単に整理してみましょう。
CLAUDE.mdファイルは、プロジェクトの永続的なメモリです。毎回のセッションに読み込まれ、「このプロジェクトではTailwind v4を使用する」「インデントは常にスペース2つにする」といった情報をClaudeに伝えます。常時有効なコンテキストであり、必要に応じて使う機能ではありません。
カスタムスラッシュコマンド（
.claude/commands/*.md）は、/command-nameで実行するシンプルなプロンプトテンプレートでした。現在は実質的にSkillsに統合されています。frontmatterでargument-hintを定義したSkillsはスラッシュコマンドとして呼び出せます。一方、それ以外のSkillsはタスクに応じてコンテキストから有効になります。MCPサーバーは、Model Context Protocolを介してツールやデータソースを公開する、実行中のプロセスです。ClaudeがAPIを呼び出したり、データベースを検索したり、外部サービスとやり取りしたりできるようにします。サーバープロセスとコードが必要です。
Claude Connectorsは、OAuthを使用するリモートMCPサーバーを介して、ClaudeをSlack、Figma、Asanaなどの外部サービスに接続します。
Claude Appsは、Claudeが動作するプラットフォーム（Claude.ai、Claude Code、モバイル、デスクトップ）を指し、Claudeの拡張機能ではありません。
Pluginsは、Skills、エージェント、フック、MCPサーバーをまとめて配布するパッケージです。
Claude Skillsは、SKILL.mdファイル（YAML frontmatterとMarkdown形式の指示を含む）と、スクリプト、テンプレート、リファレンス文書などの任意の補助ファイルを格納したディレクトリです。その特徴は次のとおりです。
単一ファイルではなく、ディレクトリです。Skillには、指示に加えてシェルスクリプト、Pythonヘルパー、リファレンス文書、アセットファイルをまとめて含めることができます。
段階的な情報開示。起動時にClaudeがYAML frontmatterから読み込むのは、各Skillの
nameとdescription（Skillあたり約100トークン）のみです。MCPツールの説明がコンテキストに挿入される方法と似ています。Claudeはタスクと説明を照合し、どのSkillを有効にするか判断します。適合するSkillが見つかると、SKILL.mdの指示全体を読み込みます。補助ファイル（リファレンス、スクリプト、アセット）は、実行中に明示的に必要となった場合にのみ読み込まれます。この3段階の仕組みにより、数十個のSkillをインストールしていてもコンテキストウィンドウを効率よく使えます。また、Skillのdescriptionフィールドが重要であることも意味します。説明が曖昧だと有効化が不安定になりますが、「ユーザーがウェブコンポーネントの構築を依頼したときにこのSkillを使う」のような具体的なトリガーフレーズを含めると、安定して有効化されます。コードを実行できます。Skillには、実行中にClaudeが動かす
scripts/内のスクリプトを含められます。また、!`command`構文を使い、動的な出力をプロンプトのコンテキストに挿入することもできます。オープン標準に準拠しています。Agent Skills仕様はClaude Code、OpenAI Codex、Cursor、Gemini CLIなどに採用されており、Skillsの移植性を高めています。
スラッシュコマンドとして登録できます。YAML frontmatterに
argument-hintフィールドを含めると、Skillを/skill-nameとして直接呼び出せます。argument hintのないSkillは、代わりにコンテキストに応じて有効になります。つまり、タスクが説明に合致するとClaudeが自動的に選択します。
公式仕様とAnthropicのSkillsドキュメントで、フォーマットの詳細を確認できます。Agent Skillsの設計意図を知るには、Anthropicのエンジニアリングブログ記事もおすすめです。
Claude Skillをインストールする
Skillのインストールは約30秒で完了します。
プロジェクトレベル（バージョン管理を通じてチームで共有）：
ユーザーレベル（個人用、すべてのプロジェクトで利用可能）：
Plugins経由（VercelなどのSkillコレクション向け）：
プロジェクトレベルのSkillsは、ソース管理を通じてチームメンバーと共有されます。ユーザーレベルのSkillsは自分だけが利用できます。名前が重複する場合は、エンタープライズSkills、個人用Skills、プロジェクトSkillsの順で優先されます。
重要な注意点がひとつあります。Agent Skillsのエコシステムは新しく、急速に拡大しているため、サプライチェーンセキュリティが重要です。SnykのToxicSkills調査では、テストしたSkillsの36%でプロンプトインジェクションが見つかり、エコシステム全体で1,467件の悪意あるペイロードが確認されました。インストールする前に、SkillのSKILL.mdと同梱スクリプトを必ず確認してください。Skillsも、自分の環境で実行するサードパーティー製コードと同じように扱いましょう。
Claude Skillを開発していますか？オープンソースのClaude SkillやMCPサーバーを作成または保守している方を対象に、Snyk Secure Developer Programでは、オープンソースプロジェクト向けにエンタープライズレベルのセキュリティスキャンを無料で提供しています。Snykは585,000以上のオープンソースプロジェクトを保護しており、条件を満たすメンテナーには、エンタープライズ機能へのフルアクセス、Discordコミュニティによるサポート、インテグレーション支援を提供します。既存のプロジェクトがある方はこちらからお申し込みください。新たにプロジェクトを始める方はこちらをご覧ください。
それでは、リストを見ていきましょう。ここで紹介する8つのSkills（およびSkillコレクション）は、高精度なフロントエンドデザインから、アクセシビリティ監査、Reactのパフォーマンス最適化、コンポーネントアーキテクチャ、モバイルUIパターンまで幅広くカバーしています。
# | Skill | スター数 | 主な用途 | ソース |
|---|---|---|---|---|
1 | Anthropic Frontend Design | 65,847 | 大胆な美しさを備えた、独創的で本番品質のUI | |
2 | Vercel Web Design Guidelines | 19,487 | ウェブインターフェース監査（100以上のルール、アクセシビリティ、UX） | |
3 | Vercel React Best Practices | 19,487 | React/Next.jsのパフォーマンス（57のルール、8つのカテゴリ） | |
4 | Vercel Composition Patterns | 19,487 | Reactのコンポーネントアーキテクチャとデザインパターン | |
5 | UI/UX Pro Max | 29,636 | デザインインテリジェンス：50のスタイル、97のパレット、9つのスタック | |
6 | Bencium UX Designer | 72 | アクセシビリティ、レスポンシブデザイン、モーション仕様を含む包括的なUX | |
7 | AccessLint | 8 | WCAG 2.1に基づくアクセシビリティ監査、コントラスト確認、リファクタリング | |
8 | Vercel React Native Skills | 19,487 | モバイルUIのパフォーマンス、アニメーション、ナビゲーションパターン |
1. Anthropic frontend-design
ソース： anthropics/skills（パス：skills/frontend-design/）およびanthropics/claude-code（パス：plugins/frontend-design/） スター数：65,847（skillsリポジトリ）/ 65,362（claude-codeリポジトリ） ライセンス：独自ライセンス（LICENSE.txtを参照） 最終更新：2026年2月 SKILL.md確認済み：はい
これは、Claude Codeを使うデザイナーなら誰もが直面する問題、つまりAIが生成するフロントエンドがどれも同じように見える問題に対するAnthropic自身の答えです。白い背景に汎用的な紫のグラデーション。同じInter/Robotoのフォント構成。ありきたりなカードレイアウト。このSkillの説明ではそれを「AI slop」と呼び、Claudeがこうしたパターンから抜け出せるよう、指示が設計されています。
このSkillは、同じような出力ばかりにうんざりしたクリエイティブディレクターのデザインブリーフのようです。コードを書く前に、Claudeに4つの観点から検討するよう指示します。目的（誰が、なぜ使うのか）、トーン（具体的な美的方向性を選ぶ）、制約（フレームワーク、パフォーマンス、アクセシビリティ）、差別化（このインターフェースを印象的にする要素は何か）です。
できること
中核となる指示セットは、次の5つの領域をカバーします。
タイポグラフィ：個性と特徴のあるフォントを選びます。このSkillでは、Inter、Roboto、Arial、システムフォント、Space Grotesk（「AIが使いすぎている」と指摘）を明確に禁止しています。意外性のある組み合わせを推奨し、個性的なディスプレイフォントに洗練された本文用フォントを合わせるなどの工夫を促します。
色とテーマ：一貫性のあるパレットを採用します。統一感を保つためにCSS変数を使用します。控えめで均等に配分された配色ではなく、アクセントを際立たせた主役となる色を使います。ありきたりな白地に紫の配色は避けます。
モーション：印象に残る演出を優先します。ページ読み込み時に要素を順番に表示する、よく練られた演出は、細かなマイクロインタラクションを散りばめるよりも大きな効果があります。HTMLにはCSSのみの手法、ReactにはMotionライブラリを使用します。
空間構成：意外性のあるレイアウト。非対称、重なり、斜めの流れ、グリッドを破る要素、ゆとりある余白などです。
背景とビジュアルの細部：グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明レイヤー、ドラマチックな影、装飾的なボーダー、カスタムカーソル、粒状ノイズのオーバーレイ。
このSkillには明確な主張があります。無難なデフォルトではなく、大胆で個性的な制作へとClaudeを導きます。創造性より一貫性が重要な社内ツールを開発する場合は、より構造化されたデザインシステムのSkill（下記の#5または#6を参照）と組み合わせるとよいでしょう。一方、ランディングページ、マーケティングサイト、ポートフォリオ、ビジュアルに個性を持たせたいプロジェクトでは、Claudeが毎回同じインターフェースを生成するのを防いでくれるSkillです。
インストール
同じSkillが2つのリポジトリで利用できます。
使い方
Claudeにウェブコンポーネント、ページ、アプリケーションの構築を依頼すると、Skillが自動的に有効になります。
対象ユーザー：汎用テンプレートではなく、視覚的に個性のあるインターフェースをClaudeに生成させたいフロントエンド開発者やデザイナー。ランディングページ、ポートフォリオサイト、マーケティングページなど、デザインの個性が重要なプロジェクトに特に役立ちます。
2. Vercel web design guidelines
出典： vercel-labs/agent-skills（パス：skills/web-design-guidelines/） スター数： 19,487 ライセンス： MIT 最終更新： 2026年1月 検証済みのSKILL.md： はい
Anthropicのfrontend-designスキルがクリエイティブな方向性に重点を置くのに対し、このVercelのスキルは正確性に重点を置きます。既存のUIコードを、アクセシビリティ、パフォーマンス、UXのベストプラクティスを網羅する100以上のルールから成る包括的なWeb Interface Guidelinesに照らしてレビューします。
できること
このスキルは、次のシンプルなワークフローに沿って動作します。
ソースURLから最新のガイドラインを取得します（ルールはvercel-labs/web-interface-guidelinesリポジトリにあり、常に最新の状態に保たれます）
指定されたファイルを読み込みます
すべてのファイルを全ルールに照らしてチェックします
検出結果を簡潔な
file:line形式で出力します
ガイドラインでは、経験豊富なUI/UXエンジニアがコードレビューで確認する一方、時間に追われると見落としやすい項目を扱います。適切なARIA属性、視認できるフォーカス状態、ラベル付き入力欄、タッチ領域のサイズ、動きを減らす設定への対応、セマンティックHTML、キーボード操作、適切な見出し階層など、ほかにも数多くの項目が含まれます。
これはクリエイティブなスキルではなく、品質を担保するためのゲートです。WCAG監査に不合格となる問題や、キーボードやスクリーンリーダーのユーザーに実際の使いづらさをもたらす問題を検出する、UI/UXのベストプラクティス向けリンターと考えてください。
インストール
またはプラグインマーケットプレイスから：
使い方
このスキルは、対象ファイルを指定する引数ヒント付きのスラッシュコマンドとして登録されます。
対象ユーザー：開発中にUI/UX品質チェックを自動化したいフロントエンド開発者。コードベース全体で一貫性を徹底したいデザインシステムエンジニア。アクセシビリティ監査に備えているすべての方。
Snykの関連リソース：
3. Vercel Reactのベストプラクティス
出典： vercel-labs/agent-skills（パス：skills/react-best-practices/） スター数： 19,487 ライセンス： MIT 最終更新： 2026年1月 検証済みのSKILL.md： はい
パフォーマンスはUXに関わる重要な要素です。どれほどタイポグラフィが優れていても、操作可能になるまで4秒かかる美しいインターフェースは、ユーザーにとって使いづらいものです。Vercel Engineeringが提供するこのスキルには、8つのカテゴリにわたる57のパフォーマンス最適化ルールが、効果の大きい順にまとめられています。
対象範囲
優先度 | カテゴリ | 影響度 | ルール数 |
|---|---|---|---|
1 | ウォーターフォールの解消 | 重大 | 5 |
2 | バンドルサイズの最適化 | 重大 | 5 |
3 | サーバーサイドのパフォーマンス | 高 | 7 |
4 | クライアントサイドのデータ取得 | 中～高 | 4 |
5 | 再レンダリングの最適化 | 中 | 12 |
6 | レンダリングパフォーマンス | 中 | 9 |
7 | JavaScriptのパフォーマンス | 低～中 | 12 |
8 | 高度なパターン | 低 | 3 |
優先順位が重要なのは、Vercelが実際の開発で培った知見が反映されているためです。リクエストのウォーターフォールを解消し、バンドルサイズを最適化するほうが、再レンダリングの挙動を微調整するよりも、体感パフォーマンスへの影響ははるかに大きくなります。本当のボトルネックがAPI呼び出しの連続や、アイコンライブラリ全体を読み込むbarrelファイルにあるのに、多くの開発者（そしてAIアシスタント）はすぐにuseMemoやReact.memoに飛びつきがちです。
各ルールには簡潔な説明、誤ったコードとその問題点、正しいコードとその説明、さらに補足情報が含まれています。ルールディレクトリにはルールごとのMarkdownファイルがあり、必要に応じてClaudeが詳しい説明を参照できます。
主なポイント：
async-suspense-boundaries：すべてのデータがそろうまでレンダリングを待たず、Suspenseを使ってコンテンツをストリーミングするbundle-barrel-imports：barrelファイル（デザインシステムライブラリでよくある問題）を避け、必要なモジュールを直接インポートするbundle-dynamic-imports：重いコンポーネントにはnext/dynamicを使うrerender-derived-state：生の値ではなく、そこから導出された真偽値を購読するrendering-content-visibility：長いリストにはCSSのcontent-visibilityを使うrendering-activity：表示・非表示の切り替えにはActivityコンポーネントを使う
インストール
使い方
ReactまたはNext.jsのコードを扱うと、このスキルが自動的に有効になります。
対象ユーザー：Claudeがデフォルトで高パフォーマンスなコードを書くことを望むReactおよびNext.js開発者。大規模な利用を見据えてパフォーマンスを重視するコンポーネントライブラリを構築するデザインシステムエンジニア。
SnykのBrian Clarkは、Claudeが生成したコードがセキュリティスキャンに合格するかを検証し、正規表現によるサービス拒否（ReDoS）などの実際の脆弱性を発見しました。VercelのReact Best Practicesのようなスキルを活用すれば、Claudeは高いパフォーマンスを実現し、確立されたパターンにも従うコードを生成できます。
Snykの関連リソース：
4. Vercelのコンポジションパターン
出典： vercel-labs/agent-skills（パス：skills/composition-patterns/） スター数： 19,487 ライセンス： MIT 最終更新： 2026年1月 検証済みのSKILL.md： はい
boolean propsが15個もあるReactコンポーネント（isCompact、showHeader、isRounded、hasBorder、isHighlightedなど）を引き継いだことがあれば、このスキルが解決する問題をご存じでしょう。boolean propの増殖は、デザインシステムでよく見られるアンチパターンのひとつです。コンポーネントが理解しにくく、テストや拡張も難しくなります。
このスキルは、複合コンポーネント、Context Provider、明示的なバリアント、適切な状態管理アーキテクチャなど、拡張性の高いコンポジションパターンをClaudeに教えます。
対象範囲
優先度 | カテゴリ | 影響度 | ルール数 |
|---|---|---|---|
1 | コンポーネントアーキテクチャ | 高 | 2 |
2 | 状態管理 | 中 | 3 |
3 | 実装パターン | 中 | 2 |
4 | React 19 API | 中 | 1 |
主なパターン：
architecture-avoid-boolean-props：動作をカスタマイズするためにboolean propsを追加せず、コンポジションを使います。これは基礎となるルールで、コンポーネントAPIの品質を最も大きく向上させます。architecture-compound-components：共有コンテキストを使って複雑なコンポーネントを構成します（Radix UIの<Select>、<Select.Trigger>、<Select.Content>の連携のように）。state-decouple-implementation：状態管理の方法を把握するのはProviderだけにし、コンポーネントにはすっきりとしたインターフェースを提供します。state-context-interface：依存性注入のために、状態、アクション、メタ情報を備えた汎用インターフェースを定義します。patterns-explicit-variants：booleanによるモード切り替えではなく、明示的なバリアントコンポーネントを作成します（例：<Alert.Destructive>ではなく<Alert isDestructive>）。patterns-children-over-render-props：renderXpropsではなく、childrenを使ってコンポジションします。react19-no-forwardref：React 19以降ではforwardRefを使わず、新しいuse()フックをuseContext()の代わりに使います。
rules/ディレクトリにある各ルールファイルには、誤ったコードと正しいコードの例が説明付きで掲載されており、抽象的な概念を具体的に理解できます。
インストール
使い方
コンポーネントアーキテクチャを扱うと、このスキルが有効になります。
対象ユーザー：デザインシステムエンジニア、コンポーネントライブラリのメンテナー、再利用可能なUIコンポーネントを構築するフロントエンド開発者。ほかの開発者が利用するコンポーネントAPIを設計する際に、特に役立ちます。
5. UI/UX pro max
出典： nextlevelbuilder/ui-ux-pro-max-skill スター数： 29,636 ライセンス： MIT 最終更新： 2026年2月 検証済みのSKILL.md： はい
これは、現在のエコシステムで最も包括的なデザインインテリジェンススキルです。Anthropicのfrontend-designスキルがClaudeに美的センスを与え、Vercelのスキルがエンジニアリングパターンに注力するのに対し、UI/UX Pro Maxは検索可能なデザインデータベースをClaudeに提供します。50種類以上のUIスタイル、97のカラーパレット、57のフォントの組み合わせ、99のUXガイドライン、9つの技術スタックに対応した25種類のチャートを収録しています。
できること
このスキルには、Claudeがデザインデータベースを検索するためのPython CLIツール（scripts/search.py）が付属しています。ワークフローは次の4ステップです。
ステップ1：要件を分析する。ユーザーのリクエストから、製品の種類、スタイルのキーワード、業界、技術スタックを抽出します。
ステップ2：デザインシステムを生成する（必須）。--design-systemを実行し、根拠とともに包括的な推奨事項を取得します。5つの領域（製品、スタイル、色、ランディングページ、タイポグラフィ）を並列検索し、CSVデータセットの推論ルールを適用して、パターン、スタイル、色、タイポグラフィ、効果、避けるべきアンチパターンを含む完全なデザインシステムを出力します。
ステップ3：詳細検索で補足する。各領域（スタイル、チャート、UX、タイポグラフィ、ランディングページ）を個別に検索し、詳細情報を取得します。
ステップ4：技術スタックのガイドラインを取得する。対象の技術スタック（html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose）に応じた実装のベストプラクティスを取得します。
このスキルは、master + overridesパターンによる永続的なデザインシステムにも対応しています。--design-system --persistを実行すると、design-system/MASTER.mdファイル（全体の基準となる唯一の情報源）と、ページごとのオーバーライドを格納するdesign-system/pages/ディレクトリが作成されます。ダッシュボードとマーケティングページで密度のルールを変えながら、基本のカラーパレットやタイポグラフィを共有したい大規模プロジェクトに便利な機能です。
優先度別のルールカテゴリ
優先度 | カテゴリ | 影響度 |
|---|---|---|
1 | アクセシビリティ | 重大 |
2 | タッチ操作とインタラクション | 重大 |
3 | パフォーマンス | 高 |
4 | レイアウトとレスポンシブ対応 | 高 |
5 | タイポグラフィと色 | 中 |
6 | アニメーション | 中 |
7 | スタイルの選択 | 中 |
8 | チャートとデータ | 低 |
アクセシビリティが最も高い優先度に設定されています。最小4.5:1のコントラスト比、視認できるフォーカスリング、内容を説明する代替テキスト、ARIAラベル、キーボード操作、適切なフォームラベルをチェックします。納品前チェックリストでは、ビジュアル品質、インタラクション、ライト／ダークモードのコントラスト、レイアウト、アクセシビリティを確認します。
実用的な工夫のひとつとして、「プロフェッショナルなUIの共通ルール」セクションがあり、見落とされやすい問題をまとめています。絵文字アイコンは使わずSVGを使う。クリック可能な要素にはすべてポインターカーソルを設定する。150～300ミリ秒の滑らかなトランジションを使う。ライトモードのガラス風カードには、bg-white/80ではなく、bg-white/10以上の不透明度を使う。ライトモードとダークモードの両方で境界線の視認性を確認する。
インストール
またはプラグインマーケットプレイスから：
使い方
CLIから直接検索することもできます。
対象ユーザー：一般的なデフォルトを生成するのではなく、製品の種類、業界、美的な方向性に基づいて、Claudeに根拠のあるデザイン判断をさせたいデザイナーや開発者。永続的なデザインシステム機能は、複数ページのアプリケーションを開発するチームに特に役立ちます。
6. Bencium UX designer
出典： bencium/bencium-claude-code-design-skill スター数： 72 ライセンス： 指定なし 最終更新： 2025年11月 検証済みのSKILL.md： はい（SKILL.mdファイル2件：bencium-controlled-ux-designer、bencium-innovative-ux-designer）
Claude Skillsエコシステムの中で、UXデザインの基礎を単一のスキルとして最も徹底的に扱っています。アクセシビリティ、パフォーマンス、美しさなど個別の課題に焦点を当てるほかのスキルとは異なり、28,000文字を超えるBenciumのスキルは、デザイン思考、ビジュアル基準、インタラクションデザイン、アクセシビリティをひとつにまとめた、包括的なUXデザインのリファレンスです。
リポジトリには2つのバリエーションが用意されています。
bencium-innovative-ux-designer：大胆でクリエイティブ、独創的なデザインを推奨します（考え方はAnthropicのfrontend-designスキルに似ていますが、より詳細です）bencium-controlled-ux-designer：創造性よりも一貫性と統制を重視するプロジェクト向けです
どちらにも、ACCESSIBILITY.md、RESPONSIVE-DESIGN.md、MOTION-SPEC.md、DESIGN-SYSTEM-TEMPLATE.mdという同じリファレンスドキュメントが含まれています。
対象範囲
デザインの基本理念：
シンプルさは削ぎ落とすことで生まれる（複雑な状態から始め、最もシンプルで効果的な解決策にたどり着くまで意図的に取り除く）
素材の誠実さ（デジタル素材ならではの特性を受け入れる）
機能的なレイヤー構成（文字のサイズ、色のコントラスト、空間的な関係性で階層をつくる）
細部への徹底したこだわり（すべてのピクセルに意図がある）
一貫性のあるデザイン言語（すべての要素が、その機能を視覚的に伝える）
テクノロジーを意識させない（ユーザーがインターフェースの理解ではなく、コンテンツや目的に集中できる）
ビジュアルデザインの基準：
包括的なカラーシステムの設計（ベースとなるニュートラルパレットとアクセントパレットに加え、背景、テキスト、ボタン、ステータス表示、インタラクティブな状態への適用ルール）
優れたタイポグラフィ（機能的な書体と感情に訴える書体、文字のサイズ体系、間隔と読みやすさのルール、レスポンシブなタイポグラフィ、ボタン、フォームラベル、入力欄、エラーメッセージに関するUI固有の指針）
レイアウトと空間設計（構成のバランス、グリッドの規律、視線の誘導）
インタラクションデザイン：
直接操作のパターン（上下ボタンではなくドラッグ＆ドロップ、別フォームではなくインライン編集）
すべての操作に対して100ミリ秒以内に即時フィードバックを返す
失敗を許容するパターン（予防策と復旧策）
段階的な情報開示（概要、詳細、上級者向け）
最新のUXパターン：会話型インターフェース、適応型レイアウト、大胆なビジュアル表現
参考ドキュメント：
ACCESSIBILITY.md：WCAG 2.1/2.2の包括的なガイダンスRESPONSIVE-DESIGN.md：ブレークポイントの設計方針MOTION-SPEC.md：イージングカーブ、再生時間の一覧、状態ごとのアニメーションパターンDESIGN-SYSTEM-TEMPLATE.md：一貫性のあるデザインシステムを立ち上げるためのテンプレート
インストール
使い方
このスキルは、Webコンポーネント、ページ、アプリケーションの構築時に有効になります。
対象ユーザー：見た目の好みだけでなく、ClaudeにUXデザインの基本を理解し、適用してほしいUXデザイナーやフロントエンド開発者向けです。2つのバリエーション（革新的／統制重視）により、クリエイティブなプロジェクトにも体系的なプロジェクトにも柔軟に対応できます。
7. AccessLintプラグイン
ソース： accesslint/claude-marketplace スター数： 8 ライセンス： MIT 最終更新： 2025年11月 SKILL.mdの検証： 済み（スキルはplugins/accesslint/skills/内：contrast-checker、refactor、use-of-color、link-purpose）
AccessLintは、Claude専用のアクセシビリティツールキットです。この一覧の他のスキルに組み込まれたアクセシビリティ機能（多くの懸念事項のうちの1つとして扱う）とは異なり、AccessLintはアクセシビリティに特化しています。4つの専門スキル、AIレビュアーエージェント、プログラムから色のコントラストを分析するMCPサーバーが含まれています。
内容
4つのスキル：
スキル | 機能 |
|---|---|
| インタラクティブな色コントラストチェッカー。WCAG比を計算してAA/AAAへの準拠を確認し、デザインの意図を保つアクセシブルな代替色を提案 |
| 複数ファイルにわたるアクセシビリティの問題を自動修正。altテキスト、ARIAラベル、セマンティックHTMLの不足を補います。コードスタイルを保ちながら複数ファイルをリファクタリング |
| WCAG 1.4.1準拠チェッカー。色だけで区別されているリンク、色だけで示されるフォームエラー、色だけを使ったステータス表示、ホバー／フォーカス時の表示を色のみに頼るインタラクティブ要素を検出 |
| リンクテキストが内容を適切に説明し、文脈に合っているかを確認 |
1つのエージェント：
accesslint:reviewerエージェントは、複数の手順を踏んだ包括的なアクセシビリティコードレビューを行います。コードベースをスキャンしてWCAG 2.1レベルAおよびAAの適合性に関する問題を探し、コードベースを調査して全体の文脈を把握したうえで、優先度、重大度、WCAGの参照情報を含む構造化された監査レポートを作成します。
MCPサーバー：
このプラグインには、次の3つのツールを提供するMCPサーバー（@accesslint/mcp）も同梱されています。
calculate_contrast_ratio：2色間のWCAGコントラスト比を計算analyze_color_pair：すべてのコンテンツタイプとWCAGレベルについて、合否を詳細に分析suggest_accessible_color：デザインの意図を保ちながらWCAG要件を満たす、アクセシブルな代替色を提案
MCPツールは他のすべてのスキルやエージェントから利用できるため、この一覧にある他のデザインスキルとAccessLintを組み合わせて使えます。特に、カラーパレットを生成するスキルと組み合わせると、コントラストチェックツールが役立ちます。
WCAGの対応範囲
このプラグインは、次の内容を含むレベルAおよびAAへの準拠をチェックします。
知覚可能：altテキスト、セマンティック構造、色のコントラスト
操作可能：キーボード操作、フォーカス管理、フォーカスの可視性
理解可能：明確なラベル、エラーの特定、一貫した動作
堅牢：適切なARIAの使用、アクセシブルな名前とロール
インストール
または手動で：
使い方
対象ユーザー：アクセシビリティを重視するすべてのUI/UXエンジニア。WCAG準拠を徹底したいデザインシステムチーム。アクセシビリティ監査に備える開発者。スター数は少ない（8個）ものの、スキルの品質は高く、対象範囲が明確です。
Snykの関連リソース：
クロスサイトスクリプティング（XSS）とは？（XSSは、不適切に処理されたフォーム入力を悪用することが多く、適切なラベル付けやセマンティックHTMLといったアクセシビリティ上の懸念にも関わるため）
8. Vercel React Native Skills
ソース： vercel-labs/agent-skills（パス：skills/react-native-skills/） スター数： 19,487 ライセンス： MIT 最終更新： 2026年1月 SKILL.mdの検証： 済み
モバイルUI/UXには、独自のパフォーマンス制約やインタラクションパターンがあります。React NativeやExpoのアプリは、メモリが限られたデバイスでも60fpsを維持し、ジェスチャーベースのナビゲーションに対応し、iOSとAndroidで異なるプラットフォーム規約を尊重する必要があります。このスキルは、モバイルUIのパフォーマンスに特に重要なパターンをまとめています。
対象範囲
優先度 | カテゴリ | 影響度 | ルール数 |
|---|---|---|---|
1 | リストのパフォーマンス | 重大 | 8 |
2 | アニメーション | 高 | 3 |
3 | ナビゲーション | 高 | 1 |
4 | UIパターン | 高 | 10 |
5 | 状態管理 | 中 | 5 |
6 | レンダリング | 中 | 2 |
7 | モノレポ | 中 | 2 |
8 | 設定 | 低 | 3 |
リストのパフォーマンスは、モバイルアプリで最もよくあるパフォーマンスのボトルネックであるため、最重要項目に位置付けられています。8つのルールでは、FlatListよりFlashListを使う、リスト項目をメモ化する、コールバック参照を安定させる、インラインのスタイルオブジェクトを避ける、関数をrenderの外に切り出す、リスト内の画像を最適化する、コストの高い処理を項目の外に移す、異種リストで項目タイプを使う、といった点を扱います。
UIパターンには、モバイルに特化した10のルールがあります。
すべての画像にReact Native標準のImageではなく
expo-imageを使うTouchableOpacityではなくPressableを使うScrollViewでセーフエリアに対応する
スクロールビューのヘッダーには
contentInsetを使うネイティブのコンテキストメニューとモーダルを使う
ビューのサイズ測定には
measure()ではなくonLayoutを使うスタイリングには
StyleSheet.createまたはNativeWindを使う
アニメーションのルールでは、GPUアクセラレーションに対応したプロパティを重視します。アニメーションはtransformとopacityのみに適用し、計算が必要なアニメーションにはuseDerivedValueを使い、ジェスチャーを使った操作にはPressableではなくGesture.Tapを使います。
インストール
使い方
対象ユーザー：UIパフォーマンスが重要なモバイルアプリを開発するReact NativeおよびExpoの開発者。クロスプラットフォームのコンポーネントライブラリを保守するデザインシステムエンジニア。
Claudeスキルの探し方とインストール方法（マーケットプレイス、GitHub、コミュニティディレクトリ）
Anthropicは2025年10月にAgent Skillsを発表しましたが、公式のマーケットプレイスサイトは1つに定まっていません。Claude.aiアプリを使うデザイナーは、「カスタマイズ」→「スキル」→「スキルを探す」からスキルを見つけられます。ここにはAnthropicや、Notion、Figma、Atlassianなどのパートナーによるスキルが掲載され、自分のスキルをアップロードすることもできます。Anthropicはgithub.com/anthropics/skillsでサンプルスキルも公開しており、デザインに役立つfrontend-designなどが含まれています。
公式リポジトリ以外にも、コミュニティのスキルが何千とGitHub上に公開されています。travisvn/awesome-claude-skillsやVoltAgent/awesome-agent-skillsのような厳選リストのほか、スキルを集めた非公式のディレクトリサイトもあります。スキルはClaudeが実行する任意のスクリプトを含むSKILL.mdフォルダなので、悪意あるスキルは指示の中にリバースシェルを隠し、読み込まれた時点で実行させることができます。悪意あるスキルを仕込んだマーケットプレイスの調査では、一見無害な指示が連鎖してシェルへのアクセスにつながるため、自動スキルスキャナーは誤った安心感を与えることも判明しています。非公式の提供元から入手したスキルは、インストール前に確認し、アクセスできる範囲を制限しましょう。
スキルのインストール時のセキュリティ
AIスキルでデザインのワークフローを改善しようとする一方で、スキルのエコシステム自体にセキュリティリスクがあるのは皮肉なことです。SnykのToxicSkills調査では、テストしたスキルの13%に重大なセキュリティ上の欠陥があり、一部は認証情報の窃取を積極的に試みていました。SKILL.mdからシェルアクセスへの調査では、スキルファイルにあるわずか3行のMarkdownで、攻撃者にマシンのシェルアクセスを許してしまうことが実証されました。
スキルをインストールする前に、次の点を確認しましょう。
SKILL.mdと同梱スクリプトを確認する。スキルはコンパイル済みバイナリではなく、Markdownとシェルスクリプトでできています。すべての行を読むことができます。提供元を確認する。 AnthropicやVercelなどの確立された組織や、著名なメンテナーによるスキルはリスクが低めです。コミュニティのスキルは、より慎重に確認しましょう。
権限を確認する。
allowed-toolsフロントマターのフィールドで、スキルが使用できるツールを確認できます。ReadとGrepだけを使うスキルよりも、Bashへのアクセスを必要とするスキルは、より慎重な確認が必要です。Snykでスキャンする。 すでにSnyk CodeまたはSnyk MCPインテグレーションを使っている場合は、他のコードと同じようにスキルのスクリプトをスキャンできます。
Pythonスクリプトを含むスキルには、特に注意する。 UI/UX Pro Max（#5）にはPythonの検索ツールが含まれています。実行前に
scripts/search.pyの内容を確認してください。このツールはローカルのCSVデータを参照するため安全ですが、一般的な注意事項として覚えておきましょう。
この一覧にあるスキルは、ライセンスが明確で信頼できる提供元によるものです。それでも、基本原則は変わりません。まず信頼し、そのうえで検証しましょう。
SnykのBrian ClarkがClaude Codeで安全なアプリを構築する方法を紹介し、AIが生成した出力に脆弱性がないかスキャンします。スキルをインストールする前に、そのスクリプトに適用できるのと同じスキャンして修正するワークフローです。
まとめ
Claude Skillsは、「単なるプロンプト」と「完全なインテグレーション」の中間に位置します。UI/UXエンジニアにとって、これは現実的な課題を解決します。AIコーディングアシスタントは強力ですが、適切なコンテキストを与えないと、ありきたりな出力になりがちです。練り上げられたスキルは、そのコンテキストを効率よく読み込める形でまとめ、必要な場面で有効にするものです。
スキルは大きく次のカテゴリに分けられます。
クリエイティブな方向性：AnthropicのFrontend DesignスキルとBenciumのUX Designerスキルは、ClaudeがAIの既定値ではなく、独自性と意図のあるデザインを生み出すよう促します。
デザインの知見：UI/UX Pro Maxは、スタイル、配色、フォント、UXガイドラインを検索できるデータベースをClaudeに提供します。
品質とコンプライアンス：VercelのWeb Design GuidelinesとAccessLintは、出力がアクセシビリティ基準とWebのベストプラクティスを満たすようにします。
エンジニアリングパターン：VercelのReact Best Practices、Composition Patterns、React Native Skillsは、プロ仕様のコンポーネントライブラリとプロトタイプを分けるパフォーマンスやアーキテクチャの知見を体系化しています。
最も効果的なのは、複数のカテゴリのスキルを組み合わせることです。デザイン性を高めるにはFrontend Designスキル、アクセシビリティ基準への準拠にはWeb Design Guidelinesスキル、パフォーマンスの向上にはReact Best Practicesスキルをインストールしましょう。これらのスキルは互いに競合せず、Claudeの出力にそれぞれ異なる品質の層を加えて補完し合います。
UI/UXコミュニティがAIツールを積極的に取り入れているのは、デザイン上の判断を置き換えるためではありません。デザイナーやフロントエンド開発者がやり方を熟知しているものの、面倒に感じがちな作業の手間をなくすためです。たとえば、アクセシブルなコンポーネントのバリエーションのひな形作成、コントラスト比の確認、ベストプラクティスのチェックリストに基づく監査、レスポンシブレイアウトの作成などが挙げられます。スキルを使えば、こうした作業を正式な形で委任できます。
フロントエンド開発にすでにClaude Codeを使っているなら、これらのスキルをいくつかインストールするのにかかる5分は、すぐに元が取れる投資です。Claudeがタイポグラフィに個性のあるランディングページを生成したり、本番環境に反映される前にアクセシビリティ違反を検出したり、propsだらけのコンポーネントをすっきりしたコンパウンドコンポーネントのパターンにリファクタリングしたりするのを、最初に体験したときに実感できるでしょう。
Claude SkillsではなくMCPサーバーをお探しの場合は、UI/UXエンジニア向けMCPサーバー14選をご覧ください。
ホワイトペーパー
Python環境に潜むAIセキュリティの危機
開発スピードが急上昇する中、AI環境が何にアクセスできるか、本当に把握できていますか？