個人開発に役立つClaude Codeスキル5選

TL;DR

個人開発では、スキル検索、UI改善、React監査、動画制作、ファネル分析の5種を用途別に導入すると、専門的な作業をClaude Codeへ組み込める。まずfind-skillsで候補を探し、対象プロジェクトに必要なスキルだけを選び、生成結果や修正内容を確認しながら利用する。

Transcript

はい、どうもしです。え、今回の動画は ですね、私がお勧めするクロードコード スキルズ5000という動画を撮っていき たいと思います。私ね、クロードコードが 登場した初期段階から結構使ってるんです けども、ま、新しくスキルズっていうのが 登場しましてね、ま、過去の YouTubeでもスキルズ入門っていう のを解説してるんですけど、え、その中で も私が開発の中で使っておすめなスキルを ですね、ちょっと紹介していくという、 そういう動画をね、撮っていきたいと思い ます。私が実際に個人開発してね、月 5万円くらい稼いでいる、え、この Webブサービスでもこのスキルズって いうのを結構使っています。だから皆さん のプロジェクト、個人解説でもこのスキル ズってのを導入していただくと、ま、より UIとかを... Read More

Key Insights

• find-skillsは、実現したい作業を伝えると関連するClaude Codeスキルを検索し、候補が多く選びにくい状況でも追加の推奨を提示するスキルである。
• スキルのインストール範囲は、特定のプロジェクトだけで使うプロジェクト設定と、複数のプロジェクトで利用できるグローバル設定から選択できる。
• ui-ux-pro-maxは、参照URLや検索したWebページからタイポグラフィーやスタイルを抽出し、プロジェクト向けのデザインシステムへ反映できる。
• 参照サイトのデザイン利用は、そのまま複製すると著作権上の問題が生じ得るため、動画内ではデモ用途に限定し、実運用ではアレンジするよう勧めている。
• vercel-react-best-practicesは、React・Next.jsのコードをルールに沿って調査し、データ取得、バンドルサイズ、認証、再計算などの問題を検出する。
• JSZipの動的インポートは、一括ダウンロードを実行する利用者だけにライブラリを読み込ませ、通常の履歴ページ訪問時には既定のバンドルから除外する改善である。
• remotion-best-practicesは、HTMLやCSSを含むコードベースの動画制作を支援し、約20秒のアプリ紹介動画を生成して動画ファイルとして出力できる。
• ファネル分析スキルは、アプリ内で利用者の離脱率が大きい段階を特定し、業界標準との比較を通じて改善対象となるボトルネックを探すために使われる。
• 🎬 このチャンネルの他の動画:
  • Gemini 3 Proで高品質なWebサイトを作る方法
  • Next.js 16でuse cacheを使う方法
  • AIコーディングで画像生成アプリを作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: 個人開発に必要なClaude Codeスキルを探す方法は？

find-skillsを導入し、実現したい作業を自然な言葉で伝えて検索させる方法が紹介されている。動画では「UI・UXをブラッシュアップしてプロらしくしたい」という目的を入力し、ui-ux-pro-maxなどの候補を取得した。自動でスキルが呼び出されない場合は、find-skillsを使って探すよう明示する。

Q: Claude Codeスキルはプロジェクト単位と全体のどちらに入れるべきですか？

利用範囲に応じてインストール先を選ぶ。特定のコードベースだけで必要ならプロジェクト範囲、複数のプロジェクトで繰り返し使うならグローバル範囲が適している。動画ではfind-skillsやReactのベストプラクティスをグローバルに導入し、各プロジェクトから利用している。

Q: 参考サイトからUIを作る方法は？

ui-ux-pro-maxを呼び出し、参考にしたいページのURLと作成目的を指定する。動画ではダッシュボードの参照ページを渡し、HTML、CSS、Tailwind CSSなどを使ったページの作成を依頼した。生成結果ではアナリティクスやEC向けの画面が作られたが、参照デザインはそのまま複製せずアレンジする。

Q: ReactやNext.jsの実装を点検する方法は？

vercel-react-best-practicesを使い、点検対象のページや構造がベストプラクティスに準拠しているか調査させる。動画の作成履歴ページでは、Promise.allによる並列取得やSuspenseによるストリーミングは合格し、JSZipの読み込み方、認証チェック、フィルタリング処理は改善対象として挙げられた。

Q: JavaScriptのバンドルサイズを小さくする方法は？

特定の操作でしか使わないライブラリは、トップレベルで常時読み込まず、必要な処理の中で動的にインポートする。動画では一括ダウンロード時だけ使うJSZipをtry文内で読み込む形へ変更した。これにより、一括ダウンロードを使わない利用者向けの既定バンドルからJSZipを除外できる。

Q: Reactで不要な再計算を減らす方法は？

再レンダリングのたびに全件を処理するフィルタリングなどは、必要に応じてメモ化する。動画の監査では、フィルタリング処理をメモ化して一度の計算結果を再利用することが改善案として示された。ただし、実際の適用時には対象コードと依存関係を確認し、修正後の動作も検証する必要がある。

Q: Remotionでアプリ紹介動画を作る方法は？

remotion-best-practicesを使い、紹介対象、動画の長さ、利用する画像などを指定してコードを生成させる。動画ではサムネAIを紹介する約20秒の映像を作り、編集画面で再生してサムネイル素材を差し替えた。完成後はレンダーボタンから動画ファイルを出力し、TikTokやXなどで利用できる。

Q: コードで作る動画はどのように構成されますか？

Remotionでは、HTMLやCSSを含むコードで画面の配置、文字、画像、吹き出しなどを構成する。対話形式のひな型を用意すれば、キャラクターや文章、音声を差し替えて別の内容へ展開できる。動画内では、アプリのサムネイル画像と行動喚起を組み合わせた紹介映像が生成された。

Q: アプリの離脱箇所をファネル分析する方法は？

ファネル分析用のスキルを使い、利用者が各段階でどの程度離脱しているかを確認し、離脱率が大きい場所を特定する。動画では、その数値を業界標準と比較し、差が大きい段階をボトルネックとして調べる考え方が説明されている。なお、具体的な分析結果や基準値は提示された文字起こしの範囲には含まれていない。

Summary & Key Takeaways

• 最初の選択肢はfind-skillsで、目的に合うスキルを検索するためのスキルである。動画ではグローバル範囲へインストールし、UI・UXをプロらしく改善できる候補を検索した。必要なスキルが自動で起動しない場合は、プロンプト内でfind-skillsの使用を明示する。候補が多いときは、提示された追加推奨を手掛かりに、プロジェクトの目的と利用範囲に合うものを選ぶ。

• 制作面では、ui-ux-pro-maxとremotion-best-practicesが紹介された。前者は参照ページのURLや検索結果から、タイポグラフィーやスタイルを含むデザインシステムを作り、ダッシュボードなどへ反映する。後者はコードによる動画制作を支援し、サムネAIを紹介する約20秒の動画を生成した。参照デザインは著作権に配慮し、そのまま複製せずアレンジして使う必要がある。

• 品質改善では、vercel-react-best-practicesがReact・Next.jsの実装を監査する。実例では並列取得やストリーミングが合格する一方、JSZipのトップレベル読み込み、サーバーアクションの認証不足、フィルタリングの再計算が改善点になった。さらに、ユーザーの離脱箇所を調べる自作のファネル分析スキルも紹介され、実装品質だけでなく利用状況の改善にもスキルを活用している。