本文へ移動
cccskills
無料GitHub で公開日本語紹介

show-me-the-components

Reactのコンポーネントの親子関係をツリー形式で示すスキル。各要素がapps/...とpackages/...のどちらに属するかや、useStateなどを併記して構成を把握します。

原文原文の説明を見る

Show how a react component tree is structured

humanlayer/humanlayer

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • コンポーネントの親子関係を把握したいとき
  • アプリやパッケージの所属先の確認
  • 複数のコンポーネント構成の比較
  • 階層とuseStateを一緒に確認したいとき

日本語での紹介

できること

Reactのコンポーネントがどのような親子関係で組み合わされているかを、字下げしたツリー形式で示します。各コンポーネントにはapps/...やpackages/...の所属先を添え、階層と配置場所を一緒に確認できる形にします。提示された出力例では、コンポーネントの下にuseStateなどの情報も記載します。

こんなときに便利

コンポーネントの構成を大まかにつかみたいときに向いています。親の下に何が置かれているかを追いたい場面や、複数の構成についてそれぞれのツリーを見比べたい場面で使えます。アプリ側とパッケージ側のどこから来た要素なのかを、親子関係と合わせて確認したい場合にも適しています。

使い方の例

  • 「このReactのコンポーネントツリーを、親子関係が分かるように示して」
  • 「各コンポーネントにapps/...かpackages/...の所属先を添えて」
  • 「それぞれの構成をツリーで並べ、useStateなどの情報も書いて」

注意点

特記事項はありません。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

  • SKILL.md328 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

show me how the different component trees would look and which apps/... or packages/... its from

<component> (apps/...) useState... ... <compoenent> (packages/...) ...

like just outline the tree in each case

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

agent-browser

無料概要あり

Webページの移動やフォーム入力、クリックをエージェントに任せ、情報抽出や画面保存、操作前後の比較まで行います。ブラウザ作業の自動化やWebアプリの確認に使えるスキル。

  • フォーム入力やクリックを自動化したいとき
  • Webページのテキスト抽出
  • ページのスクリーンショット・PDF保存
humanlayer/humanlayer1.2万2026年10月23日 更新

asd-ste100

無料概要あり

曖昧で読みにくい英文を、語の意味をそろえた短い能動態の文へ書き直すスキル。指示文やツール説明を見直し、修正理由と変更前後を表で確認できます。

  • 別のエージェントへの英文指示の明確化
  • 英語のツール説明やエラー文の簡素化
  • 英語を母語としない読者向けの文章整理
humanlayer/humanlayer1.2万2026年10月23日 更新

better-github-skill

無料概要あり

GitHubのPRの状態、レビューの会話、CI失敗のログを専用スクリプトで収集し、変更の確認状況や未解決の指摘、失敗したジョブとステップを調べるスキル。

  • PRの状態をまとめて確認したいとき
  • 未解決のレビューの会話の確認
  • CIの失敗ジョブとステップの調査
humanlayer/humanlayer1.2万2026年10月23日 更新

bump-version

無料概要あり

リリース時に対象パッケージの基準バージョンを更新し、関連ファイルの同期と生成結果を検証して、コミットからPRブランチへのプッシュまで進めるスキル。

  • リリース用のバージョンを更新したいとき
  • 関連ファイルのバージョン表記の同期
  • プッシュ前の生成バージョン検証
humanlayer/humanlayer1.2万2026年10月23日 更新

calldiff

無料概要あり

Git のコミット間や作業中のコードで、関数の呼び出し構造の違いを確認します。呼び出しツリーの表示や、指定した関数へ至る経路の調査にも使えます。

  • 変更前後の関数呼び出しを比較したいとき
  • ブランチ間の呼び出し構造レビュー
  • 起点から目的の関数への経路調査
humanlayer/humanlayer1.2万2026年10月23日 更新

chrome-devtools-cli

無料概要あり

ターミナルからブラウザのクリックや入力、ページ移動を自動化し、通信やエラー、表示速度も調べられる、Chrome DevToolsのCLI操作を支援するスキル。

  • フォーム入力やページ移動の自動化
  • ページや要素の画面撮影
  • 通信内容やコンソールエラーの調査
humanlayer/humanlayer1.2万2026年10月23日 更新

humanlayer のスキルをすべて見る

このスキルの問題を報告する