Animation

remotion-video-creation は、React での動画制作に特化した Remotion 向けスキルです。アニメーション、素材、音声、キャプション、チャート、コンポジション、トランジションまで、29 のルールでレンダリングミスを減らすのに役立ちます。Video Editing のワークフロー、テンプレート型の解説動画、SNS 用の短尺クリップ、データ駆動のモーショングラフィックスに最適です。

manim-video は、グラフ、ワークフロー、システム図、製品デモ、ローンチ用ビジュアルを、Manim ベースで見やすく仕上げる解説動画の企画・制作を支援します。話す人を映す編集ではなく、シーン起点で正確にアニメで伝えたいときに manim-video スキルを使ってください。インストール、シーン設計、レンダリングまでの実践的な manim-video ガイド手順が含まれています。

frontend-slidesは、ゼロからアニメーション豊かなHTMLプレゼンテーションを作成したり、PowerPointファイルを変換したりするのに役立ちます。講演、ピッチデック、ワークショップ、社内デモ、そしてUI Design向けのfrontend-slidesで、見た目の検討を重視したいとき、ブラウザ出力をゼロ依存で使いたいとき、1つのビューポートに収まるスライドが必要なときに、このfrontend-slidesスキルを使ってください。

slack-gif-creatorは、Slackで使いやすいアニメーションGIFを作るためのコード中心スキルです。Pythonヘルパーでフレーム生成、最適化、検証を行い、GIFBuilderでループを組み立て、Slackの容量・再生速度・色数制約に収まる絵文字用やメッセージ用GIFを書き出せます。

ui-ux-pro-maxはAIによるUI/UXデザイン支援スキルです。レイアウト、スタイル、カラースキーム、タイポグラフィ、UXルールなどを体系的にガイドし、Webやモバイル開発に最適。React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter、HTML/CSSに対応し、設計・レビュー・改善に役立つデザイン知見を提供します。

interaction-designスキルは、目的のあるUIモーション、マイクロインタラクション、画面遷移、ローディング状態、フィードバックパターンを設計・実装するための実践的なガイダンスを提供します。React寄りの参考情報と使いどころがまとまっており、チームでの検討や実装判断に役立ちます。

react-native-designは、React Native UIパターンに特化したスキルです。StyleSheetによるスタイリング、型付きのReact Navigation、Reanimated 3の活用をカバーし、クロスプラットフォーム対応の画面実装に役立ちます。

overdriveは、意欲的なUIデザインに向けたGitHub skillです。文脈の把握、提案先行の進め方、そして優れたインタラクション品質を重視しています。映画的なトランジション、レスポンシブなインターフェース、高い訴求力を持つプロダクト体験を実現したいときに、overdriveを導入して活用できます。

delight skill を使って、使いやすさや集中を損なわずに、成功・読み込み中・空状態・オンボーディングの各状態へ、上品なUIの磨き込み、マイクロインタラクション、そしてブランドらしさを加えられます。

overdriveは、標準的なコンポーネントにとどまらない大胆なUI設計のための、ユーザーが呼び出せるスキルです。まず `/frontend-design` の文脈が必要で、そのうえで実装に入る前にコンセプト提案を行い、焦点の定まった高インパクトなインタラクションを構築します。

optimize skill は、計測を起点に、読み込み・レンダリング・アニメーション・画像・バンドルサイズ・実行時の挙動まで含む UI パフォーマンス課題を診断し、改善するためのスキルです。

delight スキルは、UI Design に上品な楽しさや個性、細部の磨き込みを加えるのに役立ちます。成功時の状態、空状態、読み込み中の演出、各種インタラクションを改善したいときに、文脈に応じた delight の導入・設定・使い方ガイドとして活用できます。

animate skillを使うと、UI機能を見直し、意図のあるアニメーション、マイクロインタラクション、トランジションを設計できます。`/frontend-design`で必要なデザイン文脈を押さえたうえで、フィードバック、わかりやすさ、視覚的な階層、心地よさを高めるモーションを整理し、パフォーマンスとアクセシビリティにも配慮して検討できます。

overdrive は、野心的なUIデザインのための GitHub スキルです。チームが文脈に合った高インパクトなインタラクションを選び、実装まで進めるのに役立ちます。印象に残るモーションや高負荷なUI、洗練された高度なフローを計画したい場面で使えますが、実装前に必要なデザイン整理と準備が求められます。

delight スキルは、UIチームが上品なマイクロインタラクションやコピー、フィードバック表現を加え、インターフェースをより親しみやすく印象に残るものにするのに役立ちます。全面的なリデザインよりも、特定の画面やフローの磨き込みに向いています。使う際は事前に /frontend-design の文脈を用意し、必要に応じて先に /teach-impeccable を実行してください。

animate skillを使うと、機能をレビューしたうえで、意図のあるアニメーションやマイクロインタラクション、モーション効果を加えられます。明確な目標、デザインの文脈、パフォーマンス制約がそろったUIデザイン作業に適しています。

shader-dev は、ShaderToy 風のリアルタイム表現に使える実用的な GLSL シェーダースキルです。ray marching、SDF シーン、ライティング、パーティクル、流体表現、ポストプロセス、そして UI Design 向けの shader-dev を、汎用的なプロンプトよりも少ない試行錯誤で構築・デバッグしたいときに役立ちます。

Remotion スキルを使って、Stitch プロジェクトの画面を、トランジション、ズーム、テキストオーバーレイ付きの洗練されたウォークスルー動画に変換できます。導入手順、サンプルファイル、そして動画編集やレンダー向けのコンポジションを再現しやすくする Remotion ガイドが含まれています。

gsap-performanceは、フロントエンド開発向けのGSAPパフォーマンス改善スキルです。カクつきを減らし、レイアウトスラッシングを避け、transformとopacityを優先し、will-changeを適切に使い、読み取りと書き込みをまとめることで、より滑らかな60fpsアニメーションを実現するのに役立ちます。既存のモーションコードに対して、実践的なgsap-performanceの使い方を知りたいときに最適です。

gsap-reactは、ReactとNext.js向けのGSAP公式skillです。`useGSAP()`、refs、`gsap.context()`、スコープ付きセレクタ、クリーンアップまでカバーしており、再レンダーやアンマウントに起因する不具合を避けながら、Reactで安全にアニメーションを構築できます。フロントエンド開発でgsap-reactの導入方法や使い方を確認したいときに、このガイドを使ってください。

GSAP のユーティリティヘルパーである gsap-utils のスキルです。clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe を扱います。Frontend Development での gsap-utils の使い方を、再利用しやすい関数形式を使う場面、tween や callback にどう組み込むか、そして registration が不要な理由まで含めて学べます。

gsap-plugins は、フロントエンド開発者が GSAP プラグインを正しく選び、導入し、使いこなすためのスキルです。プラグインの登録方法、import の書き方、そして ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG 系プラグイン、イージングツール、GSDevTools まで、実践的にカバーします。汎用的なアニメーション解説ではなく、gsap-plugins に絞った明確なガイドが必要なときに役立ちます。

gsap-scrolltrigger は、スクロール連動アニメーション、ピン留め、スクラブ動作、ビューポートベースのトリガーに対応した GSAP 公式スキルです。Frontend Development で、gsap-scrolltrigger の導入方法や実践的な使い方を知りたいとき、またパララックス、固定セクション、スクロール駆動の動きに使うガイドが必要なときに役立ちます。

gsap-timeline は、順序付きのステップ、オーバーラップ、ラベル、ネストされた再生を使って GSAP のタイムラインシーケンスを組み立てるのに役立ちます。複数のアニメーションを連携させたいとき、特に UI デザイン、オンボーディングフロー、繰り返し使うモーションシステムで gsap-timeline スキルを使うと効果的です。分かりやすいシーケンス構成のために、gsap-timeline のインストール方法と使い方も案内しています。