// Apply or revert the local Storybook HMR patch that auto-rebuilds the UI package when source files change. Use when starting Storybook work, component modernization, or when the user mentions Storybook HMR or hot reload not working for UI components.
| name | storybook-hmr |
| description | Apply or revert the local Storybook HMR patch that auto-rebuilds the UI package when source files change. Use when starting Storybook work, component modernization, or when the user mentions Storybook HMR or hot reload not working for UI components. |
Apply a local patch to storybook/vite.config.js that adds a file watcher for packages/ui/src/lib/. When any UI component source file changes, the watcher automatically runs pnpm --filter @podman-desktop/ui-svelte build to rebuild packages/ui/dist/, invalidates Vite's module cache, and triggers a full reload. Without this patch, editing UI component source files has no effect in Storybook because the imports resolve through the package exports map to dist/.
This patch is intentionally kept local and must never be committed or pushed. The upstream project has declined to merge it.
Bundled with this skill:
.agents/skills/storybook-hmr/patches/storybook-hmr.patch
/usr/bin/git apply .agents/skills/storybook-hmr/patches/storybook-hmr.patch
If the upstream file has changed and the patch no longer applies cleanly, use 3-way merge:
/usr/bin/git apply --3way .agents/skills/storybook-hmr/patches/storybook-hmr.patch
After applying, restart Storybook (pnpm --filter storybook dev).
/usr/bin/git checkout -- storybook/vite.config.js
Always revert the patch before committing or creating a PR. The patch should never appear in git history.
The upstream storybook/vite.config.js has changed too much. Regenerate the patch:
storybook/vite.config.jscolorRegistryWatcher function with a generic createFileWatcher factory and add the uiPackageWatcher call/usr/bin/git diff --no-color -- storybook/vite.config.js > .agents/skills/storybook-hmr/patches/storybook-hmr.patchThe key changes the patch makes:
createFileWatcher({ name, paths, ignored, command, invalidatePattern }) factory from the existing colorRegistryWatcherpackages/ui/src/lib that runs pnpm --filter @podman-desktop/ui-svelte build on changepackages/ui/dist entries before triggering reload/usr/bin/git (absolute path) for patch operations to bypass RTK proxy which mangles diff outputpackage.json or lockfilesGuide for working with the Podman Desktop extension feature mechanism: declaring features in an extension manifest, how the registry propagates them to the renderer, and how Svelte components detect active features. Use when adding a new feature declaration to an extension, writing renderer code that reacts to an extension being active/inactive, or debugging why a feature flag is not being picked up.
Reads a GitHub issue and all its linked issues, PRs, and comments to extract requirements and context. Invoke for any request combining a GitHub issue reference (#123, owner/repo#123, or URL) with a need to understand what the issue asks for — extracting acceptance criteria, understanding scope, gathering requirements before implementation or testing, or analyzing what changed. Extracts only what is explicitly stated in the issue and its linked references — does not invent or assume. Not for writing code, running tests, or debugging.
Set up or tear down the UX prototype screen switcher in the Podman Desktop titlebar. Use when the user wants to start a new UI/UX prototype, add prototype screen states, or remove the prototype infrastructure after a prototype ships. Triggers: "set up a prototype", "new prototype", "prototype switcher", "remove prototype", "tear down prototype".
Prepare and execute Design System component modernization. Drafts GitHub subtask issues, applies the Storybook HMR patch, and guides the modernization workflow. Use when starting work on a new component modernization, creating subtask issues, or when the user mentions design system modernization.
Record MP4 videos of a Storybook component story in all four themes (light, dark, hc-light, hc-dark). Use when the user asks to record, capture, or grab a video of a Storybook story or component animation.
Capture a full-page HiDPI (retina, 2x) screenshot of a Storybook component's Docs page in all four themes (light, dark, hc-light, hc-dark). Use when the user asks to screenshot, capture, or grab the Docs page, autodocs, or full documentation view of a Storybook component.