Skills

F

flutter-accessibility-audit

flutter / agent-plugins

説明はまだありません

2

21st-ui-build

21st-dev / skill

現在のプロジェクトのデザインコンテキスト、既存コンポーネント、根拠のある 21st のインスピレーションを活用して、本番向け UI を構築または大幅に変更します。既存の Web プロジェクトでページ、セクション、コンポーネントの実装、レスポンシブな再設計、ビジュアルの仕上げを行う場合に使用します。「この UI を作って」「この画面を実装して」「このページを本番環境向けに仕上げて」「21st を使ってインターフェースを作って」といった依頼が対象です。ビジュアルの方向性が未定の場合は先に 21st-ui-explore を、批評のみの場合は 21st-ui-review を使用します。

R

react-ui-patterns

sickn33 / agentic-awesome-skills

ローディング状態、エラー処理、データ取得のための最新React UIパターン。UIコンポーネントの構築、非同期データの処理、UI状態の管理に使用。

W

webgl-laser

mengto / skills

細い白熱色の垂直コア、控えめなブランドカラーの光輪、ビーム周囲の柔らかな煙を備えた、固定表示の全画面 WebGL レーザー背景エフェクトを作成します。レーザー背景エフェクト専用です。ページ全体のレイアウト、コピー、汎用ヒーローシーン、パーティクル、無関係なモーションシステムには使用しないでください。

F

framed-grid-layout

mengto / skills

細く見やすい境界線、L字型のコーナーブラケット、控えめな斜線テクスチャ、厳密に揃えたセクションを備えた、ミニマルなフレーム付きグリッドレイアウトを作成します。クリーン、中立的、正確、構造的、エディトリアル、技術的、またはガイド枠付きのウェブレイアウトを求められた場合に使用します。

L

landing-page

jezweb / claude-skills

概要から、完全なデプロイ可能なランディングページを生成します。Tailwind CSS（CDN 経由）、レスポンシブデザイン、ダークモード、セマンティック HTML、OG メタタグを含む自己完結型の単一 HTML ファイルを出力します。セクションは、CTA 付きヒーロー、機能、ソーシャルプルーフ、価格（任意）、FAQ、フッターです。マーケティングページ、製品ローンチページ、近日公開ページ、その他の単独ランディングページの構築に使用します。起動語句：「landing page」「create a page」「marketing page」「launch page」「coming soon page」「one-page site」。

T

threejs-animation

iart-ai / webgl-animation-skills

ユーザーが「3D ヒーローセクションや WebGL 背景を構築する」「Three.js シーンをアニメーション化する」「GLTF アニメーションクリップを再生またはクロスフェードする」「カメラを移動／補間する、またはスクロールに連動させる」「InstancedMesh で数千のオブジェクトを描画する」「React Three Fiber (R3F) のモーションを設定する」「bloom／DOF のポストプロセスを追加する」「Three.js/R3F のアニメーションを滑らかにし、メモリーリークを防ぐ（アンマウント時にジオメトリ／マテリアル／テクスチャを破棄し、GPU メモリーを解放する）」と依頼した場合に使用します。シーン、レンダーループ、カメラ移動、GLTF AnimationMixer、インスタンシング、スクロール連動 3D、R3F、アニメーションのパフォーマンスとリソース解放を扱います

S

scroll-scrubbed-word-reveal

mengto / skills

スクロールの進行に合わせてマークアップされたテキストを一語ずつ表示し、意味を持つインラインリンク、強調、レスポンシブな折り返し、視差効果を抑えた場合の読みやすさを保ちます。スクロールの速度に合わせて理解を促し、タイピングを模倣しない見出し、引用、マニフェスト、製品メッセージ、オンボーディングメッセージ、編集コンテンツに使用します。

M

mermaid-tools

daymade / claude-code-skills

Markdown ファイルから Mermaid 図を抽出し、同梱スクリプトを使って高品質な PNG 画像を生成します。Mermaid 図の作業、図の PNG 変換、Markdown からの図の抽出、または Mermaid コードを含む Markdown ファイルの処理時に有効になります。

M

mesh-gradient-dark-blue-clean

mengto / skills

背景レンダリング、ヒーローシェル、ナビゲーション、フローティングノード、枠付きセクション、CTA、モーション全体に、未来的で高級感のあるクリーンなダークブルーのメッシュグラデーションデザインシステムを作成します。ほぼ黒に近いネイビーの基調、プロシージャルなブルーメッシュの雰囲気、規律あるミニマルな構成、インフラや惑星を思わせる奥行きが必要なインターフェースに使用します。

C

clean-minimal-beige-light-mode

mengto / skills

温かみのあるニュートラルなシェル、控えめなプロセスグリッド、抑制されたアクセントカラー、上品な低コントラスト構造を備えた、すっきりとしたミニマルなベージュのライトモードデザインシステムを作成します。

D

dark-glass-clean-layout

mengto / skills

すりガラス調のプレミアムなシェル、すっきりした複数列のワークスペース構造、浮遊するデータカード、控えめな奥行き感を備えたダークガラスのレイアウトシステムを作成します

F

frontend-skill

openai / skills

視覚的に優れたランディングページ、ウェブサイト、アプリ、プロトタイプ、デモ、ゲーム UI の制作を求められた場合に使用します。節度ある構成、画像を軸とした階層、一貫したコンテンツ構造、洗練されたモーションを徹底し、ありきたりなカード、弱いブランディング、UI の雑然さを避けます。

G

gemini-carousel

charlie947 / social-media-skills

Gemini を使って、ブランドに沿った LinkedIn のスライド形式カルーセルを生成します。元のコンテンツからデザインブリーフを作成し、承認を待ってから各スライドの画像生成プロンプトを出力します。縦型フォーマットは 1080x1350 です。ユーザーが "carousel"、"build a carousel"、"turn this into a carousel"、"gemini carousel" と言った場合、または複数スライドの LinkedIn コンテンツを希望する場合に使用します。ブリーフ作成と画像生成の間には必ず承認ステップを設けます

G

gooey-blob-system

mengto / skills

SVGフィルターを使って、複数の形状が一つの流体状の形に融合する、粘性のあるブロブシステムを作成します。重なり合う円にガウスぼかしとカラーマトリックスフィルターを組み合わせ、連続した有機的な塊を生成します。形状は距離に応じて視覚的に融合・分離します。フィルターによる融合（ぼかし＋しきい値効果）、硬い縁のない柔らかな有機的境界、複数の独立した形状が一つのシステムとして振る舞うこと、流体的で一体感のある滑らかな連続モーションを重視します

P

particle-system

iart-ai / webgl-animation-skills

ユーザーが「パーティクルシステムを構築」「紙吹雪／雪／煙／火花を作成」「接続ドット／星座状のネットワーク背景を作成」「フローフィールドまたはcurl-noiseのパーティクル効果を追加」「Three.js Pointsで数千のGPUパーティクルをレンダリング」「力を使ってエミッターをアニメーション化」と依頼した場合に使用するスキルです。パーティクルごとの積分、力、フローフィールド、一括／連続放出、空間グリッドによる接続ドット、GPUポイントとシェーダーを扱います。

N

number-details

mengto / skills

装飾的な 01、02、03 の数字マーカーを追加します

T

technical-wireframe-info-layout

mengto / skills

モノクロのテクニカルなワイヤーフレームデザインシステムを作成します。分解された3D構造、コネクターの注釈、最小限の情報ラベル、精密なダーク診断フレームを備えます

C

corner-diagonals

mengto / skills

ボタン、カード、パネル、コンテナーシェルに、斜めにカットした角や面取りエッジを適用します。丸みのあるピル型や単純な長方形ではなく、精密な幾何学的フレーミング、SF風 UI の表面、切り欠き角のコントロール、設計されたシャープなコンテナーが必要な場合に使用します。

S

split-layout-technical

mengto / skills

デュアルパネル、繊細なフレーム線、等幅フォントのメタデータ、控えめなエディトリアルタイポグラフィ、高級感のあるインセット面を備えたテクニカルな分割画面デザインシステムを作成します。

U

ui-craft

educlopez / ui-craft

ありきたりなAI風のインターフェースを避けるためのUI設計・実装に使用します。粗雑な仕上がりを避けるルール、コーディング前に必須の要件確認フェーズに加え、レイアウト、タイポグラフィ、色、動き、アクセシビリティ、ダッシュボード、テーブル、ランディングページ、テーマ設定、仕上げに関するガイダンスを提供します。UIコードの編集や、コンポーネント、ページ、画面、レイアウト、アニメーション、レスポンシブ動作、デザインシステムのレビュー・改善時に起動します。

I

ionic-expert

capawesome-team / skills

AIエージェントが Ionic Framework を扱うための包括的な入門ガイドです。コア概念、コンポーネント、CLI、テーマ設定、レイアウト、ライフサイクル、ナビゲーションに加え、Angular、React、Vue 固有のパターンを扱います。このコレクションの他の Ionic スキルと組み合わせることで、アプリ作成、フレームワーク統合、アップグレードなど、特定のトピックについてさらに詳しく学べます。

H

high-contrast-skeuomorphic-clean

mengto / skills

高コントラストでクリーンなスキューモーフィックデザインシステムを作成します。成形されたダークな表面、明瞭な明暗の分離、触感のあるくぼみの奥行き、控えめなシグナルカラーのアクセントを取り入れます。

I

interactive-portfolio

sickn33 / agentic-awesome-skills

実際に就職や顧客獲得につながるポートフォリオの構築に精通 -

2

21st-ui-explore

21st-dev / skill

現在のプロジェクトのデザインシステムと 21st のインスピレーションに基づき、意味のある複数の異なる UI の方向性を探索、比較します。ユーザーが選択肢、バリエーション、コンセプト、リデザインの方向性、ビジュアル実験を求める場合や、新しいインターフェースの見た目が定まっていない場合に使用します。「3つの方向性を見せて」「別案を探して」「このページはどんな見た目にできる？」「バリエーションを生成して」などの依頼が対象です。方向性がすでに決まっており、単純な実装を行う場合には使用しないでください。

A

aura-asset-images

mengto / skills

デザインモックアップやマーケティング向けに、UnsplashのようなAura Assets（aura.build/assets）の高品質なストック風画像が必要なときに使用します。背景、抽象的な壁紙、建築、ポートレート、顔写真が対象です。aura.build/assetsでタグ検索するワークフローを含み、カテゴリごとに実際の画像URLを5件返すほか、解像度やアスペクト比の使い分けに関する実用的なガイダンスを提供します。

B

book-serif-index

mengto / skills

セリフ体を主体としたページ、等幅フォントの索引ナビゲーション、古紙の質感、余白注記、上質なカタログフレームを備えた、アーカイブ風のブックリーダーデザインシステムを作成します。

O

openui

thesysdev / skills

OpenUI による生成 UI：モデルの応答をライブインターフェースとして表示するアプリやエージェントを構築します。OpenUI、OpenUI Lang、`@openuidev/*` パッケージ、OpenUI Gateway、Autofix、`@openuidev/cli`（create、generate、deploy）を扱うタスクや、生成 UI のチャット、エージェント、ダッシュボードを求める場合に使用します

B

blue-laser-clean-glass-layout

mengto / skills

細いブルーレーザーの雰囲気、フロスト加工のプレミアムなシェル、洗練されたダッシュボード構成を備えた、すっきりとしたダークガラスのレイアウトシステムを作成します。

I

ionic-app-development

capawesome-team / skills

コア概念、コンポーネントリファレンス、CLIの使い方、レイアウト、テーマ設定、アニメーション、ジェスチャー、開発ワークフロー、トラブルシューティングなど、Ionic Frameworkの一般的な開発をエージェントに案内します。カテゴリ別に、すべてのIonic UIコンポーネントのプロパティ、イベント、メソッド、スロット、CSSカスタムプロパティを扱います。新しいIonicアプリの作成には使用せず（ionic-app-creationを使用）、フレームワーク固有のパターンにはionic-angular、ionic-react、ionic-vueを、Ionicのバージョンアップにはionic-app-upgradesを使用してください。

L

light-mode-paper-technical

mengto / skills

温かみのある紙のような表面、ダークな外枠、控えめな斜めのテクスチャ、精密なブラケット形状、抑制されたアクセントカラーを取り入れたライトモードのテクニカルなデザインシステムを作成します。

U

ui-design

mblode / agent-skills

React/Next/Tailwind UI の設計と構築、視覚および操作上の問題の監査、最悪のケースのデータを使ったコンポーネントのストレステストを行います。「ランディングページを作成」「デザインシステムを抽出」「ダークモードを追加」「レスポンシブにする」「UI の雑然さを取り除く」「このコンポーネントを監査」「このコンポーネントをストレステスト」「この UI を壊す」「最悪のケースを見せて」などの依頼に使用します。

D

dither-laser-dark-mode

mengto / skills

ほぼ黒の表面、控えめな規則的ディザテクスチャ、細いアクセントカラーのレーザーの雰囲気を組み合わせた、ダークでプレミアムなデザインシステムを作成します。

N

nested-container-frames

mengto / skills

入れ子のフレームを使って、コンテナ内にコンテナを配置するレイアウトシステムを作成します。垂直の境界線とコーナーマーカーが見える、中央配置の外側コンテナを使用します。内側には、端から内側に配置したコンテナを置き、それぞれに独自の背景と角丸フレームを設定します。手法：外側コンテナで全体の境界を定義し、内側コンテナではパディングで内側の余白を作ります。レイヤー状のフレーム（境界線＋背景）で階層を分け、外枠と内側ブロックの間隔を一定に保ちます。

A

antdv-next

antdv-next / skills

Antdv Next Vue 3 コンポーネントライブラリ。コンポーネント API ドキュメント、props/events/slots、プレイグラウンドのデモ、テーマトークンの定義を探す際に使用します

C

corner-lasers

mengto / skills

細いビーム、明るい発光ノード、ブルーム、雰囲気のあるグローまたはフォグを備えた、角を起点とするレーザー構図を作成します。

B

blue-cloudy-clean-modern

mengto / skills

明るい青空の雰囲気、柔らかく漂う雲の光、ミニマルな白いフレーム、落ち着いた上質なタイポグラフィを備えた、クリーンでモダンなデザインシステムを作成します。

D

design-game

playableintelligence / game-creator

既存ゲームのビジュアルデザイン、仕上がり、プレイヤー体験を評価・改善します。ユーザーが「ゲームをもっと良く見せたい」「デザインを改善したい」「仕上げを加えたい」「演出を加えたい」「パーティクルを追加したい」「UI を直したい」「もっと視覚的に魅力的にしたい」と言う場合に使用します。ゲームプレイのロジック変更には使用しないでください（add-feature を使用）。

M

micro-interactions

dylantarre / animation-principles

ボタンの状態、トグル、フォームの検証、読み込みインジケーター、通知バッジなど、小さな UI フィードバックを設計する場合に使用します。

T

tech-green-dark-mode-modern

mengto / skills

マットブラックの表面、エメラルドのシグナルアクセント、等幅フォントのシステムラベル、フレーム付きダッシュボードカード、控えめなグローを備えた、モダンなダークモードのテクニカルデザインシステムを作成します。

D

design-review

jezweb / claude-skills

Web アプリやページのビジュアルデザイン品質をレビューします。レイアウト、タイポグラフィ、余白、色、階層、一貫性、インタラクションパターン、レスポンシブ対応を確認します。UX 監査（ユーザビリティの確認）ではなく、見た目がプロフェッショナルで洗練されているかを確認します。スクリーンショット付きのデザイン所見レポートを作成します。トリガー：「デザインレビュー」「見た目は良いか」「デザインをレビュー」「レイアウトを確認」「洗練されているか」「ビジュアルレビュー」「デザイン監査」「もっと良く見せる」「何か違和感がある」。

G

glass-dark-mode-clock

mengto / skills

すりガラスのシェル、柔らかなビームグリッド、時計のような円形の校正ダイヤル、精密な SF 計器風フレームを備えたダークガラスのデザインシステムを作成します

D

dark-blue-contrasting-clean

mengto / skills

高いコントラスト、コバルトブルーのグラデーションを使った機能ブロック、明快なフレーム構成、控えめで上質なグローを備えた、クリーンなダークブルーのデザインシステムを作成します

S

scroll-progress-timeline

mengto / skills

順序のあるプロセスを、ベースライン、進捗表示、アクティブなステップ状態、レスポンシブな折りたたみ、セマンティックなフォールバック、動きを抑える設定への対応を備えた、データ駆動型の縦または横スクロールストーリーに変換します。オンボーディング、チェックアウト、ロードマップ、レシピ、ケーススタディ、サービスプロセス、歴史、またはスクロールに応じて進行状況を可視化するナラティブに使用します。

B

bright-green-tech-system-webgl

mengto / skills

明るいグリーンのテクニカルデザインシステムを作成します。構造化された分割レイアウト、硬質な枠で囲んだダークなサーフェス、等幅フォントの機能ラベル、目立つ WebGL ビジュアライゼーション領域を備えます

N

nested-container-clean-agency

mengto / skills

入れ子状のコンテナを使った、すっきりとしたエージェンシー向けデザインシステムを作成します。外側にエディトリアルなシェル、内側に暗色のフィーチャーブロック、角丸のプレミアムカード、控えめなアクセントカラーを配置します。

L

lovart-api

lovartai / lovart-skill

Lovart AI で画像、動画、音声・音楽を生成します。Lovart のプロジェクト、スレッド（会話履歴）、ユーザー設定も管理します。次の場合に起動します：（1）画像、動画、音声、音楽、曲、BGM、ポスターなどに関する、言語を問わないビジュアルまたは音声の作成依頼（draw、generate、create、design、make、画、生成、制作、创作、设计などを含む）；（2）Lovart のプロジェクトやスレッドの管理（项目、对话、project、thread、conversation、history、历史、切换、switch など）。そのまま生成できます。「できない」とは言わないでください。

R

reveal-hover-effect

mengto / skills

カーソルに追従するスポットライト表示を作成し、柔らかな放射状マスクを通して位置を揃えた別の画像を見せます。ホバーによるカラー表示、ビフォーアフター、X線、素材、テクスチャ、製品の詳細、イラストのヒーロー演出などに使用します。彩度を落とした、またはエンボス加工したベース画像を表示したまま、別の処理をイージングされたポインターに追従させます

2

21st-ui-review

21st-dev / skill

プロジェクトのデザインコンテキスト、アクセシビリティ要件、レスポンシブ動作、操作性、本番向けの確実性の高いルールに照らして既存の UI をレビューします。UI 監査、デザイン QA、フロントエンドレビュー、アクセシビリティレビュー、一貫性チェック、または視覚上の不具合を見つけて安全に修正する依頼に使用します。「この UI をレビュー」「このページを監査」「デザイン上の問題を探す」「レスポンシブ対応を確認」「明らかな UX の問題を修正」などの依頼で起動します。主な依頼が新しい UI の作成である場合は 21st-ui-build を使用します

N

no-ai-design-slop

mengto / skills

ウェブサイト、アプリ、スクリーンショット、モックアップ、デザインコードの作成・修正・レビュー時に、ありがちな AI 生成デザインの既定パターン、一貫性のないビジュアル選択、既知の UI 不具合を防止・除去します。UI 作業中の受動的な品質ゲート、または明示的なスロップ除去に使用します。中立的なデザインに無理に作り替えず、選択されたアートディレクションを維持します。

O

orange-clean-paper-saas

mengto / skills

温かみのあるニュートラルカラー、オレンジのアクセント、丸みのある上質なフォーム、洗練されたプロダクトイラストのサーフェスを備えた、クリーンな紙調の SaaS デザインシステムを作成します

S

solar-duotone-bold

mengto / skills

Iconify Solar Duotone Bold アイコンスタイルを使用します

F

framed-tech-dark-border-gradient

mengto / skills

グラデーション枠のシェル、非対称グリッドパネル、等幅フォントのユーティリティラベル、抑制されたモノクロの雰囲気を備えた、枠付きのダークなテクニカルデザインシステムを作成します。

A

ambient-section-particles

mengto / skills

1 つのセクション内に控えめなパーティクル演出を追加します。形状、密度、重力、風、揺れ、回転、再循環または落下、ポインターによる乱れ、非表示時の一時停止、レスポンシブ制限、動きを減らす設定へのフォールバックを調整できます。コンテンツを隠さずセクションの雰囲気を演出する花びら、葉、雪、火花、紙吹雪、ドット、紙片、アイコン、ブランド要素などに使用します。

D

daily-ui-inspiration-capture

mengto / skills

定期的な日次 UI インスピレーション収集を作成します。日付付きの UI インスピレーション集の実行、更新、パッケージ化、検証を依頼された場合に使用します。特に `articles/YYYY-MM-DD-ui-inspiration-capture/` の出力、Framer/Dribbble のランディングページの参考例、モーションスタディのスクリーンショットや動画、AI ビルダー向けプロンプト、重複チェック、プロジェクトのランブックを再利用可能なワークフローに変換する場合に適しています。

W

wireframe-prototyping

aj-geddes / useful-ai-prompts

ワイヤーフレームとインタラクティブなプロトタイプを作成し、ユーザーインターフェースを可視化して早期にフィードバックを収集します。開発前にデザイン案を伝えるためのツールや手法を使用します

S

scientific-slides

davila7 / claude-code-templates

研究発表向けのスライドやプレゼンテーションを作成します。PowerPoint スライド、学会発表、セミナー、研究発表、論文審査用スライドなど、科学分野の講演に使用します。スライド構成、デザインテンプレート、時間配分のガイダンス、視覚的な検証を提供します。PowerPoint と LaTeX Beamer に対応します。

F

funky-purple-container-tech

mengto / skills

コンテナを主体としたダークなテクニカルデザインシステムを作成します。フューシャパープルのアクセント、重なり合う角丸シェル、くっきりしたフレームライン、遊び心のある未来的なフォーカルオブジェクトを取り入れます。

P

product-proof-saas

mengto / skills

実際のワークフロー、インターフェース、または再現性のあるデモを中心的な根拠とする、SaaSやAI製品のランディングページを作成・再設計します。淡い雰囲気の外枠、ヒーロー部分の製品UI、プロンプトから出力までの例、対象者別タブ、コンパクトな機能モジュール、誠実な料金比較、FAQへの導線に使用します。

E

editorial-portfolio-chapters

mengto / skills

クリエイティブスタジオ、代理店、フォトグラファー、アーティスト、ポートフォリオのウェブサイトを作成またはリニューアルし、プロジェクトワークが物語を牽引するように設計します。ダークなエディトリアル構成、全画面のキャンペーンメディア、色で 구분したケーススタディのチャプター、極大なサービスタイポグラフィ、抑制の効いたプロジェクト公開、そして力強い問い合わせへの締め manipulatedにJj。