開発のスキル

サイトの右下に開閉式の問い合わせ窓を作り、案内文やSNSリンク、面談予約への導線をまとめるスキル。受付休止時のフォームも含め、単一のHTMLに仕上げます。

• ポートフォリオに問い合わせ窓を置きたいとき
• SNSと面談予約の導線をまとめたいとき
• 受付休止中の連絡フォームを用意したいとき

既存サイトのソースやブラウザ上の動作を調べ、見た目と操作をローカルで再現する手順を提供。素材収集から実装、元サイトとの比較検証、内容の差し替えまで進めます。

• 既存サイトをローカルで再現して学びたいとき
• WebGLやCanvasの演出を調べたいとき
• 再現したサイトと元サイトを比較したいとき

GitHubの公開リポジトリの指標や最近の活動を集め、貢献者や課題の状況を一画面で確認できるHTMLダッシュボードを作ります。出典を記録する形式にも対応します。

• リポジトリの活動を一覧したいとき
• オープンソースの健全性レポート作成
• 主要貢献者や最近の課題・変更提案の確認

ReactとTailwindを使い、claude.ai向けの複雑なHTMLアーティファクトを作成するスキルです。埋め込み可能なWebコンテンツの制作に使えます。

• claude.ai向けHTML成果物の制作
• ReactとTailwindでの制作
• 埋め込み用Webコンテンツの作成

プルリクエストのレビュー指摘やマージ競合を確認し、修正と検証を進めるスキル。コミットやプッシュ前に読み取り専用の相互レビューを行い、対応結果と残る課題を報告します。

• PRのレビュー指摘を修正したいとき
• 上流の変更を保ったマージ競合解消
• コミットやプッシュ前の修正レビュー

Webページの文字組み・配色・余白・動きを具体的なルールで整え、定型的な見た目を避けながら、ReactやNext.jsの画面実装を進めるスキル。

• 文字組みに特徴のある販促ページ制作
• ダッシュボードの表示と操作感の調整
• 情報密度や動きの強さを調整したいとき

コードや文書の生成で、省略コメントや未実装のひな形を避け、依頼された全項目を出力するためのスキル。長文は区切りと再開位置を明示します。

• ソースファイルを全文受け取りたいとき
• 指定したコンポーネントの一括生成
• 長い文書の省略を避けたいとき

Three.jsを使い、ブラウザで表示する3D要素や操作できる体験の制作を支援します。シーン構成、素材の見た目、操作方法、描画後の視覚効果を扱います。

• ブラウザ用の3D要素を作りたいとき
• 操作できる3D体験の制作
• 素材の見た目や操作方法の調整

shadcn/uiで、構造が整理され、アクセシビリティに配慮した画面の部品を実装するスキル。Stitchのデザイン反復作業と組み合わせて使えます。

• shadcn/uiで画面部品を作りたいとき
• アクセシビリティに配慮した部品の実装
• Stitchのデザイン反復と連動した開発

Webページの要素やSVGに、移動・回転・フェードなどの動きを実装します。GSAPの基本APIを使い、速度変化や時間差、画面幅と動きを減らす設定への対応も扱います。

• Webページに移動やフェードを付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき

GSAPのプラグインを使い、文字やSVGの動き、ドラッグ操作、レイアウト切り替えを実装するスキルです。用途に合う機能の選択から登録、設定、後始末まで扱います。

• 見出しを一文字・一行ずつ動かしたいとき
• SVGの描画や図形変形を加えたいとき
• 慣性のあるドラッグ操作を作りたいとき

GSAPで複数のアニメーションの順序や重なりを組み立て、開始位置の指定、まとまりごとの入れ子化、再生・停止・逆再生まで扱うための実装支援スキル。

• 複数の動きを決めた順番で再生したいとき
• 開始時刻を調整して動きを重ねたいとき
• 動きをまとめて再生制御したいとき

Figmaのデザイン部品とコードの部品をCode Connectで関連付け、共通のデザインルールや部品の更新をコード側へ自動反映するためのスキル。

• Figmaとコードの部品を関連付けたいとき
• デザインシステムの更新を反映したいとき
• Code Connectを導入したいとき

映画的なアニメーション、MiniMax APIによるAI生成メディア、生成アートを使ったWeb制作を案内。冒頭の主役となるページや作品紹介サイト向けの項目です。

• 映画的な動きのヒーローページ制作
• 作品紹介サイトの制作
• AI生成メディアをWebで使いたいとき

GSAPのアニメーションで使う数値変換や範囲制限、ランダム化を実装・レビューします。スクロール量に応じた変化や、一定間隔への吸着、複数要素の扱いを支援します。

• スクロール量を移動や回転に変換
• アニメーションの値を範囲内に制限
• 位置や色にランダムな変化を追加

ReactやNext.jsでGSAPのアニメーションを実装し、対象要素の指定から更新時・コンポーネント削除時の後片付けまで整えるスキル。

• Reactの画面に動きを加えたいとき
• コンポーネント削除時の後片付け
• アニメーションの対象範囲の見直し

GSAPで作ったアニメーションのカクつきを減らすため、位置や透明度の変え方、画面更新のまとめ方、不要な処理の停止を見直し、描画負荷の軽減を支援します。

• GSAPのカクつきを減らしたいとき
• 多数のリスト要素の動きを改善したいとき
• マウス追従の演出を軽くしたいとき

Figmaのデザインを、元の見た目に忠実な本番向けコードへ変換するスキル。フレームをフロントエンド担当のAIエージェントへ渡し、画面の実装に使えます。

• Figmaの画面を実装したいとき
• デザインをAIエージェントへ引き継ぐ
• デザインの見た目をコードで再現

Flutterアプリにアニメーション効果や画面遷移、動きを実装し、iOS・Android向けアプリでモーションデザインを取り入れる作業を支援します。

• Flutterにアニメーションを加えたいとき
• 画面遷移の動きを実装したいとき
• iOS・Android画面の動きの実装

スクロールに合わせて動くWebページをGSAPで実装するスキル。要素の固定や進行度の連動、横方向の演出から、位置の再計算と後片付けまで扱います。

• 画面に入った要素を動かしたいとき
• セクションを固定して見せたいとき
• 縦スクロールで横移動させたいとき

VueやSvelteなどでGSAPのアニメーションを実装・レビューするスキルです。画面要素の表示後に動きを作り、対象範囲の限定から削除時の後始末まで扱います。

• VueやSvelteに動きを追加したいとき
• 部品削除時の後始末を確認したいとき
• アニメーションの対象範囲を限定したいとき

ブラウザやElectronで画像を書き出せない、保存したファイルが0 KBになる問題を調査し、画像データの生成と保存経路を切り分けて修正するスキル。

• 書き出した画像が0 KBになるとき
• 保存ダイアログや書き込みの不具合調査
• Electronの画像保存を修正したいとき

React、Tailwind CSS、shadcn/uiを使い、複数の部品を組み合わせたclaude.ai向けのHTMLアーティファクトを制作するスキル。

• claude.ai用のHTMLを作りたいとき
• 複数部品からなる画面の試作
• Reactとshadcn/uiでの制作

機能追加や複数工程の開発に向けて、公式資料や既存の実装例を調べ、利用者にとっての完成像から各段階の作業・参照先・検証方法まで整理する計画作成スキルです。

• 機能追加の手順を固めたいとき
• 実装前にAPIの根拠を確認したいとき
• 開発を複数のチャットに分けたいとき