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

component-docs

Storybookからプロジェクト内のUI部品と設定項目、使用例を調べ、使い方の質問への回答や、似た部品を重複して作らず再利用する判断に役立てるスキルです。

原文原文の説明を見る

Look up the components of a project with Storybook, with their props and usage examples, to answer questions about them or to reuse them instead of building duplicates. Use when the project's agent instructions (such as AGENTS.md) or the user ask for it. For a UI change, use ui-workflow, which includes the same component lookup.

インストール方法を見る

こんなときに便利

  • 既存のUI部品を探したいとき
  • 部品の設定項目と使用例を確認
  • 部品の使い方を質問したいとき
  • 重複実装の前に再利用先を探す

日本語での紹介

できること

プロジェクト内のUI部品を調べ、使い方の質問に答えたり、再利用できる部品を探したりします。Storybookから部品の一覧、propsと呼ばれる設定項目、使用例を確認します。既存部品で対応できるかを調べることで、似た部品を重複して作る前の判断材料を得られます。

こんなときに便利

参加したばかりのプロジェクトで、どんな部品があるか把握したいときに向いています。部品に渡す設定や具体的な使い方を確認したい場面、これから作る画面に流用できるものを探す場面にも使えます。

使い方の例

  • 「このプロジェクトで使えるUI部品を調べて」
  • 「この部品のpropsと使用例を教えて」
  • 「新しく作る前に、再利用できる既存部品がないか確認して」

注意点

Storybookでの参照には11.0以降が必要で、対応するプレリリースやcanary版も対象です。未導入の場合や古い版の場合は、部品のソースファイルを読みます。アップグレードには利用者の承認が必要です。UI自体を変更する作業には、同じ部品検索を含むui-workflowを使います。

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

含まれるファイル(1)

  • SKILL.md1.2 KB

SKILL.md(原文)

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

Prerequisites:

  1. Storybook must be installed in the project. If it is not, read the components' source files instead.
  2. Storybook must be 11.0 or later. An 11.0 prerelease (11.0.0-alpha.x) or a canary build (0.0.0-pr-*) also counts. If it is older, invoke the /storybook-upgrade skill only after the user explicitly approves an upgrade; until then, read the components' source files instead.

Run every Storybook CLI command from the package where Storybook is installed (in a monorepo often a leaf package such as packages/ui).

If the sandbox blocks network access, request escalated permissions for Storybook CLI commands.

Run npx storybook skills component-docs and follow its output: it lists the commands that show this project's components, props, and usage examples, and when to use them.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

canary

無料日本語概要

Storybookのブランチごとの試験版パッケージを探し、必要に応じて公開処理を実行します。公開状況を確認し、導入や更新に使うコマンドを案内します。

  • ブランチの試験版を探したいとき
  • フォークPRの試験版を公開したいとき
  • 公開状況と導入コマンドの確認
storybookjs/storybook9.1万2026年10月17日 更新

docs-review

無料日本語概要

Storybookの/docs内の文書を、読者や目的に合わせてレビュー・改善・新規作成します。構成や説明例の見直しから、表記の整理、文書戦略の相談まで扱います。

  • 説明ページの構成や例を改善したいとき
  • 新機能の文書を起草したいとき
  • ページの種類や目次を相談したいとき
storybookjs/storybook9.1万2026年10月17日 更新

fix-linting-types-on-pr

無料日本語概要

GitHubのPRを取得し、lintとTypeScriptのエラーを修正してコミット・プッシュまで進めるスキル。フォーク由来のPRにも対応します。

  • PRのlintエラーを直したいとき
  • PRのTypeScriptエラー修正
  • フォーク由来のPRへの修正
storybookjs/storybook9.1万2026年10月17日 更新

github-qa-labels

無料日本語概要

QAテストで見つかったGitHubのIssueやPRを、リリース追跡用ラベルとバグの深刻度ラベルで整理し、複数件への付与にも対応するスキル。

  • QAの指摘をリリース別に整理
  • バグの深刻度を分類したいとき
  • 複数のIssueやPRへのラベル付与
storybookjs/storybook9.1万2026年10月17日 更新

handle-pr-comments

無料日本語概要

GitHub のプルリクエストに届いた未解決のレビュー指摘を一件ずつ整理し、利用者が選んだ方針に沿って修正・返信・解決済みへの更新を進めるスキル。

  • PR の未解決レビューに対応したいとき
  • 修正・返信・見送りを選びたいとき
  • 重複するレビュー指摘をまとめたいとき
storybookjs/storybook9.1万2026年10月17日 更新

init

無料日本語概要

Storybook未導入のプロジェクトに、公開状況に応じた11.0以降の版を新規導入し、プロジェクト固有の設定を行う別スキルへつなぐスキル。

  • Storybookを初めて導入したいとき
  • 安定版の状況に合わせた導入先の選択
  • 導入からプロジェクト固有の設定への移行
storybookjs/storybook9.1万2026年10月17日 更新

storybookjs のスキルをすべて見る

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