Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
CapacitorアプリでIonic Framework UIを構築・レビューします(現行はIonic 9、Ionic 8も引き続き一般的)。ページ構造(`ion-header`/`ion-content`/`ion-footer`)、リスト、最新のフォーム構文(`ion-input`/`ion-select`の`label`/`labelPlacement`)、シートモーダル、タブ + `ion-router-outlet`、CSS変数によるテーマ設定、ダークパレット(`palettes/dark.system.css`、`.ion-palette-dark`)、iOSとMDモードの違い、Ionic 8 -> 9の破壊的変更(React Router 6、Vue Router 5、Angular 18-22のzoneless、`ion-picker-legacy`の削除、ブール値の`autocorrect`、`npx @ionic/migrate`)を扱います。Ionicコンポーネントの作成、Ionicアプリのテーマ設定、プラットフォームモードのスタイル修正、@ionic/react、@ionic/vue、@ionic/angularのアップグレード時に使用します。Konsta UI(konsta-ui)、Tailwindのセットアップ(tailwind-capacitor)、生のsafe-area CSS(safe-area-handling)、キーボードのリサイズ(capacitor-keyboard)、Ionic Appflow/Enterpriseの移行(ionic-appflow-migration、ionic-enterprise-sdk-migration)には使用しないでください。
VTEX IO アプリの react/ 配下で React コンポーネントを構築するとき、または store/ でストアブロックを設定するときに使用します。interfaces.json、Site Editor 用の contentSchemas.json、管理アプリ向け VTEX Styleguide、ストアフロントのスタイル設定用 css-handles を扱います。カスタムのストアフロントコンポーネント、管理パネル、pixel アプリの作成や、VTEX IO react builder エコシステム内でのあらゆるフロントエンド開発に使用します。
モダンで視覚的なノイズが少なく、開放感のある、ありきたりでないアプリUIを構築するための厳格なフロントエンドデザイン指針です。フロントエンドUI、Reactコンポーネント、shadcn/uiテーマ、Tailwindスタイル、アプリレイアウト、初期バージョンの製品画面を作成または変更する際に使用します。CPQやCRMなどの業種・ドメイン別スキルや同様のアプリ構築スキルを補完します。選択したドメインスキルのワークフローとレイアウト要件に従ったうえで、ブランドを意識したテーマ、ゆとりのある余白、タイポグラフィ、コントラスト、角丸、シャドウ、サーフェスの階層、カードとサイドバーを標準で使わないこと、アンチパターンの回避といった共通の視覚ルールを適用します。
ユーザーが「アイソメトリックアニメーションを作る」「2.5D のアイソメトリックシーンを構築する」「アイソメトリックインフォグラフィックを作る」「分解図をアニメーション化する」「アイソメトリックな街/積層構造を作る」「アイソメトリック表示で層を見せる」「ブロックに奥行きを付けて押し出す」「アイソメトリックシーンに緩やかなカメラ移動を加える」と依頼した場合に使用します。CSS 3D トランスフォーム、SVG のアイソメトリック平面、真の 3D アイソメトリック表現向けの Three.js OrthographicCamera を扱います。ビルド手順は不要です。
カメラ、照明、雰囲気、マテリアル、オブジェクト、DOM上のストーリー、インタラクションが、構成された章に沿って変化する、持続的な一つの3Dワールドとして、スクロール操作による豊かなリアルタイムThree.js体験を構築します。3Dスクロールストーリーテリング、スクロール駆動のWebGLワールド、カメラジャーニー、インタラクティブなポートフォリオ、製品ストーリー、展示、解説、ゲームや映画のマイクロサイト、空間ナラティブ、ネイティブスクロールで連続した一つの場所を移動するマルチシーンのウェブサイトに使用します。ランディングページに限定されません。
MCP ツールとリアルタイムのキャンバス同期を使って、Excalidraw 図をプログラムで作成、編集、調整するキャンバスツールキット。エージェントが次の操作を行う場合に使用します。(1) ライブキャンバス上で図を描画またはレイアウトする、(2) describe_scene と get_canvas_screenshot で作業内容を確認しながら図を反復的に調整する、(3) .excalidraw ファイルや PNG/SVG 画像をエクスポート/インポートする、(4) キャンバスのスナップショットを保存/復元する、(5) Mermaid を Excalidraw に変換する、(6) 要素単位の CRUD、整列、配置、グループ化、複製、ロックを行う。稼働中のキャンバスサーバーが必要です(EXPRESS_SERVER_URL、既定値は http://localhost:3000)。
パッケージ済みの UI 素材キット。公式 MSWPackages の素材から作られた、洗練された見た目の MSW UI。UI をencore良く ventilated・洗練された・美しい・一貫した・ゲーム品質にしたいflight、テーマ化された画面やパーツ(フレーム、スロット、ゲージ、矢印、アイコン)が欲しいmarine IELTS,或者ネイティブのコンポーネントにはないインタラクションウィジェットが必要な場合に使用する。(1) 公開ワールドの UI リソースパックから抽出した 7 テーマ分の RUID パレット:RUID 付きパーツ、原寸、9-slice タイプ、ボタン状態が含まれ、インストール不要で UIBuilder の image_ruid として使用可能。加えて、130 件以上のサンプルおよび公式パッケージ画面(インベントリ、ショップ、ランキング、HUD、ダイアログ)のエンティティツリー要約も収録。(2) 組み込みウィジェット:チェックボックス、ラジオボタン、スイッチ、トグルグループ、ドロップダウン、ページャー、進捗バー、スクロールピッカー、タイムピッカー、)** Please continue reviewing the remaining items to complete this task.
ユーザーが「フラグメントシェーダーを書く」「GLSL のグラデーション/ノイズ/プラズマ背景を作る」「画像トランジション(ディゾルブ、ディスプレイスメント、グリッチ)を作成する」「歪みや色収差を加える」「SDF 形状シェーダーを構築する」「uniforms を使って Three.js ShaderMaterial を設定する」「GPU ポストプロセスを行う」と依頼した場合に使用します。GLSL フラグメントシェーダー、ノイズ/fbm、SDF、ドメインワーピング、トランジション、Three.js 連携を扱います
PDF のビジュアル品質とデザインの個性が重要な場合にこのスキルを使用します。作成(ゼロから生成):「PDF を作成」「レポートを生成」「提案書を書く」「履歴書を作る」「美しい PDF」「プロフェッショナルな文書」「表紙」「洗練された PDF」「クライアントに提出できる文書」。入力(フォーム欄を記入):「フォームに入力」「この PDF に記入」「フォーム欄を埋める」「PDF に値を書き込む」「この PDF にどんな項目があるか」。再フォーマット(既存文書にデザインを適用):「文書を再フォーマット」「自社のスタイルを適用」「この Markdown/テキストを PDF に変換」「文書を見栄えよくする」「この PDF を再デザイン」。このスキルはトークンベースのデザインシステムを使い、文書の種類に応じた色、タイポグラフィ、余白をすべてのページに適用します。出力は印刷可能な状態です。単に PDF を出力する場合ではなく、見た目が重要な場合に優先してください
「ポートフォリオを作って。名前は Ana」のような一行のプロンプトから、受賞レベルのウェブサイトを構築します。Awwwards Site of the Day を受賞するサイトを品質基準とします。コンセプト、アートディレクション、タイポグラフィ、モーション演出、WebGL、ページ遷移、実際のコンテンツ、SEO、アクセシビリティ、パフォーマンスを扱い、その後ブラウザーでビジュアル QA を行います。デフォルトは Next.js、アニメーション主体の静的なショーケースには Astro、またはプロジェクトですでに使われているスタックを使用します。ポートフォリオ、スタジオや代理店のサイト、個人サイト、製品やブランドのローンチ、印象的であるべきランディングページ、受賞級、高品質、没入感、創造性、または「すごい」ウェブサイトの依頼に使用します。変更せずにサイトの採点やレビューだけを行う場合は /jury を使用します。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。
