SuperAPI AI 工具集

ui-workflow

前端与建站

查看项目

更新于 10-17 20:00

技能介绍

用途

ui-workflow 是 Storybook 官方提供的技能,面向在已安装 Storybook 的项目中进行 UI 变更的完整工作流。它帮助开发者在改动前端组件时,先查找可复用的组件,再编写或更新对应的 story,运行 story 测试,并整理出可供审阅的 Storybook 展示。该技能强调让 story 与每个新建、修改或删除的前端组件保持同步。

前置条件

项目中必须已安装 Storybook。若需要初始化,可调用 /storybook-init 技能,但前提是用户明确调用了该技能并同意安装 Storybook。

Storybook 版本须为 11.0 或更高;11.0 预发布版(11.0.0-alpha.x)或 canary 构建(0.0.0-pr-*)也视为满足。用户提出“设置或安装 Storybook”的请求,可视为同意执行所需的 Storybook 升级;对于其他请求,只有在用户明确批准升级后,才能调用 /storybook-upgrade 技能。

Storybook 开发服务器和所有 Storybook CLI 命令必须在同一工作目录下运行,即安装 Storybook 的那个包(在 monorepo 中通常是 packages/ui 这样的叶子包)。若沙箱阻止网络访问或端口,需要为 Storybook CLI 命令申请提升权限,否则开发服务器可能出现难以理解的失败,例如找不到可绑定的空闲端口。

主要能力与使用方式

运行 npx storybook skills ui-workflow 并完整阅读输出,可获得处理 UI 变更、编写 story 以及保持 story 同步的强制、有序工作流。该工作流说明了如何编写 story、预览 story,以及展示经过整理的 Storybook 审阅视图。

部分命令需要正在运行的 Storybook 开发服务器:

  • 若已有开发服务器在为此项目的 Storybook 提供服务(通常探测 http://localhost:6006),应复用而不是再启动一个。
  • 否则在后台启动一个服务器,尽量使用项目偏好的包管理器和 package.json 中已有的 Storybook 脚本(例如 npm run storybook),不要自创命令。
  • 在运行需要服务器的命令前,等待 URL 有响应。

开发服务器属于交付物的一部分,而不是临时的验证工具:工作完成后应让它继续运行,方便用户继续浏览 story;验证结束后不要关闭它。

适用场景

适用于在已安装 Storybook 11.0+ 的项目中开发、修改或删除前端组件,并需要同步维护 story、运行 story 测试和生成审阅预览的团队与开发者。

限制

资料未提供该技能的具体收费、价格、支持平台、性能效果或更细的使用步骤;这些事实暂未提供。