mcpField
S
storybook

storybook

github.com/fandhe-ai开发488 次安装4 天前更新
代码仓库

关于 storybook

storybook 是面向 Storybook 使用者的官方文档 API 参考技能。它按任务映射到分类目录，再引导查找具体文档页面。

主要功能

  1. 01按任务映射文档类别
  2. 02通过 README 定位页面
  3. 03涵盖配置、测试与文档
  4. 04提供示例和脚本索引

适用场景

  1. 01查找 Storybook 安装和配置说明
  2. 02了解故事编写及测试方法
  3. 03查阅 API 或 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