Storybook Codex Plugin 的 setup 技能Agent 化 UI 工作流的前置检查、动态指令获取与执行规范【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook本文围绕 Storybook 官方 Codex 插件中的setup技能Skill展开讲解它在 Agent 协作场景中的定位、触发时机与两项硬性前置检查剖析npx storybook skills get setup动态指令分发机制背后的源码支撑并结合仓库中插件目录结构、姊妹技能与 create-storybook 的兼容性服务帮助你在项目中正确启用Agentic SetupAgent 辅助的 Storybook 项目配置。setup 技能的定位Agent 化工作流的核心入口setup技能定义在 SKILL.md 中其 frontmatter 声明如下--- name: setup description: Use this skill when Storybook is already installed and the user wants a working preview file and stories for real components. ---description字段即技能的触发语义当 Storybook 已安装、且用户希望获得一个可工作的preview文件以及真实组件的 stories 时使用此技能。这与 Codex 插件 README 中对setup的说明一致——它负责把 Storybook 配置为 Agent 可协作的工作流agentic workflows自动配置项目使其能正确渲染组件并为多种组件类型生成 story 文件。从插件的目录结构看Storybook Codex 插件共包含四个技能各自承担不同阶段的任务技能文件职责initinit/SKILL.md项目中尚无 Storybook 时执行初始化npm create storybooklatest并安装storybook/addon-mcpsetupsetup/SKILL.md项目已有 Storybook为其完成预览配置并编写 storiesstoriesstories/SKILL.md要求 Agent 将所有 UI 工作都围绕 stories 展开upgradeupgrade/SKILL.md将 Storybook 升级到最新版本四个技能之间存在明确的路由关系setup不是无条件的它通过前置检查来决定是自己执行还是转交switch给init或upgrade。前置检查一Storybook 是否真实存在setup技能的第一步前置条件是确认 Storybook 存在package.json、.storybook/。如果不存在切换到$storybook:init。即 Agent 必须先验证项目根目录下同时具备package.json中的 Storybook 依赖与.storybook/配置目录。若二者缺失说明项目根本没有配置 Storybook此时正确的动作不是硬着头皮补配置而是转交给init技能——按照 init/SKILL.md 的流程先完成安装在项目根目录运行npm create storybooklatest安装最新版 Storybook在 10.6 正式发版之前应改为运行npm create storybooknext因为其余技能都要求至少 10.6。使用其他包管理器时选用对应命令如pnpm create storybooklatest或yarn create storybook。初始化成功后运行npx storybook add storybook/addon-mcp接入 MCP 能力对应仓库中的 addons/mcp 包。调用$storybook:setup技能继续完成项目特定配置例如.storybook/preview.ts。这一init 完成后自动衔接 setup的链路正是setup技能在 Agent 工作流中的标准入口。前置检查二Storybook 版本门禁10.6 及以上第二步前置条件对版本提出了硬性要求Storybook 必须至少为 10.6。在 10.6 未正式发版期间next预发版即满足要求如10.6.0-alpha.x任何 canary 构建0.0.0-pr-*同样满足。如果版本更老、或需要先升级/修复则切换到$storybook:upgrade——但仅当用户明确批准了对 Storybook 的升级时。这条门禁有三层值得注意的细节预发版与 canary 均被显式承认10.6.0-alpha.xnext通道与0.0.0-pr-*canary 构建都被视为至少 10.6。这与 Codex 插件 README 的 Requirements 章节完全呼应Storybook 10.6 or later (until 10.6 ships, thenextprerelease or any canary build qualifies)。升级必须获得用户显式授权版本不达标时setup不得自作主张执行升级只能转向upgrade技能且前提是用户明确批准。这是对 Agent 行为边界的显式约束——升级属于有副作用的重大变更技能文件用only if the user explicitly approved把决定权交还给用户。门禁失败时的正确行为是切换而非降级执行两条前置检查失败都对应switch to 另一个技能说明该插件的设计哲学是按技能路由处理项目状态而不是在单一技能里堆叠所有分支。动态指令获取npx storybook skills get setup通过两项前置检查后setup技能的核心操作是# 从项目根目录monorepo 中则从 Storybook 所在的包目录执行 npx storybook skills get setup紧接着是setup技能文件中加粗的关键行为约束Follow the printed Markdown precisely.Do not substitute your own plan.即严格遵循命令打印出的 Markdown 指令不得替换成 Agent 自拟的计划。这一设计值得展开说明指令是动态下发的而非静态写死在技能文件中。setup的 SKILL.md 本身只有十几行真正的配置步骤如何检测框架、如何写 preview 文件、如何按组件类型生成 stories由storybookCLI 在运行时打印。这样 Storybook 团队可以在不改动插件安装内容的情况下更新 Agent 指令。从项目根目录执行的 monorepo 适配括号内注明 monorepo 场景下应从 Storybook 所在的包目录执行确保 CLI 能正确解析该包内的 Storybook 配置。同一模式贯穿整个插件。stories/SKILL.md 中同样是运行npx storybook skills get stories并完整读取输出以获得强制性、有序的工作流mandatory, ordered workflow。可以看到skills get name是插件与 CLI 之间统一的指令分发协议。源码级佐证仓库中如何支撑这套机制setup技能并非孤立存在仓库内多处实现印证了它的工作方式1. 与 Claude 插件的同源双胞胎。claude-plugin 中的 storybook-setup/SKILL.md 与本文分析的 Codex 版内容几乎逐字相同唯一差异是技能切换的触发语法Codex 插件用$storybook:init/$storybook:upgradeClaude 插件用/storybook-init//storybook-upgrade。可以推断 Storybook 用同一份技能语义为不同 Agent 平台Codex、Claude Code生成了各自触发语法的插件变体setup的业务规则在两个平台间保持一致。2. create-storybook 中的包管理器感知命令。FinalizationCommand.ts 中定义了setupSkillCommand字段注释为Package-manager-awarestorybook skills get setupcommand shown to agents展示给 Agent 的、按包管理器适配的 setup 技能命令。这说明npm create storybook初始化完成后的收尾阶段会按用户实际使用的包管理器给出适配版本的skills get setup命令提示与 init 技能初始化后调用 setup的衔接逻辑闭环。3. AI 辅助设置的兼容性门禁。FeatureCompatibilityService.ts 中的supportsAISetupFeature方法检查AI-assisted setup (storybook skills get setup)能力static supportsAISetupFeature( renderer: SupportedRenderer, builder: SupportedBuilder, framework: SupportedFramework | null ): boolean { if (framework SupportedFramework.REACT_NATIVE_WEB_VITE) { return false; } return renderer SupportedRenderer.REACT builder SupportedBuilder.VITE; }从源码结构看AI 辅助设置即 setup 技能所触发的流程当前被限定在React 渲染器 Vite 构建器的组合上且明确排除了react-native-web-vite框架。这解释了为何该能力处于渐进开放状态Agent 化的自动配置只在验证过的项目形态上启用其他形态仍走传统手动配置路径。使用时应以npm create storybook初始化阶段的检测结果为准。4. 插件安装与更新方式。由于插件仍属实验性experimental尚未进入官方市场安装需手动添加 Storybook 市场codex plugin marketplace add storybookjs/storybook codex plugin add storybookstorybook codex plugin list --marketplace storybook更新插件的方式是先codex plugin remove storybookstorybook并移除市场再按安装步骤重装详见 Codex 插件 README。实操清单如何正确使用 setup 技能将以上规则浓缩为一份可执行清单先判断项目状态package.json有 Storybook 依赖且存在.storybook/目录 → 走setup否则 → 走initnpm create storybooknext直到 10.6 正式发版。核对版本号 10.6.0或10.6.0-alpha.xnext或0.0.0-pr-*canary。不达标时仅在用户明确同意升级的前提下切换upgrade技能。在正确目录执行monorepo 中进入 Storybook 所在包目录运行npx storybook skills get setup。严格按打印的 Markdown 执行不要基于自身经验改写步骤动态下发的指令才是权威版本。完成后衔接按 插件 README 的描述Agent 还可以继续用stories技能把后续所有 UI 改动落到 stories 上并通过插件工具集自动在 ADE 预览中打开相关故事供人工审阅。setup技能虽然文件极短却完整体现了 Storybook Agent 化工作流的三条设计原则技能按职责拆分并按状态路由init/setup/upgrade 各司其职、指令动态下发以保持权威性与可更新性skills get 严格遵循、高风险动作必须显式授权升级需用户批准。理解这套机制后你可以让编码 Agent 在既有 Storybook 项目中自动完成预览配置与 stories 编写把人工审阅聚焦在组件设计本身。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Storybook Codex Plugin 的 setup 技能：Agent 化 UI 工作流的前置检查、动态指令获取与执行规范
Storybook Codex Plugin 的 setup 技能Agent 化 UI 工作流的前置检查、动态指令获取与执行规范【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook本文围绕 Storybook 官方 Codex 插件中的setup技能Skill展开讲解它在 Agent 协作场景中的定位、触发时机与两项硬性前置检查剖析npx storybook skills get setup动态指令分发机制背后的源码支撑并结合仓库中插件目录结构、姊妹技能与 create-storybook 的兼容性服务帮助你在项目中正确启用Agentic SetupAgent 辅助的 Storybook 项目配置。setup 技能的定位Agent 化工作流的核心入口setup技能定义在 SKILL.md 中其 frontmatter 声明如下--- name: setup description: Use this skill when Storybook is already installed and the user wants a working preview file and stories for real components. ---description字段即技能的触发语义当 Storybook 已安装、且用户希望获得一个可工作的preview文件以及真实组件的 stories 时使用此技能。这与 Codex 插件 README 中对setup的说明一致——它负责把 Storybook 配置为 Agent 可协作的工作流agentic workflows自动配置项目使其能正确渲染组件并为多种组件类型生成 story 文件。从插件的目录结构看Storybook Codex 插件共包含四个技能各自承担不同阶段的任务技能文件职责initinit/SKILL.md项目中尚无 Storybook 时执行初始化npm create storybooklatest并安装storybook/addon-mcpsetupsetup/SKILL.md项目已有 Storybook为其完成预览配置并编写 storiesstoriesstories/SKILL.md要求 Agent 将所有 UI 工作都围绕 stories 展开upgradeupgrade/SKILL.md将 Storybook 升级到最新版本四个技能之间存在明确的路由关系setup不是无条件的它通过前置检查来决定是自己执行还是转交switch给init或upgrade。前置检查一Storybook 是否真实存在setup技能的第一步前置条件是确认 Storybook 存在package.json、.storybook/。如果不存在切换到$storybook:init。即 Agent 必须先验证项目根目录下同时具备package.json中的 Storybook 依赖与.storybook/配置目录。若二者缺失说明项目根本没有配置 Storybook此时正确的动作不是硬着头皮补配置而是转交给init技能——按照 init/SKILL.md 的流程先完成安装在项目根目录运行npm create storybooklatest安装最新版 Storybook在 10.6 正式发版之前应改为运行npm create storybooknext因为其余技能都要求至少 10.6。使用其他包管理器时选用对应命令如pnpm create storybooklatest或yarn create storybook。初始化成功后运行npx storybook add storybook/addon-mcp接入 MCP 能力对应仓库中的 addons/mcp 包。调用$storybook:setup技能继续完成项目特定配置例如.storybook/preview.ts。这一init 完成后自动衔接 setup的链路正是setup技能在 Agent 工作流中的标准入口。前置检查二Storybook 版本门禁10.6 及以上第二步前置条件对版本提出了硬性要求Storybook 必须至少为 10.6。在 10.6 未正式发版期间next预发版即满足要求如10.6.0-alpha.x任何 canary 构建0.0.0-pr-*同样满足。如果版本更老、或需要先升级/修复则切换到$storybook:upgrade——但仅当用户明确批准了对 Storybook 的升级时。这条门禁有三层值得注意的细节预发版与 canary 均被显式承认10.6.0-alpha.xnext通道与0.0.0-pr-*canary 构建都被视为至少 10.6。这与 Codex 插件 README 的 Requirements 章节完全呼应Storybook 10.6 or later (until 10.6 ships, thenextprerelease or any canary build qualifies)。升级必须获得用户显式授权版本不达标时setup不得自作主张执行升级只能转向upgrade技能且前提是用户明确批准。这是对 Agent 行为边界的显式约束——升级属于有副作用的重大变更技能文件用only if the user explicitly approved把决定权交还给用户。门禁失败时的正确行为是切换而非降级执行两条前置检查失败都对应switch to 另一个技能说明该插件的设计哲学是按技能路由处理项目状态而不是在单一技能里堆叠所有分支。动态指令获取npx storybook skills get setup通过两项前置检查后setup技能的核心操作是# 从项目根目录monorepo 中则从 Storybook 所在的包目录执行 npx storybook skills get setup紧接着是setup技能文件中加粗的关键行为约束Follow the printed Markdown precisely.Do not substitute your own plan.即严格遵循命令打印出的 Markdown 指令不得替换成 Agent 自拟的计划。这一设计值得展开说明指令是动态下发的而非静态写死在技能文件中。setup的 SKILL.md 本身只有十几行真正的配置步骤如何检测框架、如何写 preview 文件、如何按组件类型生成 stories由storybookCLI 在运行时打印。这样 Storybook 团队可以在不改动插件安装内容的情况下更新 Agent 指令。从项目根目录执行的 monorepo 适配括号内注明 monorepo 场景下应从 Storybook 所在的包目录执行确保 CLI 能正确解析该包内的 Storybook 配置。同一模式贯穿整个插件。stories/SKILL.md 中同样是运行npx storybook skills get stories并完整读取输出以获得强制性、有序的工作流mandatory, ordered workflow。可以看到skills get name是插件与 CLI 之间统一的指令分发协议。源码级佐证仓库中如何支撑这套机制setup技能并非孤立存在仓库内多处实现印证了它的工作方式1. 与 Claude 插件的同源双胞胎。claude-plugin 中的 storybook-setup/SKILL.md 与本文分析的 Codex 版内容几乎逐字相同唯一差异是技能切换的触发语法Codex 插件用$storybook:init/$storybook:upgradeClaude 插件用/storybook-init//storybook-upgrade。可以推断 Storybook 用同一份技能语义为不同 Agent 平台Codex、Claude Code生成了各自触发语法的插件变体setup的业务规则在两个平台间保持一致。2. create-storybook 中的包管理器感知命令。FinalizationCommand.ts 中定义了setupSkillCommand字段注释为Package-manager-awarestorybook skills get setupcommand shown to agents展示给 Agent 的、按包管理器适配的 setup 技能命令。这说明npm create storybook初始化完成后的收尾阶段会按用户实际使用的包管理器给出适配版本的skills get setup命令提示与 init 技能初始化后调用 setup的衔接逻辑闭环。3. AI 辅助设置的兼容性门禁。FeatureCompatibilityService.ts 中的supportsAISetupFeature方法检查AI-assisted setup (storybook skills get setup)能力static supportsAISetupFeature( renderer: SupportedRenderer, builder: SupportedBuilder, framework: SupportedFramework | null ): boolean { if (framework SupportedFramework.REACT_NATIVE_WEB_VITE) { return false; } return renderer SupportedRenderer.REACT builder SupportedBuilder.VITE; }从源码结构看AI 辅助设置即 setup 技能所触发的流程当前被限定在React 渲染器 Vite 构建器的组合上且明确排除了react-native-web-vite框架。这解释了为何该能力处于渐进开放状态Agent 化的自动配置只在验证过的项目形态上启用其他形态仍走传统手动配置路径。使用时应以npm create storybook初始化阶段的检测结果为准。4. 插件安装与更新方式。由于插件仍属实验性experimental尚未进入官方市场安装需手动添加 Storybook 市场codex plugin marketplace add storybookjs/storybook codex plugin add storybookstorybook codex plugin list --marketplace storybook更新插件的方式是先codex plugin remove storybookstorybook并移除市场再按安装步骤重装详见 Codex 插件 README。实操清单如何正确使用 setup 技能将以上规则浓缩为一份可执行清单先判断项目状态package.json有 Storybook 依赖且存在.storybook/目录 → 走setup否则 → 走initnpm create storybooknext直到 10.6 正式发版。核对版本号 10.6.0或10.6.0-alpha.xnext或0.0.0-pr-*canary。不达标时仅在用户明确同意升级的前提下切换upgrade技能。在正确目录执行monorepo 中进入 Storybook 所在包目录运行npx storybook skills get setup。严格按打印的 Markdown 执行不要基于自身经验改写步骤动态下发的指令才是权威版本。完成后衔接按 插件 README 的描述Agent 还可以继续用stories技能把后续所有 UI 改动落到 stories 上并通过插件工具集自动在 ADE 预览中打开相关故事供人工审阅。setup技能虽然文件极短却完整体现了 Storybook Agent 化工作流的三条设计原则技能按职责拆分并按状态路由init/setup/upgrade 各司其职、指令动态下发以保持权威性与可更新性skills get 严格遵循、高风险动作必须显式授权升级需用户批准。理解这套机制后你可以让编码 Agent 在既有 Storybook 项目中自动完成预览配置与 stories 编写把人工审阅聚焦在组件设计本身。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
