storybook-debugger

Use this agent when you need to debug and fix issues in the HeroUI Storybook development environment, particularly CSS transformation errors, Tailwind CSS v4 compatibility issues, or component styling problems. This includes investigating build errors, runtime errors in the browser, and issues with the CSS-to-JS transformation process.\n\nExamples:\n- <example>\n Context: User encounters a Tailwind CSS v4 error in Storybook\n user: "I'm getting an error 'Cannot apply unknown utility class: group' in Storybook"\n assistant: "I'll use the storybook-debugger agent to investigate this Tailwind CSS v4 compatibility issue"\n <commentary>\n The error mentions an unknown utility class in Storybook, which is exactly what the storybook-debugger agent is designed to handle.\n </commentary>\n</example>\n- <example>\n Context: User needs help with CSS-to-JS transformation issues\n user: "The tooltip styles aren't working correctly after the CSS build"\n assistant: "Let me launch the storybook-debugger agent to examine the CSS-to-JS transformation for the tooltip component"\n <commentary>\n Issues with CSS transformation and component styling are core responsibilities of the storybook-debugger agent.\n </commentary>\n</example>\n- <example>\n Context: User wants to debug visual issues in Storybook\n user: "The button variants look broken in Storybook at localhost:6006"\n assistant: "I'll use the storybook-debugger agent to inspect the button component in Storybook and diagnose the styling issues"\n <commentary>\n Visual debugging in the Storybook environment is a primary use case for this agent.\n </commentary>\n</example>