Skip to content
cccskills
FreePublished on GitHub

pr

Create a draft pull request for reviewing Storybook changes. Prepare a title, required labels, and a description using the repository template, including verified manual testing steps that another maintainer can follow.

OriginalShow the original description

Creates a pull request following Storybook conventions. Use when creating PRs, opening pull requests, or submitting changes for review.

See how to install

Good for

  • Submit Storybook changes for review
  • Choose category, CI, and manual QA labels
  • Prepare reproducible manual testing instructions

Files included (1)

  • SKILL.md3.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Create Pull Request

Creates a PR following Storybook conventions.

Title format

[Area]: [Description]

  • Area is capitalized, no spaces (dashes allowed)
  • Examples:
    • CSFFactories: Fix type export
    • Nextjs-Vite: Add support
    • CLI: Fix automigrate issue

Labels

Add these labels to the PR:

Category (required, pick one):

  • bug - fixes incorrect behavior
  • maintenance - user-facing maintenance
  • dependencies - upgrading/downgrading deps
  • build - internal build/test updates (no changelog)
  • cleanup - minor cleanup (no changelog)
  • documentation - docs only (no changelog)
  • feature request - new feature
  • BREAKING CHANGE - breaks compatibility
  • other - doesn't fit above

CI (required, pick one):

  • ci:normal - standard sandbox set; default for most code changes
  • ci:merged - merged sandbox set
  • ci:daily - daily sandbox set; use this when changes affect prerelease sandboxes or sandboxes pinned to a framework or React version other than latest
  • ci:docs - documentation-only changes (use with documentation category)

Canary (optional):

  • ci:canary - publish pkg.pr.new canary packages for an in-repo PR; later pushes republish while the label remains. Does nothing on fork PRs. To canary a fork PR, a maintainer runs publish-canary.yml with the pr input; do not ask the fork author to publish. Do not add this label unless the user asks for a canary.

QA (required, pick one):

Tells the release team whether manual QA is needed before the next minor release.

  • qa:needed — a human must manually verify this PR at release time
  • qa:skip — no per-PR manual QA needed at release time

Heuristics:

  • User explicitly asked for manual QA before release → qa:needed
  • Part of a larger project that gets holistic QA (not per-PR) → qa:skip
  • Touches paths, filesystem, or anything that could break on Windows → qa:needed
  • Complex change spanning multiple areas that must work together → qa:needed
  • Small change in central/shared code with high side-effect risk (e.g. layout CSS in shared UI) → qa:needed
  • Simple, straightforward change → qa:skip
  • Unsure → ask the user whether manual QA before minor release is necessary

PR body

Read .github/PULL_REQUEST_TEMPLATE.md from the repository root.

Copy that template EXACTLY, including all HTML comments (<!-- ... -->). Fill in the relevant sections based on the changes, but keep all comments intact.

Manual testing (required)

The Manual testing section is mandatory — never leave it empty. Write steps for a separate maintainer, not a log of how you tested.

Each step should be:

  • Clear and easy to follow
  • Copy-pasteable shell commands where applicable
  • Explicit about what behavior to inspect (expected outcome, not just "check it works")
  • Linked to specific stories for UI changes, or to build artifacts when relevant
  • Lists areas most likely to regress and worth extra scrutiny

Verify your own steps first — run through them locally before opening the PR.

When useful, link to published Chromatic Storybooks (CI must finish first; links won't work immediately after opening the PR):

  • Internal UI: https://<branch>--635781f3500dd2c49e189caf.chromatic.com/?path=/story/<story_id>
  • React Vite TS: https://<branch>--630511d655df72125520f051.chromatic.com/?path=/story/<story_id>

Replace <branch> with Chromatic's normalized slug (special chars → dashes, e.g. feature/foo → feature-foo) and <story_id> with the story path (e.g. example-button--primary).

Command

Always create PRs in draft mode:

gh pr create --draft --title "<Area>: <Description>" --body "<FILLED_TEMPLATE>" --label "<category>,<ci>,<qa>"

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

canary

FreeSummary

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/storybook91.3KUpdated Oct 18, 2026

component-docs

FreeSummary

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/storybook91.3KUpdated Oct 18, 2026

docs-review

FreeSummary

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/storybook91.3KUpdated Oct 18, 2026

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/storybook91.3KUpdated Oct 18, 2026

github-qa-labels

FreeSummary

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/storybook91.3KUpdated Oct 18, 2026

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/storybook91.3KUpdated Oct 18, 2026

See all skills by storybookjs

Report a problem with this skill