mcpField
S
storybook

storybook

github.com/fandhe-ai開発488 回インストール4 日前に更新
リポジトリ

storybook について

storybook は、Storybook を使う人向けの公式ドキュメント参照スキルです。タスクをカテゴリに対応付け、README から個別ページを探す手順を案内します。

主な機能

  1. 01タスクからドキュメントカテゴリを特定
  2. 02README からページを検索
  3. 03設定、テスト、ドキュメントを網羅
  4. 04サンプルとスクリプトの索引

活用シーン

  1. 01Storybook のインストールや設定方法の確認
  2. 02ストーリー作成やテスト方法の調査
  3. 03API や Doc Block の使い方の参照

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill storybook

インストール後、Claude Code で/storybookを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/api/
arg-types.md
cli-options.md
csf.md
references/api/doc-blocks/
arg-types.md
canvas.md
color-palette.md
controls.md
description.md
icon-gallery.md
markdown.md
meta.md
primary.md
README.md
source.md
stories.md
story.md
subtitle.md
table-of-contents.md
title.md
typeset.md
unstyled.md
use-of.md
references/api/main-config/
addons.md
babel.md
build.md
core.md
docs.md
env.md
features.md
framework.md

詳細

プロジェクトの README より

Storybook リファレンス

Storybook 公式ドキュメントを網羅した API リファレンススキル。 ユーザーのタスクに応じて適切な README.md を読み、そこから個別ファイルへ辿ること。

ディレクトリ構成

skills/storybook/
  SKILL.md
  references/
    get-started/
      README.md
      browse-stories.md
      frameworks.md
      install.md
      setup.md
      whats-a-story.md
    writing-stories/
      README.md
      args.md
      build-pages.md
      decorators.md
      loaders.md
      mocking-modules.md
      mocking-network-requests.md
      mocking-providers.md
      multiple-components.md
      naming-and-hierarchy.md
      parameters.md
      play-function.md
      tags.md
      typescript.md
    writing-tests/
      README.md
      accessibility-testing.md
      in-ci.md
      interaction-testing.md
      portable-stories.md
      snapshot-testing.md
      test-coverage.md
      vitest-addon.md
      visual-testing.md
    writing-docs/
      README.md
      autodocs.md
      build-documentation.md
      code-panel.md
      doc-blocks.md
      mdx.md
    essentials/
      README.md
      actions.md
      backgrounds.md
      controls.md
      highlight.md
      measure-and-outline.md
      toolbars-and-globals.md
      viewport.md
    configure/
      README.md
      addons.md
      compilers.md
      environment-variables.md
      features-and-behavior.md
      frameworks.md
      images-and-assets.md
      sidebar-and-urls.md
      story-layout.md
      story-rendering.md
      styling-and-css.md
      telemetry.md
      theming.md
      typescript.md
    builders/
      README.md
      builder-api.md
      vite.md
      webpack.md
    sharing/
      README.md
      design-integrations.md
      embed.md
      package-composition.md
      publish-storybook.md
      storybook-composition.md
    api/
      README.md
      arg-types.md
      cli-options.md
      csf.md
      new-frameworks.md
      parameters.md
      main-config/
        README.md
        addons.md
        babel.md
        build.md
        core.md
        docs.md
        env.md
        features.md
        framework.md
        indexers.md
        log-level.md
        manager-head.md
        preview-annotations.md
        preview-body.md
        preview-head.md
        refs.md
        static-dirs.md
        stories.md
        swc.md
        tags.md
        typescript.md
        vite-final.md
        webpack-final.md
      doc-blocks/
        README.md
        arg-types.md
        canvas.md
        color-palette.md
        controls.md
        description.md
        icon-gallery.md
        markdown.md
        meta.md
        primary.md
        source.md
        stories.md
        story.md
        subtitle.md
        table-of-contents.md
        title.md
        typeset.md
        unstyled.md
        use-of.md
      portable-stories/
        README.md
        jest.md
        playwright.md
        vitest.md
  samples/
    README.md
    accessibility-testing.md
    args-composition.md
    autodocs.md
    basic-story.md
    decorators.md
    global-styles-setup.md
    loaders.md
    parameters.md
    play-function.md
  scripts/
    README.md
    addons.md
    build.md
    cli.md
    install.md
    sandbox.md
    test.md
    upgrade.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

  1. 下記マッピング表でタスクに対応するカテゴリを探す
  2. そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
  3. 該当ページの .md を Read して詳細を確認する

タスク → カテゴリ マッピング

タスクカテゴリ参照 README
インストール、セットアップ、フレームワーク選択、ストーリーとは何かget-startedreferences/get-started/README.md
Args、Decorators、Play function、Loaders、Tags、Mocking、TypeScriptwriting-storiesreferences/writing-stories/README.md
Interaction テスト、A11y テスト、Visual テスト、Vitest addon、CI、テストカバレッジwriting-testsreferences/writing-tests/README.md
Autodocs、MDX、Doc Blocks、ドキュメントビルド、Code Panelwriting-docsreferences/writing-docs/README.md
Actions、Controls、Viewport、Backgrounds、Toolbars、Highlightessentialsreferences/essentials/README.md
CSS、TypeScript、Theming、Telemetry、環境変数、サイドバー、アドオン登録、コンパイラーconfigurereferences/configure/README.md
Vite、Webpack、Builder APIbuildersreferences/builders/README.md
Storybook の公開・共有、デザインツール連携、Composition、埋め込みsharingreferences/sharing/README.md
CSF、ArgTypes、Parameters、CLI オプション、新フレームワーク追加apireferences/api/README.md
main.js / main.ts の framework、stories、addons、features 等の設定api/main-configreferences/api/main-config/README.md
Canvas、Source、Meta、Controls 等の Doc Block コンポーネントapi/doc-blocksreferences/api/doc-blocks/README.md
Vitest・Jest・Playwright での Portable Storiesapi/portable-storiesreferences/api/portable-stories/README.md
典型的な使い方・実装例を知りたいsamplessamples/README.md
インストール・CLI コマンド・ビルド・テスト実行・アップグレードを知りたいscriptsscripts/README.md

コメント

Markdown 対応