// 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.
| name | component-modernization |
| description | 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. |
End-to-end workflow for modernizing a Podman Desktop UI component as part of the Design System Modernization initiative (#13479).
Before starting, apply the local HMR patch so Storybook hot-reloads when UI component source files change:
/usr/bin/git apply .agents/skills/storybook-hmr/patches/storybook-hmr.patch
If it fails due to upstream changes, use /storybook-hmr skill to regenerate.
For each component modernization epic, create two subtasks as GitHub issues (type: Task). The user files these manually - never use the GitHub MCP to create issues.
Title: Storybook: Add stories for \{ComponentName}` component**Label:**area/storybook`
Body template:
### Task content
Add comprehensive Storybook stories for the `{ComponentName}` component (`{component_path}`) to document all current behaviors and usage contexts.
- Parent: #{parent_issue}
### Stories to create
{story_list - tailored to the specific component, typically 4-6 stories covering:}
1. **Basic** - interactive controls
2. **Usage context stories** - mock real layouts where the component appears
3. **Accessibility** - ARIA attributes, HC support, reduced motion
4. **Comparison** (if applicable) - side-by-side with related components
### Notes
- Follow the `kind` dispatch pattern established in `ProgressBar.stories.svelte`
- Use CSS-variable Tailwind classes for theme compatibility across all 4 themes (light, dark, hc-light, hc-dark)
- Include `autodocs` tag for auto-generated documentation
- {import_note - relative path for renderer components, package import for ui-svelte components}
Title: Modernize \{ComponentName}`**Label:**area/ui`
Body template:
### Task content
Modernize the `{ComponentName}` component (`{component_path}`) as part of the Design System Modernization initiative.
- Parent: #{parent_issue}
- Blocked by: {storybook_subtask_reference}
### Changes
1. {change_list - tailored to the specific component, typically covering:}
- Tailwind v4 syntax updates
- Color registry token usage (with HC support)
- ARIA / a11y improvements
- Animation updates
- Replace inline implementations with shared components
- Test updates
- Storybook annotation updates
### Key design decisions
{decisions - component-specific choices like rounded corners, dimensions, modes}
Before implementing, investigate:
Follow this order:
pnpm --filter @podman-desktop/ui-svelte buildgit checkout -- storybook/vite.config.jspnpm lint-staged, pnpm test:ui, pnpm typecheck, pnpm lint:checkThe completed ProgressBar modernization (#16244) is the reference implementation:
kind dispatch patternKey patterns established:
role="progressbar" elementsprefers-reduced-motion supportGuide 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".
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.
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.