chore: add fix-storybook-errors command #1619
Conversation
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds tooling to automatically detect and fix Storybook errors across all component stories using Chrome DevTools MCP integration. The command checks console errors, visual errors, and network issues, with auto-fix capabilities for common problems like HTML structure errors and React key duplicates.
Key changes:
- Adds
fix-storybook-errorscommand with comprehensive error detection and auto-fix workflows for both Cursor and Claude environments - Fixes HTML structure error in Dialog component by replacing invalid nested
<p>tags with line breaks - Fixes React key duplication in HeroCarousel by switching from content-based to index-based keys
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
.cursor/commands/fix-storybook-errors.md |
New command documentation for Cursor with Chrome DevTools MCP integration instructions and auto-fix workflow |
.claude/commands/fix-storybook-errors.md |
New command documentation for Claude with appropriate MCP tool permissions and setup instructions |
packages/spindle-ui/src/Dialog/Dialog.stories.example.tsx |
Fixed HTML structure error by removing nested <p> tags and using line breaks |
packages/spindle-ui/src/HeroCarousel/HeroCarousel.tsx |
Fixed React key duplication by switching to index-based keys |
|
reg-suit detected visual differences. Check this report, and review them.
How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
36e6cf5 to
78a7edc
Compare
Add command to check all Storybook pages for errors using Chrome DevTools MCP. Includes auto-fix capabilities for HTML structure errors and React key duplication. Supports both Cursor and Claude environments with appropriate MCP setup instructions.
Update AGENTS.md and CLAUDE.md to reference the fix-storybook-errors command instead of generic Chrome DevTools MCP instructions.
78a7edc to
1c94beb
Compare
yanagi0602
left a comment
There was a problem hiding this comment.
実行されること、意図的に発生させたエラーが検知されて修正されることを確認しました。
概要
Chrome DevTools MCPを使用してStorybookの全ページをエラーチェックするコマンドを追加しました。(普段あまり使わないかつ使わなくても致命的でないためコマンドで定義しています)
ある程度意図通りに動作するようになったため、このタイミングでPRを作成します。なお、エラーの修正自体はこのPRの関心事ではありません。たまにサンプリングしようとしますが、全てを確認するように指示するとうまくいきました。
コマンドの内容は短くできる可能性がありますが、意図通りに動作させるために細かめに指示を記載しています。
変更内容
Storybookエラー修正の自動化コマンド:
.claude/commands/fix-storybook-errors.mdと.cursor/commands/fix-storybook-errors.mdを追加ドキュメント更新:
AGENTS.mdとCLAUDE.mdを更新し、Storybookのエラーチェックにfix-storybook-errorsコマンドを使用するよう変更This pull request introduces a new standardized workflow for detecting and fixing Storybook errors using Chrome DevTools MCP, and updates documentation to reference this workflow. The main changes are the addition of detailed command documentation for both Claude and Cursor agents, and the replacement of manual error-checking instructions with usage of the new
fix-storybook-errorscommand.Documentation and Workflow Standardization
.claude/commands/fix-storybook-errors.mdand.cursor/commands/fix-storybook-errors.mdfiles, providing step-by-step instructions for using Chrome DevTools MCP to automatically detect and fix Storybook errors, including prerequisites, error detection, auto-fixing, verification, reporting, and cleanup. [1] [2]Process and Usage Updates
CLAUDE.mdandAGENTS.mdto reference the newfix-storybook-errorscommand for verifying Storybook pages, replacing previous manual Chrome DevTools MCP instructions. [1] [2]