mcpField
S
storybook

storybook

github.com/fandhe-aiDevelopment488 installsUpdated 4d ago
Repository

About storybook

storybook is a reference skill for Storybook’s official documentation, aimed at people working with Storybook. It maps tasks to documentation categories and guides lookup from category indexes to individual pages.

Key features

  1. 01Map tasks to documentation categories
  2. 02Locate pages through README indexes
  3. 03Cover configuration, testing, and docs
  4. 04Index samples and scripts

Use cases

  1. 01Find Storybook installation and configuration guidance
  2. 02Learn story authoring and testing methods
  3. 03Look up API or Doc Block usage

Install

Copy the command and run it in a terminal.

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

After installing, type/storybookin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project 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

Comments

Markdown supported