Menu
Svelte/SvelteKitプロジェクトにおいて、UI=状態の直接的な反映という思想を軸に、コンパイル時最適化・状態管理・レンダリング・配信量の設計を整理する。Svelte、SvelteKit、.svelteファイル、リアクティビティ、$state/$derived、コンパイラ最適化、軽量UI、store設計、配信量削減に関する相談で必ず使うこと。ユーザーが「Svelteでアプリを作りたい」「ランタイムを減らしたい」「仮想DOMなしのフレームワーク」と言った場合にも適用する。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Blender MCPを使った3Dモデリングの段階的ワークフロー（プリミティブ→ブロック→サブディビジョン→スカルプト→リトポロジー）と、AI経由のBlender操作の判断軸。3Dモデリング、シーン構築、スカルプティング、リトポロジー、メッシュ編集、Modifier設計、Blender MCPの操作に関する相談で必ず使うこと。ユーザーが「3Dオブジェクト作って」「キャラクターをモデリング」「Blenderで」と言った場合にも適用する。
p5.js（クリエイティブコーディング）のProcessing由来「コードでスケッチ」思想を軸に、setup/drawループ・座標系・インタラクション・パフォーマンス最適化を整理する。p5.js、Processing、クリエイティブコーディング、ジェネラティブアート、インタラクティブ表現、ビジュアルプログラミング、Canvas描画、パーティクル、フラクタル、ノイズ表現に関する相談で必ず使うこと。ユーザーが「コードでアート」「動くビジュアル」「インタラクティブな描画」と言った場合にも適用する。
Three.js（WebGL/3D表現）のScene-Camera-Renderer三位一体と手動メモリ管理を軸に、ウェブ3Dの設計・実装・パフォーマンス最適化を整理する。Three.js、WebGL、React Three Fiber（R3F）、3Dシーン構築、メッシュ/マテリアル/テクスチャ、メモリリーク、dispose()、インスタンシング、シェーダー、GLTFローダーに関する相談で必ず使うこと。ユーザーが「ブラウザで3D」「WebGLで表示」「3Dモデルをウェブに載せたい」「パーティクルエフェクト」と言った場合にも適用する。
Astroプロジェクトの設計・実装・レビューを、HTML中心/Islands Architecture/クライアントJS最小化の思想で整理する。Astro、Islands Architecture、SSG/SSR選択、コンテンツサイト構築、パフォーマンス最適化、JS削減、マルチフレームワーク統合、.astroファイルに関する相談で必ず使うこと。ユーザーが「静的サイト」「ブログ」「ドキュメントサイト」「ランディングページ」と言った場合も、Astroが技術スタックに含まれていれば適用する。
GSAP（GreenSock Animation Platform）のTween/Timeline/ScrollTrigger/Easingを軸に、ウェブアニメーションの設計・実装・パフォーマンス最適化を整理する。GSAP、GreenSock、ScrollTrigger、ウェブアニメーション、スクロール連動アニメーション、タイムライン制御、イージング設計、gsap.to/fromに関する相談で必ず使うこと。ユーザーが「スクロールで要素をフェードイン」「ページ遷移アニメーション」「シーケンシャルなアニメーション」と言った場合、GSAPが技術スタックに含まれていれば適用する。
Playwright E2Eテストフレームワークの判断軸。ユーザー視点のロケーター選択・自動待機・テスト分離・CI最適化を公式ベストプラクティスに沿って整理する。Playwright、E2Eテスト、ブラウザテスト、インテグレーションテスト、getByRole、ロケーター設計、テストの安定性、CI上のテスト失敗に関する相談で必ず使うこと。ユーザーが「テストが不安定」「CIでだけ落ちる」「ブラウザテストを書きたい」「ログインフローをテスト」と言った場合、Playwrightが技術スタックに含まれていれば適用する。
| name | svelte |
| user-invocable | false |
| description | Svelte/SvelteKitプロジェクトにおいて、UI=状態の直接的な反映という思想を軸に、コンパイル時最適化・状態管理・レンダリング・配信量の設計を整理する。Svelte、SvelteKit、.svelteファイル、リアクティビティ、$state/$derived、コンパイラ最適化、軽量UI、store設計、配信量削減に関する相談で必ず使うこと。ユーザーが「Svelteでアプリを作りたい」「ランタイムを減らしたい」「仮想DOMなしのフレームワーク」と言った場合にも適用する。 |
