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

component-modernization

Guides Design System component modernization with Storybook stories and GitHub subtask drafting.

8.0k|560|Updated Mar 3, 2022
Search Tags:#storybook#Tailwind#Svelte# accessibility#Design system#gitHub issues#component modernization
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill component-modernization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-modernization
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/component-modernization
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill component-modernization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modernizing UI components in the Podman Desktop Design System initiative involves many coordinated steps: drafting GitHub subtask issues, applying a Storybook HMR patch, researching usage sites, updating tests, and verifying themes. This Skill provides a repeatable end-to-end workflow so nothing is missed.

Core Features & Use Cases

  • Subtask Issue Drafting: Generates ready-to-file GitHub issue templates for Storybook stories and component modernization tasks, with correct labels and parent references.
  • Storybook HMR Patch Workflow: Applies and later reverts a local patch so Storybook hot-reloads when UI component source files change.
  • Structured Modernization Steps: Enforces a proven order: stories first, rebuild the ui-svelte package, modernize the component, update tests, then verify across all four themes.
  • Use Case: When starting work on modernizing a component like ProgressBar, use this Skill to draft the two subtask issues, apply the HMR patch, and follow the reference implementation patterns for Tailwind v4, color tokens, and accessibility.

Quick Start

Start the component modernization workflow for the Button component and draft its two GitHub subtask issues.

Frequently Asked Questions about component-modernization

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

FAQPage Schema
How do I modernize a Podman Desktop UI component?▼

Follow the five-step workflow: apply the Storybook HMR patch, draft two GitHub subtask issues, research usage sites and color tokens, implement stories first then the component changes, and verify tests plus all four themes before committing.

How do I create subtask issues for design system modernization?▼

Draft two issues per component: a Storybook stories task labeled area/storybook and a modernization task labeled area/ui, both referencing the parent epic. The user files them manually; the GitHub MCP is never used to create issues.

Does the Storybook HMR patch need to be reverted before committing?▼

Yes. Before committing, revert the patch with git checkout on storybook/vite.config.js, then run pnpm lint-staged, pnpm test:ui, pnpm typecheck, and pnpm lint:check. The user handles committing and filing PRs.

What Tailwind syntax should modernized components use?▼

Use Tailwind v4 CSS variable shorthand such as text-(--pd-state-success) instead of text-[var(--pd-state-success)] for new custom-property utilities. Do not rewrite unrelated existing var() classes unless the task explicitly includes that cleanup.

What accessibility patterns are required for modernized components?▼

Modernized components follow the ProgressBar reference: WAI-ARIA attributes, high-contrast theme support for hc-light and hc-dark, outline borders for definition, and prefers-reduced-motion handling, verified across all four themes in Storybook.

Related Skills

Explore More Software Engineering Skills→
ousiassousiass

design-request-en

Gather design change requests via dialog and generate GitHub Issues or Markdown files.

Community
Intermediate
awfixers-stuffawfixers-stuff

impl-review

Check out a pull request branch, apply reviewer feedback, and push changes.

Official
Advanced
VMAFxVMAFx
3

refresh-ffmpeg-patches

Rebase an ffmpeg patch series onto upstream changes and regenerate clean patches.

Official
Advanced
agentward-aiagentward-ai
19

minimal-skill

Execute small automation tasks without setup or configuration.

Community
Basic