skills.rest
podman-desktop
podman-desktopOFFICIAL
Explore all skills by this author →
GitHub

storybook-hmr

Applies a local git patch enabling Storybook hot reload for UI component source changes.

8.0k|560|Updated Mar 3, 2022
Search Tags:#storybook#Svelte#hot reload#hmr#git patch#VITE#UI Components
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-hmr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-hmr
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/storybook-hmr
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-hmr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editing UI component source files in packages/ui/src/lib/ has no effect in Storybook because imports resolve through the package exports map to the prebuilt dist/ directory, forcing slow manual rebuilds during component development.

Core Features & Use Cases

  • Apply the HMR patch: Adds a file watcher to storybook/vite.config.js that rebuilds @podman-desktop/ui-svelte and triggers a full reload whenever UI source files change.
  • Revert safely: Restores the original storybook/vite.config.js before committing, since the patch must never enter git history.
  • Patch regeneration: Provides instructions to recreate the patch when upstream changes cause it to fail, including a 3-way merge fallback.
  • Use Case: While modernizing a Svelte component in the UI package, apply the patch once and see every source edit reflected in Storybook automatically instead of rebuilding the package by hand.

Quick Start

Apply the Storybook HMR patch so my UI component changes hot reload, then restart Storybook.

Frequently Asked Questions about storybook-hmr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable hot reload for UI components in Storybook?▼

Apply the bundled patch with git apply against storybook/vite.config.js, then restart Storybook with pnpm --filter storybook dev. The patch adds a file watcher that rebuilds the UI package and reloads Vite when source files change.

Why are my Storybook UI component changes not showing up?▼

Storybook imports resolve through the package exports map to the prebuilt dist/ directory, so editing source files in packages/ui/src/lib has no effect. The HMR patch adds a watcher that rebuilds dist/ and invalidates Vite's module cache on each change.

What do I do when the git patch fails to apply?▼

First try git apply --3way for a three-way merge. If upstream storybook/vite.config.js changed too much, manually reapply the createFileWatcher factory and uiPackageWatcher changes, then regenerate the patch with git diff.

Can I commit the Storybook HMR patch to the repository?▼

No, the patch is intentionally local-only and must never be committed or pushed because upstream declined to merge it. Always revert with git checkout -- storybook/vite.config.js before committing or opening a pull request.

Does the patch modify package.json or lockfiles?▼

No, the patch only touches storybook/vite.config.js. It extracts a generic createFileWatcher factory and adds a watcher for packages/ui/src/lib without changing dependencies or lockfiles.

Related Skills

Explore More Software Engineering Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
TophC7TophC7

sworm-design

Codify Sworm design tokens and component recipes to prevent UI drift.

Community
Advanced
Blaze-sports-IntelBlaze-sports-Intel

frontend-development

Build accessible, responsive UI components with performance verification.

Official
Advanced
podman-desktoppodman-desktop
477

svelte-ui-design

Build Svelte 5 UI components with Podman Desktop's design system.

Official
Intermediate