web-games
Webブラウザゲーム開発の原則です。フレームワークの選定、WebGPU、最適化、PWAに関する知識が身につきます。ゲーム開発に適したフレームワークの選択方法、高性能なグラフィックスを実現するWebGPUの活用、ブラウザ上でのパフォーマンス最適化、オフライン対応やインストール機能を備えたプログレッシブウェブアプリ(PWA)の構築方法を習得できます。これらのスキルにより、ユーザー体験に優れたブラウザゲームを効率的に開発することができます。
description の原文を見る
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
SKILL.md 本文
Webブラウザゲーム開発
フレームワークの選択とブラウザ固有の原則。
1. フレームワークの選択
デシジョンツリー
What type of game?
│
├── 2D Game
│ ├── Full game engine features? → Phaser
│ └── Raw rendering power? → PixiJS
│
├── 3D Game
│ ├── Full engine (physics, XR)? → Babylon.js
│ └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
└── Custom → Raw Canvas/WebGL
比較表（2025年）
| フレームワーク | タイプ | 最適な用途 |
|---|---|---|
| Phaser 4 | 2D | フル機能のゲーム |
| PixiJS 8 | 2D | レンダリング、UI |
| Three.js | 3D | ビジュアライゼーション、軽量 |
| Babylon.js 7 | 3D | フルエンジン、XR |
2. WebGPUの採用
ブラウザ対応状況（2025年）
| ブラウザ | 対応状況 |
|---|---|
| Chrome | ✅ v113以降 |
| Edge | ✅ v113以降 |
| Firefox | ✅ v131以降 |
| Safari | ✅ 18.0以降 |
| 合計 | 全体の約73% |
判断基準
- 新規プロジェクト: WebGPUをWebGLフォールバック付きで使用
- レガシー対応: WebGLから開始
- 機能検出:
navigator.gpuをチェック
3. パフォーマンス原則
ブラウザの制約
| 制約 | 戦略 |
|---|---|
| ローカルファイルアクセス不可 | アセットバンドリング、CDN |
| タブスロットリング | 非表示時に一時停止 |
| モバイルデータ制限 | アセットの圧縮 |
| オーディオ自動再生 | ユーザーインタラクション必須 |
最適化の優先順位
- アセット圧縮 - KTX2、Draco、WebP
- 遅延読み込み - オンデマンド読み込み
- オブジェクトプーリング - ガベージコレクション回避
- ドローコールバッチング - 状態変更の削減
- Web Workers - 重い計算の処理分離
4. アセット戦略
圧縮フォーマット
| タイプ | フォーマット |
|---|---|
| テクスチャ | KTX2 + Basis Universal |
| オーディオ | WebM/Opus（フォールバック: MP3） |
| 3Dモデル | glTF + Draco/Meshopt |
読み込み戦略
| フェーズ | 読み込み対象 |
|---|---|
| 起動時 | コアアセット、2MB未満 |
| ゲームプレイ中 | オンデマンドストリーミング |
| バックグラウンド | 次のレベルのプリフェッチ |
5. ゲーム向けPWA
メリット
- オフラインプレイ
- ホーム画面へのインストール
- フルスクリーンモード
- プッシュ通知
必要条件
- キャッシング用のService Worker
- Webアプリマニフェスト
- HTTPS
6. オーディオ処理
ブラウザの要件
- AudioContextはユーザーインタラクションが必須
- 最初のクリック/タップでAudioContextを作成
- コンテキストが一時停止状態の場合は再開
ベストプラクティス
- Web Audio APIを使用
- オーディオソースをプール化
- 一般的な音声をプリロード
- WebM/Opusで圧縮
7. アンチパターン
| ❌ してはいけないこと | ✅ すべきこと |
|---|---|
| すべてのアセットを事前読み込み | 段階的な読み込み |
| タブの可視性を無視 | 非表示時に一時停止 |
| オーディオ読み込みをブロック | オーディオの遅延読み込み |
| 圧縮をスキップ | すべて圧縮 |
| 高速接続を想定 | 低速ネットワークに対応 |
覚えておくこと: ブラウザは最もアクセスしやすいプラットフォームです。その制約を尊重してください。
使用時期
このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用可能です。
制限事項
- このスキルは、タスクが上記のスコープと明確に一致する場合のみ使用してください。
- 出力を環境固有の検証、テスト、または専門家によるレビューの代替物として扱わないでください。
- 必要な入力、権限、安全性の境界、または成功基準が不足している場合は、説明を求めてください。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- newmindsgroup
- ライセンス
- MIT
- 最終更新
- 2026/5/10
Source: https://github.com/newmindsgroup/ai-agent-skills-library / ライセンス: MIT
関連スキル
superfluid
Superfluidプロトコルおよびそのエコシステムに関するナレッジベースです。Superfluidについて情報を検索する際は、ウェブ検索の前にこちらを参照してください。対応キーワード：Superfluid、CFA、GDA、Super App、Super Token、stream、flow rate、real-time balance、pool（member/distributor）、IDA、sentinels、liquidation、TOGA、@sfpro/sdk、semantic money、yellowpaper、whitepaper
civ-finish-quotes
実質的なタスクが真に完了した際に、文明風の儀式的な引用句を追加します。ユーザーやエージェントが機能追加、リファクタリング、分析、設計ドキュメント、プロセス改善、レポート、執筆タスクといった実際の成果物を完成させるときに、明示的な依頼がなくても使用します。短い返信や小さな修正、未完成の作業には適用しません。
nookplot
Base（Ethereum L2）上のAIエージェント向け分散型調整ネットワークです。エージェントがオンチェーンアイデンティティを登録する、コンテンツを公開する、他のエージェントにメッセージを送る、マーケットプレイスで専門家を雇う、バウンティを投稿・請求する、レピュテーションを構築する、共有プロジェクトで協業する、リサーチチャレンジを解くことでNOOKをマイニングする、キュレーションされたナレッジを備えたスタンドアロンオンチェーンエージェントをデプロイする、またはアグリーメントとリワードで収益を得る場合に利用できます。エージェントネットワーク、エージェント調整、分散型エージェント、NOOKトークン、マイニングチャレンジ、ナレッジバンドル、エージェントレピュテーション、エージェントマーケットプレイス、ERC-2771メタトランザクション、Prepare-Sign-Relay、AgentFactory、またはNookplotが言及された場合にトリガーされます。
web3-polymarket
Polygon上でのPolymarket予測市場取引統合です。認証機能(L1 EIP-712、L2 HMAC-SHA256、ビルダーヘッダー)、注文発注(GTC/GTD/FOK/FAK、バッチ、ポストオンリー、ハートビート)、市場データ(Gamma API、Data API、オーダーブック、サブグラフ)、WebSocketストリーミング(市場・ユーザー・スポーツチャネル)、CTF操作(分割、統合、償却、ネガティブリスク)、ブリッジ機能(入金、出金、マルチチェーン)、およびガスレスリレイトランザクションに対応しています。AIエージェント、自動マーケットメーカー、予測市場UI、またはPolygraph上のPolymarketと統合するアプリケーション構築時に活用できます。
ethskills
Ethereum、EVM、またはブロックチェーン関連のリクエストに対応します。スマートコントラクト、dApps、ウォレット、DeFiプロトコルの構築、監査、デプロイ、インタラクションに適用されます。Solidityの開発、コントラクトアドレス、トークン規格（ERC-20、ERC-721、ERC-4626など）、Layer 2ネットワーク（Base、Arbitrum、Optimism、zkSync、Polygon）、Uniswap、Aave、Curveなどのプロトコルとの統合をカバーします。ガスコスト、コントラクトのデシマル設定、オラクルセキュリティ、リエントランシー、MEV、ブリッジング、ウォレット管理、オンチェーンデータの取得、本番環境へのデプロイ、プロトコル進化（EIPライフサイクル、フォーク追跡、今後の変更予定）といったトピックを含みます。
xxyy-trade
このスキルは、ユーザーが「トークン購入」「トークン売却」「トークンスワップ」「暗号資産取引」「取引ステータス確認」「トランザクション照会」「トークンスキャン」「フィード」「チェーン監視」「トークン照会」「トークン詳細」「トークン安全性確認」「ウォレット一覧表示」「マイウォレット」「AIスキャン」「自動スキャン」「ツイートスキャン」「オンボーディング」「IP確認」「IPホワイトリスト」「トークン発行」「自動売却」「損切り」「利益確定」「トレーリングストップ」「保有者」「トップホルダー」「KOLホルダー」などをリクエストした場合、またはSolana/ETH/BSC/BaseチェーンでXXYYを経由した取引について言及した場合に使用します。XXYY Open APIを通じてオンチェーン取引とデータ照会を実現します。