storybook

v2026.09.24

Storybook (UI コンポーネントカタログ・テストツール) リファレンス。 story, CSF (Component Story Format)、args, argTypes, decorators、 play function、interaction tests、autodocs、 main.ts / preview.ts 設定、アドオン (a11y, controls, viewport, themes)。

GitHub
Install command
npx skhub add fandhe-ai/storybook
Markdown
SKILL.md

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
Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

Not specified

Source path

skills/storybook

Default branch

main

Latest commit

f360956

Tree SHA

7af33bc