跳到正文
cccskills
免费在 GitHub 公开

rebuild-restart-storybook

Rebuild modified packages in the Storybook monorepo and restart its internal UI after code changes. The workflow provides the running URL and can optionally create a UI review of stories related to the changes.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Rebuild and restart the internal Storybook UI after changes to internal Storybook code (core, addons, frameworks, renderers, libs, etc.), then optionally display a UI review. Use after editing any package in the Storybook monorepo's code/ directory, or when the user asks to rebuild and/or restart Storybook.

查看安装方法

适用场景

  • Rebuilding after changes to Storybook internals
  • Restarting the internal Storybook UI
  • Reviewing stories related to UI changes
  • Resolving a port conflict during startup

包含的文件(1)

  • SKILL.md2.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Rebuild and Restart Storybook

After making changes to internal Storybook code (core, addons or otherwise), follow this workflow.

Step 1: Ask whether to rebuild and restart (in case of model invocation)

Unless the user explicitly ran /rebuild-restart-storybook, ask the user whether they want to rebuild and restart Storybook. If they decline, stop here.

Step 2: Determine modified packages

Build a space-separated list of the monorepo packages that were modified in the conversation. For each modified package, find its Nx project name in the project.json file in that package's directory (the name field), not the package.json name.

For example, if code/addons/review and code/addons/vitest were modified, the list is addon-review addon-vitest.

Step 3: Run the build and start commands in sequence

Run these in the code directory, in order. Substitute <extra packages> with the list from Step 2.

rm -rf node_modules/.cache
yarn
yarn build storybook <extra packages>

Then, run in the background:

NODE_OPTIONS="--preserve-symlinks" yarn storybook:ui --no-open

Handle an occupied port

A Storybook may already be running. If the port is occupied, cancel the start, kill the old process to free the port, then start Storybook again.

Step 4: Provide the URL and ask about a review

Once Storybook has started, give the user the URL. Then ask whether they want to display a review.

Step 5: Display the review

If the user wants a review, use Storybook's review-create MCP tool to create a UI review of relevant stories. Pick a set of stories related to the entirety of the conversation so far.

If there are no relevant stories because no UI elements were touched, ask the user what they would like to see a review for.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

canary

免费

Find a trial Storybook package for a specific branch, or trigger its publication when needed. Check release progress and obtain the package reference or commands for creating or upgrading a project with that build.

中文简介正在准备中。当前显示英语简介。

  • Find a trial package for a Storybook branch
  • Publish a trial build for a fork pull request
  • Check publication progress and installation commands
storybookjs/storybook9.1万2026年10月18日 更新

Look up a project's existing UI components in Storybook, including their props, or configuration inputs, and usage examples. Use the findings to answer questions and identify components to reuse before building duplicates.

中文简介正在准备中。当前显示英语简介。

  • Find existing UI components
  • Check component props and usage examples
  • Answer questions about component usage
storybookjs/storybook9.1万2026年10月18日 更新

Review, improve, rewrite, or draft Storybook documentation in /docs. Assess each page’s purpose, audience, structure, and examples, then make suitable edits or provide a content plan, with formatting checks after changes.

中文简介正在准备中。当前显示英语简介。

  • Improve the structure and examples of a documentation page
  • Draft documentation for a new feature
  • Plan page types and outlines
storybookjs/storybook9.1万2026年10月18日 更新

Check out a GitHub pull request, fix linting and TypeScript errors, and commit and push the changes. The workflow supports forked pull requests and repeats type checks to verify fixes while keeping changes focused on these errors.

中文简介正在准备中。当前显示英语简介。

  • Fix linting errors in a pull request
  • Resolve TypeScript errors in a pull request
  • Apply fixes to a pull request from a fork
storybookjs/storybook9.1万2026年10月18日 更新

Organize GitHub issues and pull requests found during quality assurance testing. Apply release tracking labels, classify bugs by four severity levels, and label multiple findings while keeping documentation issues and feature requests outside the severity scheme.

中文简介正在准备中。当前显示英语简介。

  • Group QA findings by release
  • Classify bugs by severity
  • Apply labels to multiple issues and pull requests
storybookjs/storybook9.1万2026年10月18日 更新

Work through unresolved GitHub pull request reviews one at a time. The skill explains each comment, proposes a fix, asks how to proceed, and handles chosen edits, replies, commits, and thread resolution.

中文简介正在准备中。当前显示英语简介。

  • Addressing unresolved pull request review comments
  • Choosing between a code fix, a reply, or skipping a comment
  • Handling duplicate review comments together
storybookjs/storybook9.1万2026年10月18日 更新

查看 storybookjs 的全部技能

报告此技能的问题