Claude CodeやCursorに、構成図・ER図・シーケンス図などを読みやすく描かせられるスキル「diagram-design」が良さそう
1枚が1つのHTMLファイルで完結してて、ビルドもJavaScriptも要らない
・座標や幅、間隔はすべて4で割り切れる値にする、と決めてる
・図形の重なりやはみ出しは、自動でチェックしてる
・自分のサイトのURLを渡すと、ブランドの色やフォントを読み取って全部の図に反映してくれる
・draw.ioで描いた図を読み込んで、描き直すこともできる
などなど、見た目のルールをかなり厳格に縛ってるから、こっちが細かく指示しなくても整った図になるのが嬉しい
構成図などの資料作成は割とこれ入れておけばOKぐらいのクオリティがある
「これ、どうやって作ってるんだろう?」って気になったアプリやサイトの実装を調べる方法があるの知ってる?
既存プロダクトを逆解析して、作り方を把握できる「REA」
Claude CodeやCursorなどのAIエージェントに、アプリの中身を調べる道具一式を持たせられる
・ログインで使う認証アプリの6桁コードが、30秒ごとに切り替わる仕組みを、アプリの中身から突き止めてる
・Chromeの恐竜ゲームは、速度6から始まって少しずつ上がり、13で頭打ちになる
・Notionでコピーしたときに、テキストとHTMLをどう書き込んでるかを、アプリの中のJavaScriptからクリップボードまで追ってる
など、こんなに細かいところまで仕様を把握できてしまう
しかも結論ごとに「根拠」と「わからなかったこと」をセットで返してくれるから、どこまでが確かな話なのか分けて読める
「この動き真似したいけど、作り方がわからない」で止まってたものを、AIと一緒に分解して仕組みから学べるのはかなり勉強になるはず
くるしば | ソフトバンクよりReact本発売中 retweeted
Claude Codeを作ってるチームが、自分たちのコードレビューの回し方を「How the Claude Code team does code review」でそのまま公開してた
コードの約90%をClaudeが書いてるチームなので、AIが書いたPRが大量に来る前提
全部人がレビューしてたら追いつかないので、レビュープロセスもAIで極限まで効率化してある
効率化のやり方が具体的で「そこまで決めてるんだ」ってなったところ
・人が見る量を変更の中身で決める。ドキュメントや文言の修正は自動チェックが通れば人の承認なし、普通の機能変更は1人、一番危ないところだけ2人
・AIレビューは、複数のエージェントが同時にバグを探したあと、別のエージェントたちが「これは本当に直す必要があるバグか」を投票する。十分な数が同意した指摘だけがPRに載る
・AIレビュアーには、REVIEW.mdで「このリポジトリでの失敗とは何か」「細かい指摘は何件まで」「見なくていいファイル」などの情報を先に渡しておく
・エージェントに書かせたPRは、そのエージェントに指示した本人がレビュアーに必ず入る
PRのテンプレなども公開されてて、すぐ真似できる形でまとまってるのがありがたい
くるしば | ソフトバンクよりReact本発売中 retweeted
AIエージェントに書かせたコード、動くけど中身はよくわからない…という人にちょうどいい「学習モード」をClaude Codeに追加しよう
Anthropic公式のプラグイン「learning-output-style」を入れると、Claudeがコードを全部書くんじゃなくて、要所の5〜10行だけをこっちに書かせてくれる
例えば認証の仕組みはClaudeが用意したうえで
「セッションは操作中に延長する?固定にする?セキュリティと使いやすさのトレードオフだから、handleSessionTimeout() を実装してみて」
みたいに、考えどころの関数だけを渡してくる
・定型コードや設定、単純なCRUDはClaudeがそのまま書く
・人間にかかせるのは処理の中身・エラー時の対応・データの持ち方みたいな、コードの意味がつかめてくる部分
・なぜその書き方にしたか、コードのどこにどんなパターンがあるかを「★ Insight」で2〜3点ずつ解説してくれる
教材を別に用意しなくても、いつもの開発の流れのまま数行ずつ自分で書くことになるので、読める・書けるが少しずつ増えていきそう
全部任せると速いけど、中身がわからないままだとエラーが出たときに自分で直せない
AIに作らせたコードが読めなくてモヤっとしてるなら、まずこれを入れて、数行ずつ書くところから始めてみるのが良さそう
Claude Codeを作ってるチームが、自分たちのコードレビューの回し方を「How the Claude Code team does code review」でそのまま公開してた
コードの約90%をClaudeが書いてるチームなので、AIが書いたPRが大量に来る前提
全部人がレビューしてたら追いつかないので、レビュープロセスもAIで極限まで効率化してある
効率化のやり方が具体的で「そこまで決めてるんだ」ってなったところ
・人が見る量を変更の中身で決める。ドキュメントや文言の修正は自動チェックが通れば人の承認なし、普通の機能変更は1人、一番危ないところだけ2人
・AIレビューは、複数のエージェントが同時にバグを探したあと、別のエージェントたちが「これは本当に直す必要があるバグか」を投票する。十分な数が同意した指摘だけがPRに載る
・AIレビュアーには、REVIEW.mdで「このリポジトリでの失敗とは何か」「細かい指摘は何件まで」「見なくていいファイル」などの情報を先に渡しておく
・エージェントに書かせたPRは、そのエージェントに指示した本人がレビュアーに必ず入る
PRのテンプレなども公開されてて、すぐ真似できる形でまとまってるのがありがたい
AIエージェントに書かせたコード、動くけど中身はよくわからない…という人にちょうどいい「学習モード」をClaude Codeに追加しよう
Anthropic公式のプラグイン「learning-output-style」を入れると、Claudeがコードを全部書くんじゃなくて、要所の5〜10行だけをこっちに書かせてくれる
例えば認証の仕組みはClaudeが用意したうえで
「セッションは操作中に延長する?固定にする?セキュリティと使いやすさのトレードオフだから、handleSessionTimeout() を実装してみて」
みたいに、考えどころの関数だけを渡してくる
・定型コードや設定、単純なCRUDはClaudeがそのまま書く
・人間にかかせるのは処理の中身・エラー時の対応・データの持ち方みたいな、コードの意味がつかめてくる部分
・なぜその書き方にしたか、コードのどこにどんなパターンがあるかを「★ Insight」で2〜3点ずつ解説してくれる
教材を別に用意しなくても、いつもの開発の流れのまま数行ずつ自分で書くことになるので、読める・書けるが少しずつ増えていきそう
全部任せると速いけど、中身がわからないままだとエラーが出たときに自分で直せない
AIに作らせたコードが読めなくてモヤっとしてるなら、まずこれを入れて、数行ずつ書くところから始めてみるのが良さそう
GitHubが無料で公開してる「GitHub Copilot CLI for Beginners」が、AIエージェントの入門にちょうどいい
CopilotのFreeプランで受講できるので、最初から最後まで無料でできる
ターミナルで動くAIエージェントの使い方を、インストールから全8章で学べる公式コース
・1つの書籍管理アプリを、最初の章から最後まで育てていく
・コードレビュー・デバッグ・テスト作成をAIに頼む流れを、手を動かして試せる
・自分専用のレビュー役AIを、Markdownファイル1つで作る
・よく使う手順を「スキル」にして、頼んだ内容に合わせて自動で読み込ませる
・MCPでGitHubやプロジェクトのファイル、最新のドキュメントにつなぐ
コード例も、レビューや解説で決まった出力が出るように作り込まれてて、教材としてかなり丁寧
「スキル」や「MCP」なども使える
AIエージェント使ってみたいけど、いきなりお金かけるのは...という人、一旦これをやってみてからClaude Codeなどの有料ツールを使ってみてもいいかも
Claude Codeで複数のタスクを並行して回そうとすると、1つ1つに長い作業をまとめて任せたくなる
でも長く任せるほど、途中で止まってたり、思ってた完成形と違ったりして、なかなかクオリティが上がらないの僕だけじゃないはず
Anthropic公式のOpus 5.5ガイドに、長い作業を任せるときのコツがまとまってた
・いつ止まっていつ進んでいいかを、CLAUDE.mdに書いておく
・ファイル削除みたいな危ないコマンドの許可確認は、オフにしないでおく
・コード全体の点検や移行みたいな大きい作業は、サブエージェントに分けて任せる
・やることリストをTASKS.mdに置いて、終わったら印を付けさせて、途中で見つけた作業も書き足させる
どれも「任せっぱなしでも、どこまで進んだか・次に何をやるか」がAIにも自分にも見えるようにする工夫で、並行で回すときこそ効きそう
並列でAIを使い始めた人は、まずこのガイドを読んでみるといいかも
Claude Codeの「eli5」ってプラグイン知ってる?
「/eli5 DNSはどうやって動いているの?」みたいに打つと、大きな絵と少ない言葉だけのHTMLで、その仕組みを「5歳児に説明するように」図解してくれる
・難しい概念や文章も、圧倒的にシンプル、簡単な説明になる
・出てくるのはチャットの文章じゃなくて、ブラウザで開けるHTMLだから、そのまま保存して見返せる
・利用を検討しているライブラリやツールなどをこれで比較検討するとかなり楽
自分が学習していてわからないことや、理解のために深ぼって調べたりしないといけないことがあったら、これにサクッと投げてみるとよさそう
くるしば | ソフトバンクよりReact本発売中 retweeted
Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた
「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる
「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる
・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る
Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい
Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた
「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる
「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる
・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る
Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい
バイブコーディングで作ったアプリ、どう動くか自分でわかってる?
自分のプロジェクトのコードの動きを、アニメーションとクイズ付きの講座に変えてくれるClaude Codeのスキル「codebase-to-course」が面白い
Claude Codeに「Teach me how this code works」と頼むと、手元のコードを読み込んで、ブラウザで開くだけで動く講座を作ってくれる
・実際のコードの横に、説明が入るので、どこで何をしてるかわかりやすい
・コードの各部分がチャットで会話するようなアニメーションで、データのやりとりを見せてくれる
・各章に、バグ探しや「この場面ならどうする?」みたいな、暗記じゃないクイズがある
コードは実際のファイルから書き換えずに抜き出して、自分のコードをそのまま教材にしてくれるのが嬉しい
AIで作ったアプリ、動くけど中で何が起きてるのかまで把握できてない人多いと思う
このスキルは特に非エンジニア向けに作られてて説明がやさしいのでおすすめ
くるしば | ソフトバンクよりReact本発売中 retweeted
GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう
AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット
Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える
流れはこんな感じ
・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる
各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい
AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ
GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう
AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット
Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える
流れはこんな感じ
・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる
各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい
AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ
シンプルなデザインはAIに作らせてもそこそこのクオリティでできるようになったけど、アニメーションは結構微妙な品質になりがち
そんな時におすすめ。VercelやLinearで働いてきたデザインエンジニアがアニメーションの作り方をスキルにまとめたの「emilkowalski/skills」
・今あるアニメーションを、決まったルールで厳しくチェックしてくれる
・プロジェクト全体の動きを見直して、優先順位つきの改善プランを出してくれる
・長すぎる名前や空のリストみたいな最悪のデータで、UIが崩れないか試してくれる
・ほかにも、動きを足すと良くなる場所探しや、カクつきの修正まで15本のスキルが入ってる
僕もあまりデザインの知見がないので、こういうの公開してくれるのは本当に助かる
DBの中身を見るのに、MySQLはこれ、Redisはこれ、SQLiteはこれ…ってツールを入れ分けなくてもよさそう
「DBX」は、MySQL・PostgreSQL・SQLite・Redis・MongoDBなど100種類以上のデータベースを、1つのアプリで開ける無料のDBクライアント
しかもアプリ本体は約25MBしかない
・テーブルの中身を表のまま見て、絞り込んだり編集したりできる
・補完つきのエディタでSQLを書ける
・テーブル同士のつながりをER図で出せる
・KafkaやRabbitMQみたいなメッセージキューの中身まで見られる
Mac・Windows・Linuxで動いて、アカウント登録もいらないのが気軽でいい
SQL勉強中なら、自分のアプリのDBを開いてER図を眺めるだけでも、テーブル同士がどうつながってるのか理解が進むはず
URLを渡すと、そのサイトをNext.jsのアプリとして組み直してくれるスキル
「AI Website Cloner Template」は、/clone-website にURLを渡すだけで、AIがサイトを調べて、Reactのコンポーネントに分けて作り直してくれる
作る段取りがしっかりしてるぶん、出来上がりもちゃんと使えるものになってるのが良い
・PCとスマホ、両方の幅で元サイトを見てから作るので、スマホで開いたときの見た目までそっくり
・最後に元サイトと並べて見比べて、ずれを自分で直すので、余白や配置みたいな細かいところまで寄せてくれる
・画像やフォントは元サイトから実物を抜き出して使うので、仮の画像や似たフォントで済まされない
・どのURLをどのページにするかまで調べるので、1ページだけじゃなく複数ページのサイトもまとめて組み直せる
・見た目を写すだけじゃなく、部品ごとのコンポーネントに分けて組み立てるので、あとから自分で編集しやすい
Next.jsでアプリを作る際に、一部でも良いなと思った部分があるサイトをこれで組み直して、良いと思うコンポーネントをピックアップする→組み合わせて調整
みたいな使い方はかなり良さそう
悪用やなりすましは厳禁
「Understand Anything」ってプラグイン知ってる?プロジェクトのコードを、ブラウザで触れる地図にしてくれるやつ
ファイル・関数・クラスと、そのつながりが1枚のグラフになって、ズームしたり検索したりしながら眺められる
中身を見てて「そこまでやってくれるの?」ってなったところ
・依存関係の順に、どこから読めばいいかをガイドツアーで案内してくれる
・初心者向け・PM向け・上級者向けみたいに、見る人に合わせて説明の細かさが変わる
・ジェネリクスやクロージャみたいな言語の仕組みが出てくると、注釈を付けてくれる
・この変更がどこまで影響するかも出してくれる
他人のコードを読むとき、最初の1ファイルを決めるのが一番しんどいので、そこを決めてくれるのはかなり助かるはず
くるしば | ソフトバンクよりReact本発売中 retweeted
くるしばさん (@shiba_program) のブログ記事です🐰
あなたの開発生産性を爆上げする、エンジニア向けAIツール22個
note.com/shiba_program/n/n78…
#CodeRabbit
フロントエンドのパフォーマンス改善を勉強したい人に、「画面がカクつくのはなぜか、どう直すか」をデモを触りながら学べる記事がある
「The Browser's Main Thread Is Expensive」
・JSとCSSのアニメーションを並べて重い処理を走らせるデモ → JSのほうだけ止まって、動きをCSSに任せると止まりにくい理由がわかる
・チャットが大量に流れるデモ → 「届いた瞬間に全部描画」と「20件ごとにひと息入れる」を切り替えて、処理を区切ると画面が固まらなくなるのを体感できる
・Markdownエディタのデモ → 「1文字ごとにプレビュー更新」と「入力が止まってから更新」を比べて、入力欄の引っかかりの直し方がわかる
・4,000個の粒子を動かすデモ → 重い計算を少しずつに分けると滑らかになるのが見える
対処法も「分割・まとめ打ち・優先順位・後回し」の4つに整理されてて、カクつく原因を探すときの見取り図になりそう
Reactで入力欄を作ってる人は、debounceのデモだけでも触ってみるといいはず
















































