Skills

D

direct

adobe / skills

既存のウェブサイトのリデザイン方針を設定します。ユーザーの意図を分析し、配色とビジュアルの方向性を選び、目標仕様（PRODUCT.md、DESIGN.md、DESIGN.json）と推論記録を stardust/direction.md に作成します。サイトのリデザイン、デザインの刷新、新たなデザイン方針の設定、リデザイン目標の定義を依頼された場合、または `$stardust direct`（Claude Code では `/stardust:direct`）が呼び出された場合に使用します。

T

tailwindcss

martinholovsky / claude-skills-generator

JARVIS UI コンポーネント向けの Tailwind CSS ユーティリティファーストスタイル

C

continuous-infinite

dylantarre / animation-principles

ローディング状態、アンビエントな動き、ユーザーを疲れさせずに無期限で動作する背景効果など、継続的なループアニメーションの作成に使用します。

G

graphic-design

travisjneuman / .claude

デジタルメディアと印刷媒体向けのプロフェッショナルなグラフィックデザインの原則です。ビジュアルデザインの作成、カラーパレットやタイポグラフィ、レイアウトの選択、デザインへのフィードバックに使用します。

M

migrate

adobe / skills

インベントリ内のすべてのページに DESIGN、canon、modules を適用し、デプロイ可能な静的 HTML サイトを作成します。キャプチャしたサイト全体を再設計済みの静的ツリーに移行またはレンダリングする際に使用します（「ページを移行」「移行後のサイトをレンダリング」「すべてのページにデザインを適用」「デプロイ可能なサイトを構築」「承認済みプロトタイプをサイト全体に変換」）。プロトタイプとデプロイ／ロールアウトの間に行うページレンダリングの手順です。3 つのレンダリング分岐（承認済みページ、テンプレートを適用した類似ページ、独自レンダリング）があり、各ページに忠実度レベルを宣言します。ページ単位で段階的に処理し、冪等性を保ち、デフォルトでコンテンツを保持します。

P

prepare-migration

adobe / skills

準備カスケードを統括し、サイト全体の移行に備えます。全インベントリのクロール（extract --prep）、ページタイプとモジュールカタログの確認（direct --prep）、アーキタイプのプロトタイプとデザイン規範（prototype --prep）、アセットの準備を行い、各フェーズの間に確認ゲートを設けます。`migrate` が使用する、型付きページインベントリ、確認済みモジュールカタログ、デザイン規範を構築します。サイト全体の移行準備、移行前のページタイプとモジュールの確認、大規模サイトの移行準備、または `$stardust prepare-migration` の呼び出しに使用します。トリガーフレーズは “prepare the migration”、“migration prep”、“set up the migration data”、“get the site ready to migrate” です。再デザインのフロー専用です。同じデザインで移行する場合、`replica` が独自の保持モード準備カスケードを実行します。prepare-migration と replica を連結しないでください。移行そのもの（`migrate`）や単一ページの変換（`deploy`）には使用しません。

A

alphaear-logic-visualizer

rkiding / awesome-finance-skills

金融ロジックの_diagram（例：Draw.io XML）を作成し、複雑な金融伝導チェーンや金融ロジックのフローを説明する。

E

emotional-disconnect

dylantarre / animation-principles

アニメーションに違和感がある、意図しない感情的反応を引き起こす、または状況に合わないときに使用

R

responsive-adaptive

dylantarre / animation-principles

デバイス、距離、ユーザーの好み、インタラクションの状況に応じて再生時間が変わる、コンテキスト依存のアニメーションを作成するときに使用します。

S

state-changes

dylantarre / animation-principles

要素がその場で変化するときに使用。トグルスイッチ、展開するアコーディオン、チェックボックスのアニメーション、ボタンの状態、出入りを伴わないあらゆる変化が対象。

T

token-build

plugin87 / ux-ui-agent-skills

トークンのビルドパイプラインを設定または実行します。Style Dictionary / Tokens Studio / W3C DTCGエクスポートを使い、DTCG tokens/*.json（信頼できる唯一の情報源）をプラットフォーム用成果物（CSS変数、Tailwind @theme、JS/TS、iOS Asset Catalog、Android、Compose）に変換します。トークンからプラットフォームのテーマファイルを生成する、トークンCIを接続する、または複数プラットフォーム向けにトークンを出力する場合に使用します

B

brand-guidelines

composio-community / awesome-codex-skills

Codex/OpenAI の外観や雰囲気に合わせる成果物に、OpenAI のブランドカラーとタイポグラフィを適用します。ブランドカラーやスタイルガイド、ビジュアルの書式、会社のデザイン基準が関わる場合に使用します。

P

professionalism-credibility

dylantarre / animation-principles

真剣さ、専門性、信頼感のある表現が求められるビジネスシーン向けのアニメーションを作成するときに使用。

U

ux-design

donchitos / claude-code-game-studios

画面、フロー、HUD の UX 仕様をセクションごとに作成します。コンテキストを提供するためプレイヤージャーニーを読み取り、プロジェクト全体のアクセシビリティも扱います。

C

comfort-safety

dylantarre / animation-principles

ユーザーを安心させ、不安を軽減し、保護や安全を伝えるアニメーションを作成するときに使用します。

F

figma-integration

plugin87 / ux-ui-agent-skills

Figmaとコードを同期します。3階層のDTCGトークンをFigma Variables（コレクション＋モード）に対応付け、双方向に同期します。接続時はFigma MCPを使用し、コンポーネントの一致度（バリエーション／状態）を検証します。トークンやコンポーネントをFigmaに送る、デザインをコードに取り込む、トークンとVariableの同期を設定する、またはデザインとコードのずれを確認する場合に使用します

F

flyer-design-generation

eachlabs / skills

each::sense AI を使用して、プロ品質のチラシやリーフレットを生成します。イベントチラシ、販促資料、不動産物件情報、レストランメニューなどを、印刷とデジタル配布に適した目を引くデザインで作成します。

I

implementation-debugging

dylantarre / animation-principles

アニメーションが期待どおりに動作しない、バグがある、または動作に一貫性がない場合に使用します

P

popmotion

dylantarre / animation-principles

Popmotionの関数型アニメーションライブラリでDisneyの12のアニメーション原則を実装する場合に使用します

T

technical-constraints

dylantarre / animation-principles

アニメーションがブラウザーのサポート、プラットフォームの機能、または技術要件によって制限される場合に使用します

A

architecture-diagram

nousresearch / hermes-agent

ダークテーマの SVG アーキテクチャ／クラウド／インフラ図を HTML として作成します。

I

iphone-duo-flutter

mirzaaghazadeh / iphone-duo-skills

FlutterアプリをApple初の折りたたみ式iPhone、iPhone Duoに対応させます。MediaQueryで現在取得できる情報、ここでdisplayFeaturesが機能しない理由、プラットフォームチャネルを介してiOS 27.1の予約領域、ヒンジ、配置APIに接続する方法を扱います。FlutterまたはDartアプリで折りたたみ式iPhoneのサポートが必要な場合に使用します。

F

friendliness-approachability

dylantarre / animation-principles

温かく親しみやすく、ユーザーが気軽に操作できるアニメーションを作成する場合に使用します。

L

large-500-800ms

dylantarre / animation-principles

500～800 ms の大きな動きを伴うアニメーションを作成する場合に使用します。ヒーローセクションの遷移、複雑な表示、物語を伝え、注目に値するアニメーションなどが対象です

L

luxury

bergside / awesome-design-skills

大胆な見出し、モノクロームのパレット、プレミアムな質感を備えたハイエンドなダーク美学で、ラグジュアリーブランドの体験に適する。

M

medium-300-500ms

dylantarre / animation-principles

300～500ms の標準的なアニメーションを作成する場合に使用します。ページ遷移、大きな UI 変更、明確な伝達が必要なアニメーションイラストなどが対象です

M

motion-sickness

dylantarre / animation-principles

アニメーションによって、めまい、吐き気、方向感覚の喪失、前庭系の不快感が生じる場合に使用します。

U

universal-industry

dylantarre / animation-principles

あらゆる業界向けのアニメーションを設計する場合、または業界固有のガイドラインが適用されない場合に使用します

D

design-system-creation

secondsky / claude-skills

タイポグラフィ、カラー、コンポーネント、ドキュメントを含む包括的なデザインシステムを作成し、一貫性のある UI 開発を実現します。デザイン標準の策定、コンポーネントライブラリの構築、チーム間の一貫性確保に使用します。

D

deliberate-1200-2000ms

dylantarre / animation-principles

1200～2000ms のゆっくりと意図的なアニメーションを作成する場合に使用します。アプリのイントロ、読み込みシーケンス、感情に訴えるストーリー演出などが対象です。

G

governance

plugin87 / ux-ui-agent-skills

デザインシステムの進化を管理します（トークン／コンポーネントのSemVer、コントリビューションのワークフロー、非推奨化ポリシー、変更の周知）。コンポーネントやトークンの追加・昇格・非推奨化、バージョン更新の判断、コントリビューションプロセスの設定、またはシステムの分断防止に使用します

P

page-cro

sickn33 / agentic-awesome-skills

個々のページのコンバージョンパフォーマンスを分析し、最適化します。

P

product-manager

dylantarre / animation-principles

アニメーション機能の優先順位付け、モーションロードマップの作成、または PM がアニメーション原則のビジネス価値を理解する場合に使用します。

S

small-200-300ms

dylantarre / animation-principles

モーダルの表示、カードの展開、ナビゲーションの切り替えなど、ユーザーが意識して認識する 200～300 ms の短いトランジションを作成する場合に使用します

S

studio-css-reset

remotion-dev / remotion

継承されたリセットプロパティに依存せず、`.css-reset` コンテナ内の Remotion Studio UI のスタイルを設定します

T

trust-reliability

dylantarre / animation-principles

ユーザーの信頼感を高め、信頼性を確立し、頼もしさを伝えるアニメーションの作成に使用します。

U

universal-elements

dylantarre / animation-principles

特定のスキルで扱われていない UI 要素をアニメーション化する場合や、複数の要素タイプに一般的なアニメーション原則を適用する場合に使用します。

W

website-cloner

horuz-ai / claude-plugins

専用サブエージェントを使い、ピクセル単位の精度でウェブサイトをクローンするエージェント型ワークフローです。ユーザーがウェブサイトのクローン、コピー、再現を希望するとき、既存サイトを基にランディングページを作成するとき、またはサイトのデザインを抽出して再現する必要があるときに使用します。スラッシュコマンドによるオーケストレーション、4 つの専用サブエージェント（screenshotter、extractor、cloner、qa-reviewer）が含まれ、Tailwind CSS と motion アニメーションを使用した React コンポーネントを出力します。

A

academic-slides

evoscientist / evoskills

学術スライドデッキと、それを軸にした講演の作成・改善に使用します。学会発表、論文審査、ラボミーティング、論文からスライドへの構成、ストーリー展開とスライド分割の決定、デザインと視覚的階層の改善、リハーサル・時間配分・質疑応答・予備スライドの計画、.pptx の生成に対応します。プレゼンテーション自体を構成する際に使用してください。論文の執筆、独立した発表者ノート・スクリプト・文字起こしの作成、ポスター制作、スライドデッキ外の単独の図表作成、非学術的なプレゼンテーションには使用しないでください。

U

universal-tool

dylantarre / animation-principles

任意のアニメーションツールやフレームワークで Disney の 12 のアニメーション原則を実装する場合に使用します

W

wp-block-themes

automattic / agent-skills

WordPress ブロックテーマの開発に使用します。theme.json（グローバル設定／スタイル）、テンプレートとテンプレートパーツ、パターン、スタイルバリエーション、Site Editor のトラブルシューティング（スタイル階層、オーバーライド、キャッシュ）に対応します。

C

create-remotion-geist

vercel-labs / skill-remotion-geist

Geist デザインシステムの美学を取り入れた Remotion 動画を作成します。ダークテーマ、スプリングアニメーション、Geist タイポグラフィ、Geist カラーパレットなど、Vercel のビジュアルスタイルに沿った動画、アニメーション、モーショングラフィックスの作成に使用します。

D

design-system

akillness / jeo-skills

画面を一つずつ磨き込む前に、共有フロントエンド UI システムを定義またはリファクタリングします。トークンのガバナンス、ビジュアル言語のルール、プリミティブの命名、ページシステムの方向性、製品間の一貫性、ランディングページ、ダッシュボード、フォーム、コンポーネントライブラリ全体で一貫性を保つデザインハンドオフが必要な場合に使用します。システムが管理する再利用可能なプリミティブ／スロット／バリアント API も対象です。レスポンシブレイアウトのみの修正、アクセシビリティのみの改善、広範な UI 批評には使用しません。トリガー：design system、design tokens、visual language、component library foundations、UI governance、cross-product consistency、landing page plus dashboard system、primitive naming、token policy、component API architecture。

M

mck-ppt-design

likaku / mck-ppt-design-skill

MckEngine（python-pptx ラッパー）を使用し、マッキンゼー風デザインのプロフェッショナルなコンサルタント品質の PowerPoint プレゼンテーションを一から作成します。スライド、ピッチデッキ、ビジネスプレゼンテーション、戦略デッキ、四半期レビュー、取締役会用スライドなど、プロ仕様の PPTX の作成依頼に使用します。AI は eng.cover()、eng.donut()、eng.timeline() などを呼び出せます。構成、データ、フレームワーク、比較、ナラティブ、タイムライン、チーム、チャート、画像、高度な可視化、ダッシュボード、ビジュアルストーリーテリングの 12 カテゴリーにわたる 67 の高水準メソッドを備えています。統一されたタイポグラフィ、ファイル破損の防止、円形チャート（ドーナツ、円、ゲージ）向けの BLOCK_ARC ネイティブ図形に加え、間隔、はみ出し、凡例の一貫性、タイトルスタイルの統一、項目数が変動するレイアウトの動的サイズ調整、横方向の項目のはみ出し防止、チャート描画に関する本番環境向けのガード機能を備えています。Tencent Hunyuan 2.0 による、プロ仕様の切り抜き、クールなグレーブルーの色調、マッキンゼー風ベジェリボン装飾を用いた AI 生成カバー画像にも対応します。

O

open-pencil

open-pencil / open-pencil

Figma の .fig デザインファイルと稼働中の OpenPencil エディターを扱う—構造の調査、ノードの参照 디자인トークンの分析、PNG／SVG／PDF／JSX のエクスポート、設計的程序的な変更を行います。.fig ファイルのオープン、調査、エクスポート、解析、編集を求められた場合や、稼働中の OpenPencil アプリを制御する場合に使用します。

U

user-persona-creation

aj-geddes / useful-ai-prompts

調査とデータに基づいて詳細なユーザーペルソナを作成します。製品の意思決定を導き、ユーザー中心のデザインを実現するため、ターゲットユーザーを現実的に描きます。

A

accessibility-issues

dylantarre / animation-principles

アニメーションが、前庭障害や認知障害のあるユーザー、または支援技術を必要とするユーザーを排除している場合に使用します

R

redesign

educlopez / ui-craft

既存のサイトやアプリを、現在うまく機能している部分を失わずに再設計します。まず現状を監査し、保持する要素（ブランド、IA、SEO、コンテンツ）を分類して、リフレッシュ／スキン変更／再構築の範囲を選び、計画的にモダン化します。「再設計して」「このサイトをモダンにして」「UI を一新して」「今風にして」などの依頼や、ゼロから作り直すのではなく改善したい既存ページ／URLが示された場合に使用します。UI の再設計を依頼された場合や、デザイン／UI／フロントエンド作業と併せて「再設計」に言及された場合にも起動します。

U

universal-practitioner

dylantarre / animation-principles

あらゆる状況や役割でアニメーションの原則を適用する場合、または Disney の 12 の原則について全般的な理解が必要な場合に使用します

U

universal-solutions

dylantarre / animation-principles

あらゆるアニメーションの問題に直面した際に使用する、包括的な診断フレームワーク

E

element-plus-skills

jiaiyan / element-plus-skills

Element Plus Skills Library は、AI エージェントが Element Plus UI コンポーネントを理解し活用するための包括的なスキルライブラリです。Element Plus コンポーネント、テーマ設定、i18n、ダークモード、デザイン仕様を扱う必要があるときに呼び出します。

U

universal-fallback

dylantarre / animation-principles

アニメーションの領域が不明確な場合や複数の状況にまたがる場合に使用します。汎用的なディズニーアニメーション原則のガイダンスを提供します。

U

ux-friction

dylantarre / animation-principles

アニメーションによってユーザーが混乱したり、タスク完了が遅れたり、不満が生じたりする場合に使用

A

accessibility-audit

webflow / webflow-skills

Webflow のページに対して包括的なアクセシビリティ監査（WCAG 2.1）を実行し、ボタン、フォーム、リンク、フォーカス状態、見出し、キーボード操作をチェックして修正:checked付きの詳細レポートを生成する。Webflow Designer への接続が必要。画像の代替テキストは対象外（asset-audit スキルで扱う）。

I

instant-0-100ms

dylantarre / animation-principles

100ms 未満の即時 UI フィードバックを構築する際に使用。ボタンの押下、トグル、状態変化をすぐに反応するように感じさせる。

codemod または単独のガイダンスを使って Material-UI (MUI) を Backstage UI (BUI) に移行します。MUI コンポーネントやスタイルの移行、@backstage/mui4-to-bui-migration-recipe の実行、BUI 移行後の TODO(backstage-codemod) の解消に使用します。

A

accessibility-compliance

aj-geddes / useful-ai-prompts

WCAG 2.1/2.2のアクセシビリティ基準、スクリーンリーダー対応、キーボード操作、アクセシビリティテストを実装します。インクルーシブなWebアプリの構築、規制への準拠、障害のある人のユーザー体験の向上に使用します。

既存のModaキャンバス（貼り付けられたURL、共有リンク、cvs_ ID、またはこのセッションですでに作業中のもの）を変更：文言、スタイル、色、サイズの変更、画像の差し替え、セクションの追加・削除、エクスポートや共有。対象キャンバスの変更やエクスポート、「このスライドを修正」、Modaが作成したものへの簡潔な追加指示に使用。mp4/gif以外のすべてのトリガーより優先。対象外：動きやgif/mp4の作成→moda-video、moda.pageへの参照→moda-website、そこからの新しい成果物→該当する形式のスキル。

R

roblox-ui-design

tabooharmony / roblox-brain

Roblox の UI 構成、階層、ビジュアルシステム、スタイル継承、アクセシビリティ、デザインレビューに使用する。

C

copywriting

mblode / agent-skills

ブランドボイス、社内ボキャブラリー、認知段階のフレームワーク、製品状態の契約を用いて、製品とマーケティングのコピーを執筆・編集する。「コピーを書いて」「この CTA を改善して」「AI っぽい文章を除いて」と依頼されたとき、またはエラー状態や空状態に名前を付けるときに使用する。動作の決定には product-design、ドキュメントには docs-writing を使用する。