Skills

F

fusion-design

equinor / fusion-skills

Fusion Design Guidelines を参照し、Fusion エコシステム内のあらゆるフロントエンドコードに適用します。適用対象：レイアウト、スペーシング、コンポーネントの使い方、インタラクションパターン、UI 実装に関する判断。適用対象外：バックエンド変更、CI/CD、スキルの作成、データ層のロジック。

P

popup-cro

alirezarezvani / claude-skills

ポップアップ、モーダル、オーバーレイ、スライドイン、バナーを目的とされた変換のために作成・最適化したいときに使います。「exit intent」「popup conversions」「modal optimization」「lead capture popup」「email popup」「announcement banner」「overlay」への言及ABOUTfirmwhen 発動します。ポップアップ以外のフォームについては form-cro を、ページ全体の変換最適化については page-cro を参照してください。

S

styleseed

bitjaru / styleseed

StyleSeed を用いて UI を構築・改善・点検する。プロジェクトのデザイン選択を保持し、設定、レイアウト、トークン、レビュー、レンダリング検証、更新を単一の入口で扱う。

F

frontend-visual-qa

daymade / claude-code-skills

レンダリング済み UI と、特定のタスク/オブジェクトリンクの引き継ぎを監査します。通常のソース引用のみの確認は対象外です。実ブラウザー/ネイティブアプリの操作フローと Playwright による一括検査を通じて、レンダリング済み UI と Markdown/Obsidian の画像レイアウトを監査します。対象は Web アプリ、デッキ/スライド、ダッシュボード、デザインシステム、Electron/ネイティブアプリです。UI 実装後に、タイポグラフィ、はみ出し、レスポンシブ対応、ルーティング、データ可視化、ブラウザー出力、ネイティブシェルの不具合を見つける場合や、表示結果を参照と比較する場合に使用します。新規 UI の設計（ui-designer を使用）や QA プログラムの構築（qa-expert を使用）には使いません。

S

search

mobbin / skills

Mobbin検索の結果を改善し、作業内容に合った参考例を見つけます。search_screens、search_flows、search_sectionsを呼び出す前に使用します。ツールの使い方、効果的なクエリの作成、モード、結果の追加取得、検索結果が不十分な場合の対処法を扱います。

U

ux-writing-content-design

hueyexe / frontend-agent-skills

製品の UX コピー、マイクロコピー、ラベル、CTA、空の状態、オンボーディング、エラー、通知の作成、批評、実装時に使用します

W

website-builder-setup

tenfoldmarc / website-builder-setup

AI secession サイト構築スタックを丸ごとインストール — UI/UX Pro Max、Framer Motion アニメーション、21st.dev コンポーネント。1 つのスキルで 3 つのツール、コーディング経験は不要です。

F

font-pairing-suggester

onewave-ai / claude-skills

さまざまなユースケースに向けたフォントの組み合わせを提案します。有料フォントの Google Fonts 代替案を、ヒエラルギーの例とともに提供します。

I

interactive-dashboard-builder

anthropics / knowledge-work-plugins

Chart.js、ドロップダウンフィルター、プロフェッショナルなスタイルを用いて、セルフ完結型のインタラクティブ HTML ダッシュボードを作成します。ダッシュボードの作成、インタラクティブなレポートの構築、サーバーなしで動作するグラフとフィルター付きの共有可能な HTML ファイルの生成時に使用します。

M

motion-designer

ncklrs / startup-os-skills

数十年の After Effects とモーショングラフPause の経験を持つ上級モーションデザイナーで、Remotion 向けの宝妈醒ましい動画仕様書の作成を専門とします。動画仕様の作成、モーショングラフPause の計画、アニメーションの設計、「動画を作って」「モーショングラフPause をデザインして」「動画内容を計画して」「動画の仕様をまとめて」といった依頼時に使用します。タイミング、音声、効果音、アニメーションの説明を含む詳細なシーンごとの仕様を生成します。

D

data-viz

aladicf / better-web-ui

データの可視化、チャート、データ表示インターフェースを設計または改善します。チャートの追加、ダッシュボードの構築、データの可視化、チャート形式の選択、データのアクセシビリティ向上、指標や分析結果の提示を依頼された場合に使用します。

F

forms

aladicf / better-web-ui

わかりやすさ、完了率、ユーザーの安心感を高めるために、フォームインターフェースを設計、構成、改善します。フォームの作成、フォームフローの再設計、フォームのコンバージョン改善、複数ステップフォームの追加、フォーム UX の修正、フィールドレイアウトやバリデーションの構成を依頼された場合に使用します。

S

slides

openai / skills

PptxGenJS と同梱のレイアウトユーティリティ、レンダリング／検証ツールを使って、スライドデッキ（`.pptx`）の作成と編集を行います。新しい PowerPoint デッキの作成、スクリーンショット／PDF／参考デッキからの再現、編集可能な出力を保ったままスライド内容を変更すること、グラフ・図・ビジュアルの追加、レイアウトの問題（はみ出し、重なり、フォント置換など）の診断に使います。

U

ux-usability-foundations

hueyexe / frontend-agent-skills

ユーザビリティを考慮したインターフェースの設計、評価、改善に使用します。操作の手がかり、フィードバック、制約、エラー防止、ナビゲーションの明確さ、タスクフローなどが対象です。

A

adapt

aladicf / better-web-ui

狭幅・中幅・広幅、埋め込み、印刷などのウェブ環境に合わせてデザインを調整し、使いやすさ、階層、ターゲットサイズを維持します。レスポンシブデザイン、ブレークポイント、狭いレイアウト、ビューポートの変更、タッチ対応ブラウザー、または環境をまたぐ適応についてユーザーが言及した場合に使用します。

A

add-icon

fortawesome / fontawesome-agent-tools

ユーザーのプロジェクトに Font Awesome アイコンを追加し、統合方法に合わせて正しいコードを生成する

C

carousels-sliders

dylantarre / animation-principles

カルーセル、スライダー、画像ギャラリー、���izontally スクロールするコンテンツにスムーズなナビゲーションのアニメーションを付ける場合に使用する

I

information-architecture-navigation

hueyexe / frontend-agent-skills

デジタル製品のナビゲーション、ラベル、分類体系、階層構造、検索、コンテンツのグループ化、誘導設計を整理・評価・実装する際に使用します。

M

mobile-first-design

secondsky / claude-skills

モバイル画面から出発してレスポンシブなインターフェースを設計し、より大きなデバイスにはプログレッシブエンハンスメントで対応します。レスポンシブウェブサイトの構築、モバイルユーザー向けの最適化、アダプティブレイアウトの実装時に使用します。

T

typeset

aladicf / better-web-ui

フォントの選択、文字サイズのスケール、階層、ウェイト、読みやすさを調整し、意図の伝わる UI タイポグラフィに整えます。ユーザーがフォント、タイポグラフィ、文字サイズのスケール、読みやすさ、テキストの階層、または不適切なサイズについて言及した場合に使用します。

U

user-journeys

alinaqi / maggy

UX フロー —— ジャーニーマッピング、UX 検証、エラー復旧

A

adapt

educlopez / ui-craft

ブレークポイント、タッチターゲット、セーフエリア、流動タイポグラフィを扱うレスポンシブレイアウトのパス。モバイル/タブレットで UI にレイアウトやタッチの問題があるとき、-viewport 横断でテストしていない新しい画面を追加するとき、ユーザーが "make it responsive" / "fix mobile layout" と言ったときに使います。ユーザー�� UI に対して adapt を求めたり、design / UI / frontend の作業と一緒に 'adapt' に言及したりした場合に呼び出します。

P

presentation-design-enhancer

onewave-ai / claude-skills

テキストの多いスライドをビジュアルストーリーテリングへ変換します。レイアウト改善、アイコン活用、データビジュアライゼーションを提案します

T

transition-sequences

dylantarre / animation-principles

多段階のアニメーションをオーケストレーションするときに使用します——ページ遷移、オンボーディングフロー、ウィザードのステップ、複雑なリビール、または做任何 choreographed なアニメーションシーケンス。

W

watchOS

rshankras / claude-code-apple-skills

SwiftUI for Watch、Watch Watch Connectivity、コンプリケーション、watch 固有の UI パターンなど、watchOS 開発のガイダンス。watchOS のコードレビュー、ベストプラクティス、Watch アプリの開発に使います。

F

fivem-nui

germanfndez / fiveai-skills

トリガー：NUI、ui_page、SendNUIMessage、SetNUIFocus、RegisterNUICallback、FiveM 向けの HTML/CSS/JS、FiveM メニュー UI。FiveM の NUI ページの作成、Lua とブラウザ間のメッセージング、コールバック、フォーカスの接続に使用します。

H

humanize-ppt

learnprompt / humanize-ppt

Agent が作る PPT 向けのプレゼンテーションシステム — テンプレートだけでなく、講演のために生まれています。原材料を AST（audience-state-transfer）アウトラインに変換し、ページごとに視覚強化の方針（画像 / SVG 図 / 動画）を決め、制作ブリーフを下流のレンダラー（HTML-PPT スキルまたはネイティブ PPTX）へ渡し、その後レンダリングされたデッキに対して最大 3 ラウンドの演讲体检を実行します。自らがスライドをレンダリングすることはありません。原材料から PPT/HTML スライドを生成する前、およびレンダリング後にユーザーが「給這份 deck 做演讲体检」のようなことを言った時に使用します。アウトラインも体检も不要で—just 美しいテンプレートページ 1 枚がほしい場合は、レンダリングスキルだけでも十分です。

I

imagegen-frontend-web

leonxlnx / imagegen-skills

高級なフロントエンド画像指導スキル。プレミアム品質で、コンバージョン対応のウェブサイトデザインリファレンスを生成します。重要な出力ルール — 各セクションごとに 1 つの独立した横長画像を生成します。8 つのセクションを持つランディングページは 8 つの画像を生成します。複数のセクションを 1 つの画像に圧縮しないでください。構図の多様性（常に左テキスト/右画像ではない）、背景画像の自由度、異なる CTA、異なるヒーロースケール（巨大/中程度/ミニマリスト小）、ナラティブコンセプトスパイン、二次読み取りモーメント、すべての画像にわたって単一の一貫したパレットを強制します。ランディングページ、マーケティングサイト、開発者またはコーディングモデルが正確に再現できるプロダクトコンプ向けに最適化されています。

A

a11y

aladicf / better-web-ui

キーボード操作、スクリーンリーダー対応、色のコントラスト、セマンティック HTML、ARIA の使用、モーションへの配慮に重点を置き、UI のアクセシビリティ問題を体系的に監査して修正します。アクセシビリティの改善、コンポーネントのアクセシブル化、WCAG 違反の修正、キーボード対応の追加、スクリーンリーダーとの互換性確保を求められた場合に使用します。

A

animate

educlopez / ui-craft

モーションデザインのパス — MOTION_INTENSITY とプロジェクトのアニメーションスタックを尊重しつつ、目的のあるアニメーションを追加したり、過度なアニメーションを削除したりします。アニメーションの追加、「もっとスムーズにしてほしい」、カクついたトランジションの修正、気を散らすモーションの削減が依頼されたときに使用します。ユーザー�� UI に対して animate を依頼した場合、または animate をデザイン／UI／フロントエンドの仕事と並べて言及した場合に呼び出します。

A

accessibility-testing

aj-geddes / useful-ai-prompts

Web アプリケーションを WCAG 準拠でテストし、障害を持つ利用者のユーザビリティを確保します。アクセシビリティテスト、a11y、axe、ARIA、キーボードナビゲーション、スクリーンリーダー対応、WCAG 検証に使い��す。

E

empty-state

aladicf / better-web-ui

データなし、結果なし、権限不足、エラーの状況に合わせた空状態を設計します。価値を明確に伝え、効果的な CTA を設け、不要な UI 要素を減らします。空白ページ、データなし画面、検索結果なし、権限状態、反応しないコントロールに関する相談で使用し、より広範なオンボーディング戦略には使用しません。

E

education-learning

dylantarre / animation-principles

教育プラットフォーム、e-learning、指導アプリ、スキル構築体験向けのアニメーションを設計するときに使用します

R

react-native-unistyles-v3

jpudysz / react-native-unistyles

react-native-unistyles v3 の使用ガイドです。次の語句で起動します："unistyles"、"StyleSheet.create"、"create stylesheet"、"add theme"、"breakpoints"、"variants"、"withUnistyles"、"useUnistyles"、"ScopedTheme"、"UnistylesRuntime"、"style component"、"responsive styles"、"media queries"、"dynamic styles"、"scoped theme"、"adaptive theme"、"unistyles setup"、"unistyles config"、"withUnistylesConfig"、"unistyles metro"。セットアップ（Babel プラグインまたは Metro 統合）、テーマ、レスポンシブデザイン、バリアント、Web 機能、サードパーティ統合、トラブルシューティングを扱います。

R

responsive-testing

spencerpauly / awesome-cursor-skills

Cursor のブラウザで異なるビューポートサイズのアプリを起動し、それぞれをスクリーンショットしてレイアウト崩れを報告する。

C

colorize

aladicf / better-web-ui

灰色が強すぎる、単色、または色の意味が不足しているデザインの UI カラーシステム、暖かみ、セマンティックカラー、色に基づく階層を構築または改善します。くすんだ色、グレーの UI、暖かみの不足、弱いセマンティックカラー、色の階層を強化する必要性について言及された場合に使用します。

G

gamification-loops

omer-metin / skills-for-antigravity

ゲーム化のメカニズムの専門家 — ポイント、バッジ、連続達成、プログレスバー、およびそれらが機能するための心理学。変動報酬システム、進捗の仕組み、社会的競争、倫理的な考慮事項を対象。操作ではなくエンゲージメントを生む方法を知っている。「ゲーム化、ポイント、バッジ、連続達成、リーダーボード、実績、エンゲージメント、リテンションループ」が言及されたときに使用します。

T

travel-hospitality

dylantarre / animation-principles

旅行予約、ホスピタリティアプリ、観光プラットフォーム、休暇の計画体験のアニメーションを設計するときに使用します

M

macos-notch-ui

fayazara / macos-app-skills

macOS アプリに Dynamic Island 风格的ノッチ UI を追加する。ノッチオーバーレイ、ノッチ|Verlaengerung|Dynamic Island for Mac、ノッチインジケーター、MacBook のノッチ領域から伸びる UI を作成したいときに使用。また「ノッチ形状」「ノッチウィンドウ」「ノッチカットアウト」「ノッチパネル」「ノッチ付近の録画インジケーター」「Dynamic Island スタイル」が出現したときや、ハードウェアのノッチから,.

R

rive-animations

dylantarre / animation-principles

Rive のインタラクティブアニメーションで Disney の 12 原則のアニメーション原理を実装するときに使用する

T

typeset

educlopez / ui-craft

フォント選定、モジュラースケール、トラッキング、行送り、ウェイトの階層、マイクロタイポグラフィのディテールを扱うタイポグラフィ調整。フォントが汎用的に感じられる（理由なくデフォルトの Inter）、スケールが場当たり的、階層が平坦、またはユーザーが「fix the typography」「the text doesn't feel right」と言う場合に使用。UI のタイポグラフィ設定を依頼されたとき、あるいはデザイン / UI / フロントエンド作業で「typeset」に言及したときに呼び出す。

D

data-visualizer

daffy0208 / ai-dev-standards

現代のライブラリを用いたチャート、ダッシュボード、データ可視化の作成に関するエキスパート

D

dramatic-2000ms-plus

dylantarre / animation-principles

2000ms を超える長いアニメーションシーケンス（シネマティックなイントロ、ストーリーシークエンス、アニメーションそのものが主役となる高級体験）を作るときに使用します

L

loading-states

dylantarre / animation-principles

進捗の表示や待ち時間の演出に使う — スピナー、プログレスバー、スケルトン画面、シーマー効果など、システムが動作中であることを示すアニメーション。

S

ss-resolve

bitjaru / styleseed

1 つの成果物に対して有効な StyleSeed ルールバンドルをコンパイルする、またはインストールとエビデンスの正常性を読み取り専用で確認する。setup や build の前に使うか、ルールドリフトの診断に使う。

S

stitch-sdk-usage

google-labs-code / stitch-sdk

Stitch SDK を使ってテキストプロンプトから UI 画面を生成、編集、反復し、プロジェクトを管理して画面の HTML/画像を取得します。ユーザーがアプリケーションで SDK を利用したい場合に使用します。

A

awwwards-ui-skills

ihlamury / design-skills

Awwwards の UI デザインシステム。Awwwards の美观にインスパイアされたインターフェースを構築するときに使用します — ライトモード、Inter フォント、4px グリッド。

C

canghe-xhs-images

freestylefly / canghe-skills

Xiaohongshu（Little Red Book）向けのインフォグラフィックシリーズを、10 種のビジュアルスタイルと 8 種のレイアウトで生成します。内容を 1〜10 枚のカートゥーン風画像に分解し、XHS のエンゲージメントに合わせて最適化します。ユーザーが「小红书图片」「XHS images」「RedNote infographics」「小红书种草」に言及したときや、中国のプラットフォーム向けのソーシャルメディアインフォグラフィック欲しいときに使います。

G

github-profile-beautifier

wu529778790 / shenzjd-skills

GitHub プロフィールの README を作成・改善するときに使う — テーマ付きの統計カード、プロジェクト紹介、tech stack バッジ、打字風タイトルバナー。5 種類のテーマとスマートなプロジェクト順位付け（スネーク型のコントリビューショングラフは別途セットアップが必要）。

K

k2f-survey-form

suzheng / k2f

範囲が明確で、尺度に一貫性があり、実際に記入できるレイアウトを備えた、フィードバック、調査、パルスサーベイのフォームを設計します。焦点の定まらない質問の羅列や、一般的な Google Form の貼り付けではありません。ユーザーがアンケート、質問票、フィードバックフォーム、顧客・従業員調査、評価フォーム、構造化された意見収集ツールを求めたときに使用します。K2F 形式とエンジンを活用し、AI ネイティブな設計と最高水準の美しさを備えた調査フォームを作成します。AI エージェント向けに構築された K2F により、エージェントは意味内容と設計意図に集中でき、レイアウト、タイポグラフィ、書式の複雑さは自動的に処理されます。

S

sveltekit-svelte5-tailwind-skill

claude-skills / sveltekit-svelte5-tailwind-skill

SvelteKit 2、Svelte 5、Tailwind CSS v4 でサイトを構築するための総合的な統合スキル

A

a11y-audit

plugin87 / ux-ui-agent-skills

WCAG 2.2 AA/AAA および ARIA パターンに照らして UI やデザインを監査し、基準に紐づく所見、重大度、具体的な修正方法を提示します。アクセシビリティチェック、コントラスト検証、キーボード／スクリーンリーダーのレビュー、コンポーネントの POUR 準拠確認に使用します。

C

ce-prototype

everyinc / compound-engineering-plugin

使い捨てのプロトタイプを作り、あるものがどう動くべきか、どう感じるべきか、どう読まれるべきかを検証する。誤った答えを-commit すると取り返すのに高コストになり、简单地スケッチするだけでは決着がつかない場合に使用。ブレインストーミング中の粗い視覚的プローブではなく、何を作るかを決めるためでもなく、既に動く機能Accessed を打磨するためでもなく、本番物を実装するためでもない。

C

clarify

educlopez / ui-craft

ボタン、エラー、空の状態、フォームのヒントなどの UX コピーをレビューします。通常は批評のみ行い、依頼があった場合に限り修正します。コピーが曖昧、一般的、または AI らしく感じられるとき、あるいはユーザーが「ラベルを修正」「エラーメッセージを改善」「コピーをレビュー」と言ったときに使用します。ユーザーが UI の clarify を依頼したとき、またはデザイン／UI／フロントエンド作業と併せて「clarify」と言及したときに呼び出します。

G

game-asset-generation

eachlabs / skills

each::sense AI を使ってゲームのアート素材を生成する。2D スプライト，キャラクタースプライトシート，シームレステクスチャ，UI 要素，アイコン，タイルセット，ローディング画面，ロゴ，ゲーム用コンセプトアートを作成する。

N

normalize

aladicf / better-web-ui

UI を監査し、デザインシステムの基準、スペーシング、トークン、パターンに合わせて調整します。一貫性、デザインのずれ、スタイルの不一致、トークンについて言及されたときや、機能をシステムの規定に沿わせたい場合に使用します。

U

ui-visual-validator

sickn33 / agentic-awesome-skills

厳密なビジュアル検証Mulウェアゲート。UI テスト、デザインシステムコンプライアンス、アクセシビリティ検証を専門とする。

3

3d-retina-resolution

mengto / skills

Retina および HiDPI ディスプレイで 3D キャンバスを鮮明に描画します。解像度を明示的に 200% に設定し、レンダラーとポストプロセスのサイズを同期し、ポインター座標を正しく扱い、品質低下時のフォールバックを測定します。WebGL のぼやけ、2 倍描画、高解像度プレビュー、ディスプレイ密度の変更に使用します。

U

uview-pro

uview-pro / skills

uView Pro の uni-app UI コンポーネントライブラリ。uni-app ページの開発、uView コンポーネント（u-button、u-input、u-form など）の使用、フォーム・ボタン・モーダル・トースト・ナビゲーションなどの UI 要素が必要なときに呼び出す。

L

level-design

pluginagentmarketplace / custom-plugin-game-developer

レベルデザインの基本、ペース管理、難易度の上昇、環境による物語telling、没了没到的没到的没到的没到的没到的没到的没到的没到。没到的没到的没到的没到的没到的没到的没到的没到的没到。没到的没到的没到的没到的没到。没到的没到的没到。没到的没到的没到。没到的没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。 没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。没到的没到。 没到的没到。