Build: Apply docs formatting, add docs:check script#34330
Merged
Conversation
- Unignore docs content from formatter
- Run formatter on docs
- Remove redundant sidebar title fields in frontmatter
- Remove all unnecessary prettier-ignore-start/end directives
- Some remain (mostly for MDX snippets), because oxfmt does not support start/end directives, but _does_ support prettier's 🤷🏻♂️
- https://oxc.rs/docs/guide/usage/formatter/ignoring.html#ignore-comments
- Standardize newline treatment around and inside block-level elements (Callout, If, details, etc)
- Replace all IfRenderer instances with If
kylegach
commented
Mar 26, 2026
kylegach
commented
Mar 26, 2026
| "trailingComma": "es5", | ||
| "singleQuote": true, | ||
| "arrowParens": "always", | ||
| "sortPackageJson": false, |
Contributor
There was a problem hiding this comment.
Completly unrelated but I forgot to tell you about this.
We're currently using sort-package-json in scripts when oxfmt also supports it natively
Contributor
There was a problem hiding this comment.
Maybe worth enabling this and opening another PR
- Add automated checks for more things
* next: (65 commits) refactor(ember): simplify core preset and remove builder.options refactor(angular): simplify core preset and remove builder.options refactor(server-webpack5): simplify core preset and remove builder.options refactor(react-webpack5): simplify core preset and remove builder.options refactor(nextjs-vite): simplify core preset and remove builder.options fix: pass missing arguments to presets.apply in getFrameworkBuilderOptions chore: add explicit return type for builder options fix: guard framework.options access refactor: deduplicate framework builder options logic across presets fix: preserve nextjs framework builder option semantics fix: apply oxfmt formatting refactor(frameworks): consolidate storybook/internal/common imports refactor(frameworks): extract getBuilderOptions helper across framework presets Preserve edges for related Vite module nodes discovered before their file path is known Move tests to separate file fix(react): try .tsx fallback when resolving .js ESM imports in docgen Fix lint just dont be stupid CSF4: Fix duplicate preview loading issue in Vitest Bump version from "10.4.0-alpha.4" to "10.4.0-alpha.5" [skip ci] ...
jonniebigodes
requested changes
Mar 31, 2026
Contributor
jonniebigodes
left a comment
jonniebigodes
left a comment
There was a problem hiding this comment.
This is shaping up nicely. However, some documentation items still need to be fixed and re-checked against oxfmt to ensure we are not repeating ourselves.
| {/* prettier-ignore-start */} | ||
|
|
||
| ```md title="ButtonDocs.mdx" | ||
| ```mdx title="ButtonDocs.mdx" |
Contributor
There was a problem hiding this comment.
It seems that it missed the {/* prettier-ignore-start */} / {/* prettier-ignore-end */} block here. If we're going to apply it in the other docs (i.e., AI/manifests.mdx) we should also do it here
Contributor
Author
There was a problem hiding this comment.
The only remaining prettier-ignore comments are those necessary to prevent auto-formatting issues. For this example, it's necessary to prevent import * as ButtonStories... from becoming import \* as ButtonStories....
Also, neither the formatter nor the script removes these comments. I did that manually with a find/replace, because it requires judgement.
| @@ -1,256 +1,245 @@ | |||
| --- | |||
| title: 'Portable stories in Jest' | |||
Contributor
There was a problem hiding this comment.
Heads up, can you check the links on the page? They seem to be working on the editor, but they break in both the development mode and on the live documentation. Some redirect or any other factor may be impacting this and while we're at it wouldn't hurt to check the other pages as well for this section.
storybook-docs-portable-stories-jest-broken.mp4
Contributor
Author
There was a problem hiding this comment.
Thanks. I'll look into it. That doesn't need to block this PR, though.
* next: (74 commits) format format Remove dead code Fix edge case of live region checker Iterate on LSP typecheck Fix up toHaveLiveRegion Bring code into a sane state before trying to fix expect.extend WIP - blind stabs WIP Improve mock cleanup and comment clarity Address reviewer feedback: fix regex lastIndex, move dep to addon, add a11y assertive, refactor stories Remove re-exports from components, move toHaveLiveRegion to manager/utils, clean up stories Plan: address reviewer feedback on 4 comments Remove LiveRegion component and useAnnouncer hook; integrate announce into TestProviderRender Add LiveRegion component, test utility, stories, and unit tests Initial plan Refactor ChangeDetectionService and GitDiffProvider to simplify git state change handling. Removed unnecessary unsubscribe logic and improved watcher management for better performance and clarity in change detection. Normalize file paths and improve story ID management in ChangeDetectionService. Bump version from "10.4.0-alpha.6" to "10.4.0-alpha.7" [skip ci] Enhance GitDiffProvider with additional comments clarifying the design choices for single subscriber support and error handling during watcher failures. This improves code readability and maintains predictable behavior in change detection. ...
- Will handle in separate PR
|
View your CI Pipeline Execution ↗ for commit 34dd9c0
☁️ Nx Cloud last updated this comment at |
kylegach
changed the title
docs-review skillcheck-docs script
kylegach
changed the title
check-docs scriptdocs:check script
- All MDX snippets use `mdx` syntax - Standardize Callout use for Preview features - Ignore formatting for some exceptional snippets - Fix malformed details + summary - Remove extraneous code block fences and ignore comments
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughBroadened oxfmt configuration ignore/override scope and adjusted formatter options; applied widespread documentation formatting normalizations across docs and snippet files (removed prettier-ignore wrappers, standardized frontmatter/title quoting, list markers, callout indentation, fenced languages, and self-closing tag spacing). Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
♻️ Duplicate comments (1)
docs/api/doc-blocks/doc-block-unstyled.mdx (1)
31-31:⚠️ Potential issue | 🟡 MinorRemove orphaned
prettier-ignore-enddirective.This
{/* prettier-ignore-end */}has no corresponding{/* prettier-ignore-start */}and should be removed.🧹 Proposed fix
-{/* prettier-ignore-end */} - Yields:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/doc-blocks/doc-block-unstyled.mdx` at line 31, Remove the orphaned JSX comment token `{/* prettier-ignore-end */}` from doc-block-unstyled.mdx (it has no matching `{/* prettier-ignore-start */}`); simply delete that standalone directive so there is no dangling prettier-ignore marker left in the file.
🟡 Minor comments (18)
docs/configure/telemetry.mdx-32-32 (1)
32-32:⚠️ Potential issue | 🟡 MinorHyphenate “One-way” in the telemetry list item.
Line 32 should use “One-way hash” (compound adjective) for correct grammar in user-facing docs.
Suggested fix
-- One way hash of the IP address where the event occurred for spam detection. +- One-way hash of the IP address where the event occurred for spam detection.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/telemetry.mdx` at line 32, Update the telemetry list item that currently reads "One way hash of the IP address where the event occurred for spam detection." to use the compound adjective "One-way" so it reads "One-way hash of the IP address where the event occurred for spam detection."; locate the exact text "One way hash of the IP address where the event occurred for spam detection." in the docs/configure/telemetry content and replace "One way" with "One-way".docs/writing-docs/build-documentation.mdx-29-29 (1)
29-29:⚠️ Potential issue | 🟡 MinorHyphenate compound adjective "top-level".
The phrase "top level item" should use a hyphen when the compound modifier precedes the noun.
📝 Proposed grammar fix
-- The top level item refers to the primary story for your component. +- The top-level item refers to the primary story for your component.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-docs/build-documentation.mdx` at line 29, Update the phrasing "top level item" to the hyphenated compound adjective "top-level item" in the documentation string so the compound modifier correctly precedes the noun; locate the sentence containing "The top level item refers to the primary story for your component." and replace it with "The top-level item refers to the primary story for your component." to apply the grammar fix.docs/writing-stories/stories-for-multiple-components.mdx-54-54 (1)
54-54:⚠️ Potential issue | 🟡 MinorHyphenate "third-party" as a compound adjective.
When modifying a noun, "third-party" should be hyphenated.
✏️ Suggested fix
-- Use caution with components that include third party libraries +- Use caution with components that include third-party libraries🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/stories-for-multiple-components.mdx` at line 54, The sentence "Use caution with components that include third party libraries" uses "third party" as a compound adjective and should be hyphenated; update the text (search for the string "Use caution with components that include third party libraries" or the phrase "third party libraries") to "third-party libraries" so the compound adjective is correct.docs/writing-stories/stories-for-multiple-components.mdx-58-59 (1)
58-59:⚠️ Potential issue | 🟡 MinorGrammar: missing article and awkward repetition.
The sentence has a missing "the" before "children arg" and repetitive "allow you to" phrasing.
✏️ Suggested fix
-We're currently working on improving the overall experience for the children arg and allow you to edit children arg in a control and allow you to use other types of components in the near future. But for now you need to factor in this caveat when you're implementing your stories. +We're currently working on improving the overall experience for the children arg, allowing you to edit it via a control and use other types of components in the near future. But for now, you need to factor in this caveat when you're implementing your stories.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/stories-for-multiple-components.mdx` around lines 58 - 59, The sentence about children arg is missing the article "the" and repeats "allow you to"; update the sentence to read more smoothly by adding "the" before "children arg" and rephrasing to remove repetition (e.g., "improving the overall experience for the children arg, enabling editing of the children arg in a control and support for other component types in the near future"), and ensure "children arg" appears consistently as the unique term used throughout the paragraph.docs/configure/styling-and-css.mdx-90-90 (1)
90-90:⚠️ Potential issue | 🟡 MinorCapitalize "Less" as a proper noun.
"Less" is the name of the CSS preprocessor and should be capitalized.
📝 Suggested fix
-If you're using Webpack and want to use Sass or less, you'll need some extra configuration. +If you're using Webpack and want to use Sass or Less, you'll need some extra configuration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/styling-and-css.mdx` at line 90, Update the sentence in docs/configure/styling-and-css.mdx that currently reads "Sass or less" to use the proper capitalization "Sass or Less" (the sentence in the paragraph mentioning Webpack and Sass/Less and the `@storybook/addon-styling-webpack` recommendation). Ensure only the casing of "less" is changed to "Less" and leave the rest of the sentence and links unchanged.docs/contribute/code.mdx-166-166 (1)
166-166:⚠️ Potential issue | 🟡 MinorFix possessive typo in test-suite sentence.
Line 166 should use possessive its, not it's.
✏️ Proposed doc fix
-Storybook relies on [Vitest](https://vitest.dev/) as part of it's testing suite. +Storybook relies on [Vitest](https://vitest.dev/) as part of its testing suite.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/contribute/code.mdx` at line 166, Replace the incorrect possessive "it's" with "its" in the sentence that reads "Storybook relies on [Vitest](https://vitest.dev/) as part of it's testing suite." — edit the text so it reads "Storybook relies on [Vitest](https://vitest.dev/) as part of its testing suite." to fix the possessive typo.docs/api/cli-options.mdx-157-157 (1)
157-157:⚠️ Potential issue | 🟡 MinorCorrect the command example for
storybook add --config-dir.Line 157 shows
storybook migrate --config-dir .storybookinside theaddcommand section. That example should usestorybook add [addon].Proposed fix
-| `-c`, `--config-dir` | Storybook configuration directory.<br />`storybook migrate --config-dir .storybook` | +| `-c`, `--config-dir` | Storybook configuration directory.<br />`storybook add [addon] --config-dir .storybook` |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/cli-options.mdx` at line 157, The table row for the `-c`, `--config-dir` CLI option currently shows the wrong example command text ("storybook migrate --config-dir .storybook"); update that example to use the `add` subcommand instead of `migrate` so it demonstrates the correct usage pattern (i.e., use `storybook add [addon]` with the `--config-dir` flag), by editing the table cell text in the docs entry that contains the `-c`, `--config-dir` row.docs/api/cli-options.mdx-392-392 (1)
392-392:⚠️ Potential issue | 🟡 MinorUse the correct command in the
create-storybooklogfile example.Line 392 currently references
storybook init --logfile ..., but this section documentscreate-storybook.Proposed fix
-| `--logfile [path]` | Write all debug logs to the specified file at the end of the run. Defaults to debug-storybook.log when [path] is not provided.<br />`storybook init --logfile /tmp/debug-storybook.log` | +| `--logfile [path]` | Write all debug logs to the specified file at the end of the run. Defaults to debug-storybook.log when [path] is not provided.<br />`create storybook --logfile /tmp/debug-storybook.log` |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/cli-options.mdx` at line 392, Update the example command that follows the `--logfile [path]` option: replace the incorrect `storybook init --logfile /tmp/debug-storybook.log` example with the correct `create-storybook --logfile /tmp/debug-storybook.log` so the docs for the `--logfile` flag match the `create-storybook` command being documented.docs/addons/addons-api.mdx-66-67 (1)
66-67:⚠️ Potential issue | 🟡 MinorFix grammar in
skipIfNoParametersOrOptionsdescription.Line 66 reads awkwardly (“hasn't options either via ...”) and can confuse addon authors.
✍️ Suggested wording
-- `skipIfNoParametersOrOptions`: (Optional) Doesn't run the decorator if the user hasn't options either via [decorators](../writing-stories/decorators.mdx) or [parameters](../writing-stories/parameters.mdx). +- `skipIfNoParametersOrOptions`: (Optional) Skips running the decorator if the user has not provided options via [decorators](../writing-stories/decorators.mdx) or [parameters](../writing-stories/parameters.mdx).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/addons/addons-api.mdx` around lines 66 - 67, The description for skipIfNoParametersOrOptions is grammatically awkward; update its text to a clear phrase such as: "`skipIfNoParametersOrOptions`: (Optional) Skips running the decorator when neither options (from decorators) nor parameters are provided for the story." Keep the existing `wrapper` description as-is (it already references getStory, context, options, and parameters) and ensure the replaced sentence references the same `decorators` and `parameters` docs links.docs/releases/upgrading.mdx-37-37 (1)
37-37:⚠️ Potential issue | 🟡 MinorFix grammar in upgrade-path instruction.
Line 37 currently reads “across more than major version,” which is ungrammatical and may confuse users.
✍️ Suggested text fix
-If you want to upgrade across more than major version, run the command multiple times. +If you want to upgrade across more than one major version, run the command multiple times.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/releases/upgrading.mdx` at line 37, Replace the ungrammatical phrase "across more than major version" in the sentence that begins "If you want to upgrade ..." with a clearer wording such as "across more than one major version" (so the sentence reads: "If you want to upgrade across more than one major version, run the command multiple times.") — locate the exact phrase "across more than major version" in the docs/releases/upgrading.mdx content and update it accordingly.docs/writing-stories/index.mdx-368-368 (1)
368-368:⚠️ Potential issue | 🟡 MinorHyphenate compound adjective in link text.
Use “multi-component stories” for correct grammar and consistency.
💡 Proposed fix
-For more discussion, see the [multi component stories](../writing-stories/stories-for-multiple-components.mdx) workflow documentation. +For more discussion, see the [multi-component stories](../writing-stories/stories-for-multiple-components.mdx) workflow documentation.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/index.mdx` at line 368, Update the link text that currently reads "multi component stories" to the hyphenated form "multi-component stories" in the sentence referencing the workflow documentation so the visible link text is grammatically correct and consistent; search for the literal link label "multi component stories" in docs/writing-stories/index.mdx and replace it with "multi-component stories".docs/writing-stories/decorators.mdx-50-54 (1)
50-54:⚠️ Potential issue | 🟡 MinorFix missing spacing in context list keys.
Three bullets are missing a space before the explanatory dash, which hurts readability and can trigger lint/grammar checks.
💡 Proposed fix
-- `argTypes`- Storybook's [argTypes](../api/arg-types.mdx) allow you to customize and fine-tune your stories [`args`](./args.mdx). +- `argTypes` - Storybook's [argTypes](../api/arg-types.mdx) allow you to customize and fine-tune your stories [`args`](./args.mdx). ... -- `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons. -- `viewMode`- Storybook's current active window (e.g., canvas, docs). +- `parameters` - the story's static metadata, most commonly used to control Storybook's behavior of features and addons. +- `viewMode` - Storybook's current active window (e.g., canvas, docs).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/decorators.mdx` around lines 50 - 54, The list items for the context keys `argTypes`, `parameters`, and `viewMode` are missing a space before the explanatory dash; update those bullets (the lines containing `argTypes`- , `parameters`- , and `viewMode`-) to include a space before the dash so they read like `argTypes -`, `parameters -`, and `viewMode -` to match the other entries and improve readability.docs/releases/roadmap.mdx-12-12 (1)
12-12:⚠️ Potential issue | 🟡 MinorFix incorrect article before “Request”.
Line 12 says “an Request for Comment”; this should be “a Request for Comment”.
✏️ Suggested fix
-Each card represents a Storybook project. The columns represent how larger changes make their way from idea to shipped feature. Projects typically start as an [Request for Comment (RFC)](../contribute/RFC.mdx), then evolve into a [tracking issue](https://github.com/storybookjs/storybook/issues?q=is%3Aissue++sort%3Aupdated-desc+label%3ATracking+) once the team has fully scoped what it entails. We ship a Storybook [minor version](https://semver.org/) every eight weeks, and a major version once per year, typically in Feb/Mar. +Each card represents a Storybook project. The columns represent how larger changes make their way from idea to shipped feature. Projects typically start as a [Request for Comment (RFC)](../contribute/RFC.mdx), then evolve into a [tracking issue](https://github.com/storybookjs/storybook/issues?q=is%3Aissue++sort%3Aupdated-desc+label%3ATracking+) once the team has fully scoped what it entails. We ship a Storybook [minor version](https://semver.org/) every eight weeks, and a major version once per year, typically in Feb/Mar.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/releases/roadmap.mdx` at line 12, Replace the incorrect article in the sentence containing "an Request for Comment (RFC)"; update the phrase to "a Request for Comment (RFC)" so the sentence reads correctly within the paragraph that starts "Each card represents a Storybook project..." in the roadmap content.docs/api/arg-types.mdx-220-220 (1)
220-220:⚠️ Potential issue | 🟡 MinorFix grammar in the warning callout sentence.
Line 220 should read “will not be displayed”.
✏️ Suggested patch
-Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed. +Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component, and the actual name will not be displayed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/arg-types.mdx` at line 220, Fix the grammar in the warning callout sentence that currently reads "will not displayed" by inserting the missing "be" so it reads "will not be displayed"; locate the warning text in the arg-types documentation (the sentence containing "Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed") and update it to include "be".docs/api/doc-blocks/doc-block-meta.mdx-74-75 (1)
74-75:⚠️ Potential issue | 🟡 MinorUse “omit” instead of “emit” for correctness.
Line 74 currently says “emit
Metaentirely”, but the intended instruction is to omitMeta.✏️ Suggested patch
-The `of` prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the `title` prop to control the location, or emit `Meta` entirely, and let [autotitle](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) decide where it goes. +The `of` prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the `title` prop to control the location, or omit `Meta` entirely, and let [autotitle](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) decide where it goes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/doc-blocks/doc-block-meta.mdx` around lines 74 - 75, The sentence referencing the Meta block uses the wrong verb; change the wording that currently reads “emit `Meta` entirely” to “omit `Meta` entirely” so the guidance correctly instructs users to remove the Meta block instead of emitting it; update the sentence that mentions the `of` prop, `title` prop and `autotitle` to use “omit `Meta` entirely” and verify no other occurrences of “emit `Meta`” remain (look for the `Meta` symbol and nearby mentions of `of`, `title`, and `autotitle` to locate the text).docs/sharing/publish-storybook.mdx-130-153 (1)
130-153:⚠️ Potential issue | 🟡 MinorMove the heading outside
<summary>to follow documentation patterns.The
<h3>tag nested inside<summary>(lines 131-133) is the only instance in the entire documentation codebase and violates established conventions. All other<details>/<summary>blocks use inline content (text, code tags) rather than heading elements.Restructure as:
<details> <summary>Component Publishing Protocol (CPP)</summary> ### Component Publishing Protocol (CPP) Storybook can communicate with services...This maintains semantic HTML, follows codebase conventions, and keeps the heading visible in the table of contents.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/sharing/publish-storybook.mdx` around lines 130 - 153, Move the <h3> heading out of the <summary> tag and replace the summary content with plain text "Component Publishing Protocol (CPP)"; then add a top-level markdown heading "### Component Publishing Protocol (CPP)" immediately after the closing </summary> so the document matches other <details>/<summary> blocks and the heading appears in the table of contents; update the block using the existing <details>, <summary>, and <h3> tags in this file (replace the <h3> element usage with the Markdown heading following the <summary>).docs/get-started/install.mdx-242-246 (1)
242-246:⚠️ Potential issue | 🟡 MinorNarrow this Svelte caveat to versions earlier than 8.2.
The first sentence says the addon is auto-installed starting in 8.2, but the follow-up says any specific version needs manual setup. As written, that implies pinning
8.2+disables the automation, which contradicts the sentence right before it.Suggested fix
-Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. Starting with Storybook 8.2, the addon is automatically installed and configured when you initialize your project with the Svelte framework. However, if you installed a [specific version](`#custom-storybook-version`) of Storybook, you'll need to take additional steps to enable this feature. +Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. Starting with Storybook 8.2, the addon is automatically installed and configured when you initialize your project with the Svelte framework. However, if you installed a [specific version](`#custom-storybook-version`) earlier than 8.2, you'll need to take additional steps to enable this feature.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/get-started/install.mdx` around lines 242 - 246, The caveat about the Svelte addon is too broad and contradictory; update the text so it only applies to Storybook versions earlier than 8.2: change the follow-up sentence that references "[specific version](`#custom-storybook-version`)" to explicitly state that if you installed a Storybook version earlier than 8.2 (or pinned a version < 8.2) you must manually install the addon, and ensure the command mention (via svelte-csf-addon-install.md) remains linked for that case; keep references to "Storybook 8.2" and "Svelte framework" so readers can locate the conditional.docs/get-started/install.mdx-69-81 (1)
69-81:⚠️ Potential issue | 🟡 MinorKeep the version examples aligned with the new
create/initsplit.This section says 8.3+ installs use
create, but the examples immediately switch back toinitonly. That makes thelatest/nextguidance read like the preferred syntax for newer installs too.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/get-started/install.mdx` around lines 69 - 81, The examples under the "create"/"init" split are inconsistent: update the example lines that show `storybook@latest init`, `storybook@7.6.10 init`, and `storybook@7 init` so they reflect the correct command for Storybook 8.3+ (use `create`) versus older versions (use `init`); specifically, change examples for newer installs to use `create` (e.g., `storybook@latest create`, `storybook@8.3.0 create` or `storybook@8 create`) while leaving older-version examples using `init` (e.g., `storybook@7.6.10 init`, `storybook@7 init`) and ensure the surrounding text clarifies the mapping between npm tag/partial version and whether to call `create` or `init`.
🧹 Nitpick comments (8)
docs/configure/environment-variables.mdx (2)
22-32: Minor formatting inconsistency in renderer arrays.Given this PR focuses on formatting standardization, the renderer arrays have inconsistent spacing:
- Missing space after comma:
'preact','svelte'- Trailing space before closing bracket:
'ember' ],'web-components' ]✨ Suggested formatting fix
-<If renderer={['angular', 'ember' ]}> +<If renderer={['angular', 'ember']}>-<If renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}> +<If renderer={['html', 'react', 'qwik', 'preact', 'svelte', 'solid', 'vue', 'web-components']}>(Same fix applies to line 54)
Also applies to: 54-62
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/environment-variables.mdx` around lines 22 - 32, Fix inconsistent spacing in the renderer arrays inside the two <If> blocks wrapping <CodeSnippets path="storybook-read-environment-variables.md" />: normalize spacing after commas and remove trailing spaces before the closing bracket so arrays like ['angular', 'ember' ] and ['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ] become consistently formatted (e.g., ['angular', 'ember'] and ['html', 'react', 'qwik', 'preact', 'svelte', 'solid', 'vue', 'web-components']); apply the same corrections for the second occurrence referenced around lines 54-62.
64-68: Callout missingiconattribute unlike other Callouts in this file.Lines 14, 36, and 96 use
<Callout variant="info" icon="💡">, but this one omits the icon. If this is intentional differentiation, please disregard. Otherwise, consider adding the icon for consistency.✨ Suggested fix if icon should be consistent
-<Callout variant="info"> +<Callout variant="info" icon="💡">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/environment-variables.mdx` around lines 64 - 68, The Callout element in the shown diff is missing the icon attribute which makes it inconsistent with other Callouts (e.g., the other `<Callout variant="info" icon="💡">` usages found earlier); update this Callout to include icon="💡" so it matches the other info Callouts and keeps visual consistency across environment-variables.mdx.docs/writing-stories/build-pages-with-storybook.mdx (1)
30-30: Optional prose improvements (outside formatting scope).Static analysis flagged minor prose suggestions:
- Line 30: Consider hyphenating "data-fetching" when used as a compound modifier
- Line 68: "amongst" could be modernized to "among"
- Line 111: "all of the" could be simplified to "all the"
These are valid but represent content refinements rather than formatting fixes, so they're outside the scope of this formatting-focused PR.
Also applies to: 68-68, 111-111
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/build-pages-with-storybook.mdx` at line 30, Update the prose in build-pages-with-storybook.mdx: change "data fetching" to the hyphenated compound "data-fetching" in the sentence that begins "Fetching data in one place...", replace "amongst" with "among" where it appears, and simplify "all of the" to "all the" in the other occurrence; locate these phrases directly in the document and apply the three small wording edits.docs/releases/upgrading.mdx (1)
146-146: Use consistent prerelease terminology.Line 146 says “pre-release” while this section uses “Prereleases.” Consider standardizing one variant throughout this section.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/releases/upgrading.mdx` at line 146, The phrase "`storybook@next upgrade` will upgrade to the newest pre-release version" uses "pre-release" while the section uses "Prereleases"; standardize terminology across the section by choosing one variant (e.g., "Prereleases") and update this sentence to match (e.g., "`storybook@next upgrade` will upgrade to the newest Prerelease" or plural form consistent with surrounding text), ensuring all occurrences in this section use the same capitalization and hyphenation.docs/writing-stories/typescript.mdx (1)
126-126: Minor: Consider hyphenating "Svelte-specific".For consistency with compound adjective conventions, "Svelte specific" could be hyphenated as "Svelte-specific".
Suggested fix
-## Svelte specific tips +## Svelte-specific tips🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/typescript.mdx` at line 126, Replace the heading text "Svelte specific tips" with the hyphenated form "Svelte-specific tips" to follow compound-adjective conventions; update the string in the docs/writing-stories/typescript.mdx file where the heading "Svelte specific tips" appears so the rendered heading reads "Svelte-specific tips".docs/sharing/design-integrations.mdx (1)
82-82: Minor: Consider hyphenating "right-click".Static analysis flagged that "right click" should be hyphenated as "right-click" when used as a compound modifier/verb.
Suggested fix
-- Embed a component or frame check "Link to selected frame" in the Share dialog. Or right click on the frame and go to "Copy/Paste as" » "Copy link". +- Embed a component or frame check "Link to selected frame" in the Share dialog. Or right-click on the frame and go to "Copy/Paste as" » "Copy link".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/sharing/design-integrations.mdx` at line 82, Change the phrase "right click" to the hyphenated form "right-click" in the sentence that references the Share dialog and the right-click menu (the snippet containing "Link to selected frame" and 'Copy/Paste as » "Copy link"'); update the text so it reads "Or right-click on the frame and go to 'Copy/Paste as' » 'Copy link'."docs/api/main-config/main-config-typescript.mdx (1)
25-25: Minor: Inconsistent spacing in renderer array.There's a missing space after the comma between
'qwik'and'solid'.Suggested fix
-<If renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik','solid' ]}> +<If renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid']}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/main-config/main-config-typescript.mdx` at line 25, The renderer array in the MDX If tag has inconsistent spacing between items; update the array in the JSX/MDX tag (the renderer prop) to insert a space after the comma between the 'qwik' and 'solid' entries so it reads "... 'qwik', 'solid' ]" ensuring consistent comma spacing across the list.docs/get-started/install.mdx (1)
20-20: UsecolumnCountinstead ofcolumnsfor the React inline style property.The correct camelCase React property for the CSS
column-countproperty iscolumnCount, notcolumns. The numeric value2will be applied directly without any unit suffix.Suggested fix
-<div style={{ columns: 2, marginBottom: "1.5rem" }}> +<div style={{ columnCount: 2, marginBottom: "1.5rem" }}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/get-started/install.mdx` at line 20, The inline JSX style on the div uses the wrong property name; replace the React style property "columns" with the camelCase "columnCount" on the div element (the style object currently written as style={{ columns: 2, ... }}) so it correctly maps to CSS column-count and accepts the numeric value 2 without units.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/api/cli-options.mdx`:
- Line 206: Update the long-option in the upgrade options table from the
incorrect single-dash form `-logfile [path]` to the correct double-dash form
`--logfile [path]` so the documented flag matches the actual CLI option; ensure
the example usage text (`storybook upgrade --logfile /tmp/debug-storybook.log`)
remains unchanged.
In `@docs/contribute/code.mdx`:
- Around line 13-14: Replace the outdated Node recommendation text "Ensure you
have Node version 18 installed (suggestion: v18.16.0)." with the current
monorepo requirement "Ensure you have Node.js 22.22.1 installed (matches
.nvmrc)"; keep the Windows administrator note unchanged. Also add a short hint
to use nvm (or reference .nvmrc) for switching versions so readers can reproduce
the exact environment.
In `@docs/releases/features.mdx`:
- Line 12: The "Experimental" heading is level-2 (##) while its sibling
lifecycle headings "Preview", "Stable", and "Deprecated" remain level-3 (###),
making them incorrectly nested; change "Experimental" to level-3 (###) so all
four ("Experimental", "Preview", "Stable", "Deprecated") share the same heading
level and become peers, verify the MDX file sections under each heading are
preserved and adjust only the heading token for "Experimental".
---
Minor comments:
In `@docs/addons/addons-api.mdx`:
- Around line 66-67: The description for skipIfNoParametersOrOptions is
grammatically awkward; update its text to a clear phrase such as:
"`skipIfNoParametersOrOptions`: (Optional) Skips running the decorator when
neither options (from decorators) nor parameters are provided for the story."
Keep the existing `wrapper` description as-is (it already references getStory,
context, options, and parameters) and ensure the replaced sentence references
the same `decorators` and `parameters` docs links.
In `@docs/api/arg-types.mdx`:
- Line 220: Fix the grammar in the warning callout sentence that currently reads
"will not displayed" by inserting the missing "be" so it reads "will not be
displayed"; locate the warning text in the arg-types documentation (the sentence
containing "Users of the component you're documenting will not be able to use
the documented name as a property of your component and the actual name will not
displayed") and update it to include "be".
In `@docs/api/cli-options.mdx`:
- Line 157: The table row for the `-c`, `--config-dir` CLI option currently
shows the wrong example command text ("storybook migrate --config-dir
.storybook"); update that example to use the `add` subcommand instead of
`migrate` so it demonstrates the correct usage pattern (i.e., use `storybook add
[addon]` with the `--config-dir` flag), by editing the table cell text in the
docs entry that contains the `-c`, `--config-dir` row.
- Line 392: Update the example command that follows the `--logfile [path]`
option: replace the incorrect `storybook init --logfile
/tmp/debug-storybook.log` example with the correct `create-storybook --logfile
/tmp/debug-storybook.log` so the docs for the `--logfile` flag match the
`create-storybook` command being documented.
In `@docs/api/doc-blocks/doc-block-meta.mdx`:
- Around line 74-75: The sentence referencing the Meta block uses the wrong
verb; change the wording that currently reads “emit `Meta` entirely” to “omit
`Meta` entirely” so the guidance correctly instructs users to remove the Meta
block instead of emitting it; update the sentence that mentions the `of` prop,
`title` prop and `autotitle` to use “omit `Meta` entirely” and verify no other
occurrences of “emit `Meta`” remain (look for the `Meta` symbol and nearby
mentions of `of`, `title`, and `autotitle` to locate the text).
In `@docs/configure/styling-and-css.mdx`:
- Line 90: Update the sentence in docs/configure/styling-and-css.mdx that
currently reads "Sass or less" to use the proper capitalization "Sass or Less"
(the sentence in the paragraph mentioning Webpack and Sass/Less and the
`@storybook/addon-styling-webpack` recommendation). Ensure only the casing of
"less" is changed to "Less" and leave the rest of the sentence and links
unchanged.
In `@docs/configure/telemetry.mdx`:
- Line 32: Update the telemetry list item that currently reads "One way hash of
the IP address where the event occurred for spam detection." to use the compound
adjective "One-way" so it reads "One-way hash of the IP address where the event
occurred for spam detection."; locate the exact text "One way hash of the IP
address where the event occurred for spam detection." in the
docs/configure/telemetry content and replace "One way" with "One-way".
In `@docs/contribute/code.mdx`:
- Line 166: Replace the incorrect possessive "it's" with "its" in the sentence
that reads "Storybook relies on [Vitest](https://vitest.dev/) as part of it's
testing suite." — edit the text so it reads "Storybook relies on
[Vitest](https://vitest.dev/) as part of its testing suite." to fix the
possessive typo.
In `@docs/get-started/install.mdx`:
- Around line 242-246: The caveat about the Svelte addon is too broad and
contradictory; update the text so it only applies to Storybook versions earlier
than 8.2: change the follow-up sentence that references "[specific
version](`#custom-storybook-version`)" to explicitly state that if you installed a
Storybook version earlier than 8.2 (or pinned a version < 8.2) you must manually
install the addon, and ensure the command mention (via
svelte-csf-addon-install.md) remains linked for that case; keep references to
"Storybook 8.2" and "Svelte framework" so readers can locate the conditional.
- Around line 69-81: The examples under the "create"/"init" split are
inconsistent: update the example lines that show `storybook@latest init`,
`storybook@7.6.10 init`, and `storybook@7 init` so they reflect the correct
command for Storybook 8.3+ (use `create`) versus older versions (use `init`);
specifically, change examples for newer installs to use `create` (e.g.,
`storybook@latest create`, `storybook@8.3.0 create` or `storybook@8 create`)
while leaving older-version examples using `init` (e.g., `storybook@7.6.10
init`, `storybook@7 init`) and ensure the surrounding text clarifies the mapping
between npm tag/partial version and whether to call `create` or `init`.
In `@docs/releases/roadmap.mdx`:
- Line 12: Replace the incorrect article in the sentence containing "an Request
for Comment (RFC)"; update the phrase to "a Request for Comment (RFC)" so the
sentence reads correctly within the paragraph that starts "Each card represents
a Storybook project..." in the roadmap content.
In `@docs/releases/upgrading.mdx`:
- Line 37: Replace the ungrammatical phrase "across more than major version" in
the sentence that begins "If you want to upgrade ..." with a clearer wording
such as "across more than one major version" (so the sentence reads: "If you
want to upgrade across more than one major version, run the command multiple
times.") — locate the exact phrase "across more than major version" in the
docs/releases/upgrading.mdx content and update it accordingly.
In `@docs/sharing/publish-storybook.mdx`:
- Around line 130-153: Move the <h3> heading out of the <summary> tag and
replace the summary content with plain text "Component Publishing Protocol
(CPP)"; then add a top-level markdown heading "### Component Publishing Protocol
(CPP)" immediately after the closing </summary> so the document matches other
<details>/<summary> blocks and the heading appears in the table of contents;
update the block using the existing <details>, <summary>, and <h3> tags in this
file (replace the <h3> element usage with the Markdown heading following the
<summary>).
In `@docs/writing-docs/build-documentation.mdx`:
- Line 29: Update the phrasing "top level item" to the hyphenated compound
adjective "top-level item" in the documentation string so the compound modifier
correctly precedes the noun; locate the sentence containing "The top level item
refers to the primary story for your component." and replace it with "The
top-level item refers to the primary story for your component." to apply the
grammar fix.
In `@docs/writing-stories/decorators.mdx`:
- Around line 50-54: The list items for the context keys `argTypes`,
`parameters`, and `viewMode` are missing a space before the explanatory dash;
update those bullets (the lines containing `argTypes`- , `parameters`- , and
`viewMode`-) to include a space before the dash so they read like `argTypes -`,
`parameters -`, and `viewMode -` to match the other entries and improve
readability.
In `@docs/writing-stories/index.mdx`:
- Line 368: Update the link text that currently reads "multi component stories"
to the hyphenated form "multi-component stories" in the sentence referencing the
workflow documentation so the visible link text is grammatically correct and
consistent; search for the literal link label "multi component stories" in
docs/writing-stories/index.mdx and replace it with "multi-component stories".
In `@docs/writing-stories/stories-for-multiple-components.mdx`:
- Line 54: The sentence "Use caution with components that include third party
libraries" uses "third party" as a compound adjective and should be hyphenated;
update the text (search for the string "Use caution with components that include
third party libraries" or the phrase "third party libraries") to "third-party
libraries" so the compound adjective is correct.
- Around line 58-59: The sentence about children arg is missing the article
"the" and repeats "allow you to"; update the sentence to read more smoothly by
adding "the" before "children arg" and rephrasing to remove repetition (e.g.,
"improving the overall experience for the children arg, enabling editing of the
children arg in a control and support for other component types in the near
future"), and ensure "children arg" appears consistently as the unique term used
throughout the paragraph.
---
Duplicate comments:
In `@docs/api/doc-blocks/doc-block-unstyled.mdx`:
- Line 31: Remove the orphaned JSX comment token `{/* prettier-ignore-end */}`
from doc-block-unstyled.mdx (it has no matching `{/* prettier-ignore-start
*/}`); simply delete that standalone directive so there is no dangling
prettier-ignore marker left in the file.
---
Nitpick comments:
In `@docs/api/main-config/main-config-typescript.mdx`:
- Line 25: The renderer array in the MDX If tag has inconsistent spacing between
items; update the array in the JSX/MDX tag (the renderer prop) to insert a space
after the comma between the 'qwik' and 'solid' entries so it reads "... 'qwik',
'solid' ]" ensuring consistent comma spacing across the list.
In `@docs/configure/environment-variables.mdx`:
- Around line 22-32: Fix inconsistent spacing in the renderer arrays inside the
two <If> blocks wrapping <CodeSnippets
path="storybook-read-environment-variables.md" />: normalize spacing after
commas and remove trailing spaces before the closing bracket so arrays like
['angular', 'ember' ] and ['html', 'react', 'qwik', 'preact','svelte', 'solid',
'vue', 'web-components' ] become consistently formatted (e.g., ['angular',
'ember'] and ['html', 'react', 'qwik', 'preact', 'svelte', 'solid', 'vue',
'web-components']); apply the same corrections for the second occurrence
referenced around lines 54-62.
- Around line 64-68: The Callout element in the shown diff is missing the icon
attribute which makes it inconsistent with other Callouts (e.g., the other
`<Callout variant="info" icon="💡">` usages found earlier); update this Callout
to include icon="💡" so it matches the other info Callouts and keeps visual
consistency across environment-variables.mdx.
In `@docs/get-started/install.mdx`:
- Line 20: The inline JSX style on the div uses the wrong property name; replace
the React style property "columns" with the camelCase "columnCount" on the div
element (the style object currently written as style={{ columns: 2, ... }}) so
it correctly maps to CSS column-count and accepts the numeric value 2 without
units.
In `@docs/releases/upgrading.mdx`:
- Line 146: The phrase "`storybook@next upgrade` will upgrade to the newest
pre-release version" uses "pre-release" while the section uses "Prereleases";
standardize terminology across the section by choosing one variant (e.g.,
"Prereleases") and update this sentence to match (e.g., "`storybook@next
upgrade` will upgrade to the newest Prerelease" or plural form consistent with
surrounding text), ensuring all occurrences in this section use the same
capitalization and hyphenation.
In `@docs/sharing/design-integrations.mdx`:
- Line 82: Change the phrase "right click" to the hyphenated form "right-click"
in the sentence that references the Share dialog and the right-click menu (the
snippet containing "Link to selected frame" and 'Copy/Paste as » "Copy link"');
update the text so it reads "Or right-click on the frame and go to 'Copy/Paste
as' » 'Copy link'."
In `@docs/writing-stories/build-pages-with-storybook.mdx`:
- Line 30: Update the prose in build-pages-with-storybook.mdx: change "data
fetching" to the hyphenated compound "data-fetching" in the sentence that begins
"Fetching data in one place...", replace "amongst" with "among" where it
appears, and simplify "all of the" to "all the" in the other occurrence; locate
these phrases directly in the document and apply the three small wording edits.
In `@docs/writing-stories/typescript.mdx`:
- Line 126: Replace the heading text "Svelte specific tips" with the hyphenated
form "Svelte-specific tips" to follow compound-adjective conventions; update the
string in the docs/writing-stories/typescript.mdx file where the heading "Svelte
specific tips" appears so the rendered heading reads "Svelte-specific tips".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4279eb03-7a7f-441a-8d15-4705229341e2
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (192)
.oxfmtrc.jsondocs/_snippets/button-story-with-addon-example.mddocs/_snippets/component-story-custom-args-complex.mddocs/_snippets/component-story-static-asset-cdn.mddocs/_snippets/component-story-static-asset-with-import.mddocs/_snippets/custom-docs-page.mddocs/_snippets/list-story-reuse-data.mddocs/_snippets/list-story-template.mddocs/_snippets/list-story-unchecked.mddocs/_snippets/my-component-story-basic-and-props.mddocs/addons/addon-knowledge-base.mdxdocs/addons/addon-migration-guide.mdxdocs/addons/addon-types.mdxdocs/addons/addons-api.mdxdocs/addons/configure-addons.mdxdocs/addons/index.mdxdocs/addons/install-addons.mdxdocs/addons/integration-catalog.mdxdocs/addons/writing-addons.mdxdocs/addons/writing-presets.mdxdocs/ai/best-practices.mdxdocs/ai/index.mdxdocs/ai/manifests.mdxdocs/ai/mcp/api.mdxdocs/ai/mcp/overview.mdxdocs/ai/mcp/sharing.mdxdocs/api/arg-types.mdxdocs/api/cli-options.mdxdocs/api/csf/csf-next.mdxdocs/api/csf/index.mdxdocs/api/doc-blocks/doc-block-argtypes.mdxdocs/api/doc-blocks/doc-block-canvas.mdxdocs/api/doc-blocks/doc-block-colorpalette.mdxdocs/api/doc-blocks/doc-block-controls.mdxdocs/api/doc-blocks/doc-block-description.mdxdocs/api/doc-blocks/doc-block-icongallery.mdxdocs/api/doc-blocks/doc-block-markdown.mdxdocs/api/doc-blocks/doc-block-meta.mdxdocs/api/doc-blocks/doc-block-primary.mdxdocs/api/doc-blocks/doc-block-source.mdxdocs/api/doc-blocks/doc-block-stories.mdxdocs/api/doc-blocks/doc-block-story.mdxdocs/api/doc-blocks/doc-block-subtitle.mdxdocs/api/doc-blocks/doc-block-tableofcontents.mdxdocs/api/doc-blocks/doc-block-title.mdxdocs/api/doc-blocks/doc-block-typeset.mdxdocs/api/doc-blocks/doc-block-unstyled.mdxdocs/api/doc-blocks/doc-block-useof.mdxdocs/api/doc-blocks/index.mdxdocs/api/index.mdxdocs/api/main-config/index.mdxdocs/api/main-config/main-config-addons.mdxdocs/api/main-config/main-config-babel-default.mdxdocs/api/main-config/main-config-babel.mdxdocs/api/main-config/main-config-build.mdxdocs/api/main-config/main-config-core.mdxdocs/api/main-config/main-config-docs.mdxdocs/api/main-config/main-config-env.mdxdocs/api/main-config/main-config-features.mdxdocs/api/main-config/main-config-framework.mdxdocs/api/main-config/main-config-indexers.mdxdocs/api/main-config/main-config-log-level.mdxdocs/api/main-config/main-config-manager-head.mdxdocs/api/main-config/main-config-preview-annotations.mdxdocs/api/main-config/main-config-preview-body.mdxdocs/api/main-config/main-config-preview-head.mdxdocs/api/main-config/main-config-refs.mdxdocs/api/main-config/main-config-static-dirs.mdxdocs/api/main-config/main-config-stories.mdxdocs/api/main-config/main-config-swc.mdxdocs/api/main-config/main-config-tags.mdxdocs/api/main-config/main-config-typescript.mdxdocs/api/main-config/main-config-vite-final.mdxdocs/api/main-config/main-config-webpack-final.mdxdocs/api/main-config/main-config.mdxdocs/api/new-frameworks.mdxdocs/api/parameters.mdxdocs/api/portable-stories/index.mdxdocs/api/portable-stories/portable-stories-jest.mdxdocs/api/portable-stories/portable-stories-playwright.mdxdocs/api/portable-stories/portable-stories-vitest.mdxdocs/builders/builder-api.mdxdocs/builders/index.mdxdocs/builders/vite.mdxdocs/builders/webpack.mdxdocs/configure/environment-variables.mdxdocs/configure/index.mdxdocs/configure/integration/compilers.mdxdocs/configure/integration/eslint-plugin.mdxdocs/configure/integration/frameworks-feature-support.mdxdocs/configure/integration/frameworks.mdxdocs/configure/integration/images-and-assets.mdxdocs/configure/integration/index.mdxdocs/configure/integration/typescript.mdxdocs/configure/story-layout.mdxdocs/configure/story-rendering.mdxdocs/configure/styling-and-css.mdxdocs/configure/telemetry.mdxdocs/configure/user-interface/features-and-behavior.mdxdocs/configure/user-interface/index.mdxdocs/configure/user-interface/sidebar-and-urls.mdxdocs/configure/user-interface/storybook-addons.mdxdocs/configure/user-interface/theming.mdxdocs/configure/webpack.mdxdocs/contribute/RFC.mdxdocs/contribute/code.mdxdocs/contribute/documentation/documentation-updates.mdxdocs/contribute/documentation/index.mdxdocs/contribute/documentation/new-snippets.mdxdocs/contribute/framework.mdxdocs/contribute/how-to-reproduce.mdxdocs/contribute/index.mdxdocs/essentials/actions.mdxdocs/essentials/backgrounds.mdxdocs/essentials/controls.mdxdocs/essentials/highlight.mdxdocs/essentials/index.mdxdocs/essentials/measure-and-outline.mdxdocs/essentials/themes.mdxdocs/essentials/toolbars-and-globals.mdxdocs/essentials/viewport.mdxdocs/faq.mdxdocs/get-started/browse-stories.mdxdocs/get-started/conclusion.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/index.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/preact-vite.mdxdocs/get-started/frameworks/react-native-web-vite.mdxdocs/get-started/frameworks/react-vite.mdxdocs/get-started/frameworks/react-webpack5.mdxdocs/get-started/frameworks/svelte-vite.mdxdocs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/web-components-vite.mdxdocs/get-started/index.mdxdocs/get-started/install.mdxdocs/get-started/setup.mdxdocs/get-started/whats-a-story.mdxdocs/get-started/why-storybook.mdxdocs/releases/features.mdxdocs/releases/index.mdxdocs/releases/migration-guide-from-older-version.mdxdocs/releases/migration-guide.mdxdocs/releases/roadmap.mdxdocs/releases/upgrading.mdxdocs/sharing/design-integrations.mdxdocs/sharing/embed.mdxdocs/sharing/index.mdxdocs/sharing/package-composition.mdxdocs/sharing/publish-storybook.mdxdocs/sharing/storybook-composition.mdxdocs/writing-docs/autodocs.mdxdocs/writing-docs/build-documentation.mdxdocs/writing-docs/code-panel.mdxdocs/writing-docs/doc-blocks.mdxdocs/writing-docs/index.mdxdocs/writing-docs/mdx.mdxdocs/writing-stories/args.mdxdocs/writing-stories/build-pages-with-storybook.mdxdocs/writing-stories/decorators.mdxdocs/writing-stories/index.mdxdocs/writing-stories/loaders.mdxdocs/writing-stories/mocking-data-and-modules/index.mdxdocs/writing-stories/mocking-data-and-modules/mocking-modules.mdxdocs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdxdocs/writing-stories/mocking-data-and-modules/mocking-providers.mdxdocs/writing-stories/naming-components-and-hierarchy.mdxdocs/writing-stories/parameters.mdxdocs/writing-stories/play-function.mdxdocs/writing-stories/stories-for-multiple-components.mdxdocs/writing-stories/tags.mdxdocs/writing-stories/typescript.mdxdocs/writing-tests/accessibility-testing.mdxdocs/writing-tests/in-ci.mdxdocs/writing-tests/index.mdxdocs/writing-tests/integrations/index.mdxdocs/writing-tests/integrations/stories-in-end-to-end-tests.mdxdocs/writing-tests/integrations/stories-in-unit-tests.mdxdocs/writing-tests/integrations/test-runner.mdxdocs/writing-tests/integrations/vitest-addon/index.mdxdocs/writing-tests/integrations/vitest-addon/migration-guide.mdxdocs/writing-tests/interaction-testing.mdxdocs/writing-tests/snapshot-testing.mdxdocs/writing-tests/test-coverage.mdxdocs/writing-tests/visual-testing.mdxpackage.jsonscripts/docs/__tests__/check-docs.test.tsscripts/docs/check-docs.tsscripts/docs/utils.tsscripts/package.json
💤 Files with no reviewable changes (2)
- docs/essentials/themes.mdx
- docs/writing-docs/code-panel.mdx
Comment on lines
+13
to
+14
| - Ensure you have Node version 18 installed (suggestion: v18.16.0). | ||
| - If you're working with Windows, all commands should be run in a terminal with administrator privileges. |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify documented Node requirements in repo metadata/docs
fd -a '^(AGENTS\.md|package\.json|\.nvmrc|\.node-version|\.tool-versions)$' .
rg -n "22\.21\.1|Node\.js|engines|packageManager|Yarn Berry" AGENTS.md package.json .nvmrc .node-version .tool-versions 2>/dev/nullRepository: storybookjs/storybook
Length of output: 4054
🏁 Script executed:
#!/bin/bash
# Check .nvmrc file content
if [ -f .nvmrc ]; then
echo "=== .nvmrc content ==="
cat .nvmrc
else
echo ".nvmrc not found"
fi
echo ""
echo "=== docs/contribute/code.mdx (first 50 lines) ==="
head -50 docs/contribute/code.mdxRepository: storybookjs/storybook
Length of output: 2014
Update prerequisite Node version to match current monorepo requirement.
Line 13 currently recommends Node 18, which is severely outdated. The monorepo requires Node.js 22.22.1 as specified in .nvmrc for local development setup.
💡 Proposed doc fix
-- Ensure you have Node version 18 installed (suggestion: v18.16.0).
+- Ensure you have Node.js 22.22.1 installed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/contribute/code.mdx` around lines 13 - 14, Replace the outdated Node
recommendation text "Ensure you have Node version 18 installed (suggestion:
v18.16.0)." with the current monorepo requirement "Ensure you have Node.js
22.22.1 installed (matches .nvmrc)"; keep the Windows administrator note
unchanged. Also add a short hint to use nvm (or reference .nvmrc) for switching
versions so readers can reproduce the exact environment.
* next: (139 commits) Bump version from "10.4.0-alpha.9" to "10.4.0-alpha.10" [skip ci] Write changelog for 10.4.0-alpha.10 [skip ci] fix: make clearStatuses and ensurePanel resilient to null providers chore: add ts-ignore Build: remove vite-plus as devDependency Build: Add FIX_ON_COMMIT env var to force autofix in pre-commit hook telemetry: auto-send error telemetry when payload factory errors Bump version from "10.4.0-alpha.8" to "10.4.0-alpha.9" [skip ci] Remove tests and stories depending on the ComponentFactoryResolver from core angular Write changelog for 10.4.0-alpha.9 [skip ci] fix formatting fix lint format chore: commit yarn.lock for @chromatic-com/storybook@5.1.2 and enable changeDetection in internal Storybook Update @chromatic-com/storybook to ^5.1.2; add clearStatuses unit tests Isolate clearStatuses per-provider with try/catch Sidebar: route clearStatuses through per-provider clear() API Update code/core/src/telemetry/index.ts Update code/addons/vitest/src/preset.ts make subcomponentmanifest type pick from componentmanifest type ...
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (3)
docs/writing-stories/args.mdx (1)
9-9: Consider tightening phrasing in the intro sentence.Line 9 reads slightly awkwardly (“live edit components”). Consider “edit components live” (or “live-edit components”) for clearer flow.
Suggested wording
-A story is a component with a set of arguments that define how the component should render. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs, etc. It allows Storybook and its addons to live edit components. You _do not_ need to modify your underlying component code to use args. +A story is a component with a set of arguments that define how the component should render. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs, etc. It allows Storybook and its addons to edit components live. You _do not_ need to modify your underlying component code to use args.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/args.mdx` at line 9, The intro sentence uses the phrase "live edit components" which reads awkwardly; update that phrase in the paragraph that contains “Args can be used to dynamically change props, slots, styles, inputs, etc. It allows Storybook and its addons to live edit components.” and replace "live edit components" with a clearer option such as "edit components live" or "live-edit components" to improve flow while keeping the same meaning.docs/writing-stories/decorators.mdx (1)
49-54: Fix spacing in context list keys for readability.On Line 50, Line 53, and Line 54, the separator is attached to the inline code span (e.g.,
`argTypes`-). Add a space before and after-to match the surrounding bullets.Suggested patch
-- `argTypes`- Storybook's [argTypes](../api/arg-types.mdx) allow you to customize and fine-tune your stories [`args`](./args.mdx). +- `argTypes` - Storybook's [argTypes](../api/arg-types.mdx) allow you to customize and fine-tune your stories [`args`](./args.mdx). -- `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons. +- `parameters` - the story's static metadata, most commonly used to control Storybook's behavior of features and addons. -- `viewMode`- Storybook's current active window (e.g., canvas, docs). +- `viewMode` - Storybook's current active window (e.g., canvas, docs).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/decorators.mdx` around lines 49 - 54, Fix the spacing around the list-key separators in the decorators context list: change the attached hyphens so they have a space before and after (e.g., replace "`argTypes`-" with "`argTypes` -", "`parameters`-" with "`parameters` -", and "`viewMode`-" with "`viewMode` -") to match the other bullets and improve readability; update the list entries that mention `argTypes`, `parameters`, and `viewMode` in the decorators content accordingly.docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx (1)
192-195: Consider varying sentence structure for improved readability.Three consecutive bullet points start with "It should", which can make the text feel repetitive. Consider rephrasing one or two for better flow.
For example:
- Line 192: "All exports from the original module should be re-exported."
- Line 194: "The
mockNamemethod ensures the name is preserved when minified"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx` around lines 192 - 195, The three bullet points in the mocked module guidance are repetitive because they each begin with "It should"; rephrase one or two bullets to vary sentence structure for better readability—e.g., change "- It should re-export all exports from the original module." to "All exports from the original module should be re-exported." and change the mockName bullet to "Use the `mockName` method to ensure the name is preserved when minified." Keep the same meaning and links (`fn`, `mockName`) and ensure the fourth bullet still warns about isolating mock side effects.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/api/cli-options.mdx`:
- Line 392: The example for the `--logfile [path]` CLI option uses the wrong
command (`storybook init --logfile /tmp/debug-storybook.log`); update that
example to the correct create-storybook CLI invocation by replacing it with
`create storybook --logfile /tmp/debug-storybook.log` (keep the `--logfile
[path]` text and formatting around the example intact so the `--logfile` option
and example path remain clear).
- Line 157: The example command in the `-c`, `--config-dir` row of the add
options table incorrectly shows `storybook migrate --config-dir .storybook`;
update that example to the correct add command (e.g., `storybook add
--config-dir .storybook`) so the `-c, --config-dir` row matches the add section
and isn't misleading for users copying examples.
In `@docs/api/portable-stories/portable-stories-vitest.mdx`:
- Line 50: The sentence mentioning Next.js + Vitest is awkward; update the copy
to insert the word "package" immediately after the identifier
"@storybook/nextjs-vite" and reflow the clause so it reads clearly (e.g.,
"installing and setting up the `@storybook/nextjs-vite` package, which re-exports
vite-plugin-storybook-nextjs"). Locate the string "@storybook/nextjs-vite" and
"vite-plugin-storybook-nextjs" in the portable-stories-vitest.mdx content and
adjust the wording accordingly.
In `@docs/configure/styling-and-css.mdx`:
- Line 90: The word "less" in the sentence recommending Sass or less should be
capitalized to "Less" for consistency with other preprocessor names; update the
sentence in docs/configure/styling-and-css.mdx (the line that reads "If you're
using Webpack and want to use Sass or less, you'll need some extra
configuration.") to use "Less" instead of "less".
- Line 188: Summary: Fix the extra space before "e.g." in the parenthetical
example. Locate the text "( e.g., preprocessors)" in the document and remove the
leading space so it reads "(e.g., preprocessors)"; while editing, scan nearby
similar parentheticals to ensure consistent spacing for "e.g." occurrences (the
snippet to change is the parenthetical containing "e.g., preprocessors").
In `@docs/get-started/frameworks/nextjs.mdx`:
- Around line 66-74: The intro sentence in
docs/get-started/frameworks/nextjs.mdx incorrectly says "Storybook for Next.js
with Vite…" but this page is for the Webpack framework; update that intro text
to read "Storybook for Next.js with Webpack…" (replace the "Vite" token with
"Webpack" in the Configure intro) so the framework name matches the rest of the
page.
In `@docs/writing-tests/accessibility-testing.mdx`:
- Around line 74-75: The documented config snippet contains invalid JavaScript
where the object property "rules: [...] ;" ends with a semicolon; update the
object literal so the "rules" property is followed by a comma ("rules: [...],")
to produce valid JS object syntax inside the snippet (locate the snippet
containing the "rules" property and the surrounding object/array literal to make
this change).
---
Nitpick comments:
In `@docs/writing-stories/args.mdx`:
- Line 9: The intro sentence uses the phrase "live edit components" which reads
awkwardly; update that phrase in the paragraph that contains “Args can be used
to dynamically change props, slots, styles, inputs, etc. It allows Storybook and
its addons to live edit components.” and replace "live edit components" with a
clearer option such as "edit components live" or "live-edit components" to
improve flow while keeping the same meaning.
In `@docs/writing-stories/decorators.mdx`:
- Around line 49-54: Fix the spacing around the list-key separators in the
decorators context list: change the attached hyphens so they have a space before
and after (e.g., replace "`argTypes`-" with "`argTypes` -", "`parameters`-" with
"`parameters` -", and "`viewMode`-" with "`viewMode` -") to match the other
bullets and improve readability; update the list entries that mention
`argTypes`, `parameters`, and `viewMode` in the decorators content accordingly.
In `@docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx`:
- Around line 192-195: The three bullet points in the mocked module guidance are
repetitive because they each begin with "It should"; rephrase one or two bullets
to vary sentence structure for better readability—e.g., change "- It should
re-export all exports from the original module." to "All exports from the
original module should be re-exported." and change the mockName bullet to "Use
the `mockName` method to ensure the name is preserved when minified." Keep the
same meaning and links (`fn`, `mockName`) and ensure the fourth bullet still
warns about isolating mock side effects.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a31dc6c7-274a-4962-a6d2-1c7a4418aa69
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (33)
docs/ai/manifests.mdxdocs/api/arg-types.mdxdocs/api/cli-options.mdxdocs/api/csf/csf-next.mdxdocs/api/main-config/main-config-features.mdxdocs/api/parameters.mdxdocs/api/portable-stories/portable-stories-jest.mdxdocs/api/portable-stories/portable-stories-playwright.mdxdocs/api/portable-stories/portable-stories-vitest.mdxdocs/configure/story-rendering.mdxdocs/configure/styling-and-css.mdxdocs/contribute/documentation/new-snippets.mdxdocs/contribute/index.mdxdocs/essentials/actions.mdxdocs/essentials/backgrounds.mdxdocs/essentials/controls.mdxdocs/essentials/toolbars-and-globals.mdxdocs/essentials/viewport.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/setup.mdxdocs/releases/features.mdxdocs/writing-docs/autodocs.mdxdocs/writing-docs/code-panel.mdxdocs/writing-stories/args.mdxdocs/writing-stories/decorators.mdxdocs/writing-stories/mocking-data-and-modules/mocking-modules.mdxdocs/writing-stories/parameters.mdxdocs/writing-stories/tags.mdxdocs/writing-tests/accessibility-testing.mdxdocs/writing-tests/integrations/stories-in-unit-tests.mdxdocs/writing-tests/interaction-testing.mdx
💤 Files with no reviewable changes (1)
- docs/writing-docs/code-panel.mdx
✅ Files skipped from review due to trivial changes (8)
- docs/releases/features.mdx
- docs/essentials/toolbars-and-globals.mdx
- docs/api/arg-types.mdx
- docs/essentials/controls.mdx
- docs/ai/manifests.mdx
- docs/writing-stories/tags.mdx
- docs/api/parameters.mdx
- docs/get-started/frameworks/vue3-vite.mdx
🚧 Files skipped from review as they are similar to previous changes (8)
- docs/api/main-config/main-config-features.mdx
- docs/essentials/actions.mdx
- docs/api/csf/csf-next.mdx
- docs/configure/story-rendering.mdx
- docs/contribute/documentation/new-snippets.mdx
- docs/writing-tests/integrations/stories-in-unit-tests.mdx
- docs/essentials/backgrounds.mdx
- docs/get-started/frameworks/nextjs-vite.mdx
| <Callout variant="warning"> | ||
|
|
||
| <CodeSnippets path="portable-stories-vitest-compose-stories.md" /> | ||
| **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. |
Contributor
There was a problem hiding this comment.
Polish wording for the Next.js + Vitest sentence.
Line 50 reads awkwardly (setting up the @storybook/nextjs-vite which re-exports ... package). Consider adding “package” immediately after @storybook/nextjs-vite for clarity.
✍️ Suggested copy edit
-**Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package.
+**Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` package, which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. | |
| **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/nextjs-vite` package, which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs). |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/api/portable-stories/portable-stories-vitest.mdx` at line 50, The
sentence mentioning Next.js + Vitest is awkward; update the copy to insert the
word "package" immediately after the identifier "@storybook/nextjs-vite" and
reflow the clause so it reads clearly (e.g., "installing and setting up the
`@storybook/nextjs-vite` package, which re-exports vite-plugin-storybook-nextjs").
Locate the string "@storybook/nextjs-vite" and "vite-plugin-storybook-nextjs" in
the portable-stories-vitest.mdx content and adjust the wording accordingly.
Comment on lines
+66
to
74
| - 🖼 [Image optimization](#nextjss-image-component) | ||
| - 🔤 [Font optimization](#nextjs-font-optimization) | ||
| - 🔀 [Routing and navigation](#nextjs-routing) | ||
| - 🌐 [`next/head`](#nextjs-head) | ||
| - ⤵️ [Absolute imports](#imports) | ||
| - 🎨 [Styling](#styling) | ||
| - 🎭 [Module mocking](#mocking-modules) | ||
| - ☁️ [React Server Component (experimental)](#react-server-components-rsc) | ||
|
|
Contributor
There was a problem hiding this comment.
Correct the framework name in the Configure intro.
In this touched section, Line 64 still says “Storybook for Next.js with Vite…”, but this page is for the Webpack framework and should use “Webpack” to avoid confusion.
Proposed fix
- Storybook for Next.js with Vite supports many Next.js features including:
+ Storybook for Next.js with Webpack supports many Next.js features including:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/get-started/frameworks/nextjs.mdx` around lines 66 - 74, The intro
sentence in docs/get-started/frameworks/nextjs.mdx incorrectly says "Storybook
for Next.js with Vite…" but this page is for the Webpack framework; update that
intro text to read "Storybook for Next.js with Webpack…" (replace the "Vite"
token with "Webpack" in the Configure intro) so the framework name matches the
rest of the page.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (4)
docs/configure/styling-and-css.mdx (2)
90-90:⚠️ Potential issue | 🟡 MinorCapitalize “Less” for consistency.
Line 90 uses
less, but this section names preprocessors as proper names (Sass,Less,Stylus).✏️ Proposed fix
-If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.mdx#override-the-default-configuration) to include the appropriate loader(s). +If you're using Webpack and want to use Sass or Less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.mdx#override-the-default-configuration) to include the appropriate loader(s).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/styling-and-css.mdx` at line 90, The phrase "Sass or less" should capitalize "Less" for consistency with other preprocessor names; update the string in the docs sentence that currently reads "Sass or less" to "Sass or Less" (look for the sentence containing "If you're using Webpack and want to use Sass or less" in the styling-and-css content) and scan nearby mentions of preprocessors such as "Sass", "Less", and "Stylus" to ensure consistent capitalization.
189-189:⚠️ Potential issue | 🟡 MinorRemove the extra space before
e.g..Line 189 has
( e.g., preprocessors); it should be(e.g., preprocessors).✏️ Proposed fix
-Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example: +Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options (e.g., preprocessors) inside the `build-storybook` options configuration object. For example:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/styling-and-css.mdx` at line 189, Typo: remove the extraneous space before "e.g." in the docs string "( e.g., preprocessors)" so it reads "(e.g., preprocessors)"; edit the text in docs/configure/styling-and-css.mdx where the sentence "If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object." appears and delete the single space between "(" and "e.g." to produce "(e.g., preprocessors)".docs/api/cli-options.mdx (2)
157-157:⚠️ Potential issue | 🟡 MinorFix mismatched command example in the
addoptions table.Line 157 shows
storybook migrateinside theaddsection, which is misleading for copy/paste usage.Proposed fix
-| `-c`, `--config-dir` | Storybook configuration directory.<br />`storybook migrate --config-dir .storybook` | +| `-c`, `--config-dir` | Storybook configuration directory.<br />`storybook add --config-dir .storybook` |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/cli-options.mdx` at line 157, The table row for the `-c`, `--config-dir` option currently shows a `storybook migrate` example which is wrong for the `add` command; update the example to use the `add` command (e.g., `storybook add --config-dir .storybook`) by editing the `-c`, `--config-dir` cell in the `docs/api/cli-options.mdx` table so the copy/paste example matches the `add` option context.
392-392:⚠️ Potential issue | 🟡 MinorUse
create storybookin the logfile example for thecreate-storybooksection.Line 392 currently uses
storybook init, which does not match the section’s CLI.Proposed fix
-| `--logfile [path]` | Write all debug logs to the specified file at the end of the run. Defaults to debug-storybook.log when [path] is not provided.<br />`storybook init --logfile /tmp/debug-storybook.log` | +| `--logfile [path]` | Write all debug logs to the specified file at the end of the run. Defaults to debug-storybook.log when [path] is not provided.<br />`create storybook --logfile /tmp/debug-storybook.log` |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/cli-options.mdx` at line 392, Update the example for the `--logfile [path]` option: replace the incorrect `storybook init --logfile /tmp/debug-storybook.log` example with the correct `create storybook --logfile /tmp/debug-storybook.log` invocation so the example matches the create-storybook CLI in this section; ensure the `--logfile [path]` flag is shown with the corrected command text.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@docs/api/cli-options.mdx`:
- Line 157: The table row for the `-c`, `--config-dir` option currently shows a
`storybook migrate` example which is wrong for the `add` command; update the
example to use the `add` command (e.g., `storybook add --config-dir .storybook`)
by editing the `-c`, `--config-dir` cell in the `docs/api/cli-options.mdx` table
so the copy/paste example matches the `add` option context.
- Line 392: Update the example for the `--logfile [path]` option: replace the
incorrect `storybook init --logfile /tmp/debug-storybook.log` example with the
correct `create storybook --logfile /tmp/debug-storybook.log` invocation so the
example matches the create-storybook CLI in this section; ensure the `--logfile
[path]` flag is shown with the corrected command text.
In `@docs/configure/styling-and-css.mdx`:
- Line 90: The phrase "Sass or less" should capitalize "Less" for consistency
with other preprocessor names; update the string in the docs sentence that
currently reads "Sass or less" to "Sass or Less" (look for the sentence
containing "If you're using Webpack and want to use Sass or less" in the
styling-and-css content) and scan nearby mentions of preprocessors such as
"Sass", "Less", and "Stylus" to ensure consistent capitalization.
- Line 189: Typo: remove the extraneous space before "e.g." in the docs string
"( e.g., preprocessors)" so it reads "(e.g., preprocessors)"; edit the text in
docs/configure/styling-and-css.mdx where the sentence "If you're working with a
library, you'll need to configure the styling options ( e.g., preprocessors)
inside the `build-storybook` options configuration object." appears and delete
the single space between "(" and "e.g." to produce "(e.g., preprocessors)".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5aff7b32-a9df-40ae-999f-eb252fc11c84
📒 Files selected for processing (2)
docs/api/cli-options.mdxdocs/configure/styling-and-css.mdx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/api/cli-options.mdx`:
- Line 157: The table entries for the `-c, --config-dir` option were rendered as
if they are boolean flags but the examples pass a value; update each table cell
(the `-c`, `--config-dir` option rows at the occurrences referenced) to include
a value placeholder (e.g., `--config-dir <dir>` or `--config-dir <path>` and `-c
<dir>`) so the short and long forms show they accept a directory argument and
keep the example `storybook add --config-dir .storybook` unchanged; search for
the `--config-dir` table entries in docs/api/cli-options.mdx and replace the
flag text accordingly.
In `@docs/get-started/frameworks/nextjs.mdx`:
- Line 626: Update the wording in the sentence that currently reads “a node
environment” to use the proper product name and capitalization: change it to “a
Node.js environment” in the Next.js docs page content (the sentence beginning
“Next.js pages can fetch data directly within server components in the `app`
directory, which often include module imports that only run in a node
environment.”) so the docs consistently use “Node.js” as the environment name.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2a06d06a-4a6c-4b89-8af9-cf081f5c0540
📒 Files selected for processing (4)
docs/api/cli-options.mdxdocs/configure/styling-and-css.mdxdocs/get-started/frameworks/nextjs.mdxdocs/writing-tests/accessibility-testing.mdx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/api/cli-options.mdx (1)
8-8: Optional: Consider minor grammar refinements.Static analysis flagged two optional style improvements:
- Line 8: "command line interface" → "command-line interface" (hyphenated compound adjective)
- Line 19: "All of the following" → "All the following" (more concise)
These are minor stylistic suggestions that could improve readability, but they don't affect correctness.
Also applies to: 19-19
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/api/cli-options.mdx` at line 8, Replace the two flagged phrases in the docs/api/cli-options.mdx content: change "command line interface" to the hyphenated compound "command-line interface" and change "All of the following" to the more concise "All the following" so the sentence reads more idiomatically; update the corresponding sentences where those exact phrases appear.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/api/cli-options.mdx`:
- Line 8: Replace the two flagged phrases in the docs/api/cli-options.mdx
content: change "command line interface" to the hyphenated compound
"command-line interface" and change "All of the following" to the more concise
"All the following" so the sentence reads more idiomatically; update the
corresponding sentences where those exact phrases appear.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cb944536-4ffd-4369-90fc-4ddd6bf2db92
📒 Files selected for processing (2)
docs/api/cli-options.mdxdocs/get-started/frameworks/nextjs.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
docs:checkscript for automated format checks beyond the formatter/docscontent, fixing heading hierarchy issues, callout variant/icon mismatches, bare URLs, and standardizing formatting via oxfmt.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
yarn fmt:writeand confirm that only your file is fixedyarn docs:checkand confirm no errorsDocumentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
Chores
Documentation