skills.rest
jonnymuir
jonnymuirCOMMUNITY
Explore all skills by this author →
Website𝕏@jonnymooGitHub

web-component-removal-quality-gate

Remove obsolete Web Components and their associated dependencies from frontend codebases.

1|Updated Dec 23, 2025
Search Tags:#refactoring#frontend#cleanup#storybook#web-components#technical-debt
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill web-component-removal-quality-gate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-component-removal-quality-gate
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.claude/skills/web-component-removal-quality-gate
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill web-component-removal-quality-gate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill prevents technical debt and broken builds by ensuring that when a Web Component is removed, all associated artifacts like stories, tests, and documentation are also cleaned up.

Core Features & Use Cases

  • Comprehensive Cleanup: Automatically identifies and removes stale imports, Storybook registrations, and selector assertions.
  • Regression Prevention: Cleans up skipped tests and negative assertions that would otherwise preserve dead code contracts.
  • Use Case: When deprecating a legacy UI component, use this skill to ensure the codebase remains clean and that no orphaned documentation or broken test paths remain.

Quick Start

Use the web-component-removal-quality-gate skill to identify and remove all references to the obsolete UserProfileCard component from the client codebase.

Frequently Asked Questions about web-component-removal-quality-gate

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

FAQPage Schema
How do I safely remove obsolete web components without breaking my frontend build?▼

To safely remove obsolete web components, you must delete source files and clean up all associated artifacts like Storybook registrations, test suites, and documentation references. Validating the removal through automated build and test execution ensures build stability.

What technical debt is caused by deleting web components without removing their Storybook stories?▼

Deleting web components without removing their Storybook stories causes technical debt by leaving orphaned documentation and broken test paths. Preserving stale imports and skipped tests maintains dead code contracts that compromise architectural integrity.

How do I clean up skipped tests and stale imports when refactoring web components?▼

Cleaning up skipped tests and stale imports during web component refactoring requires systematically identifying and removing negative assertions and Storybook registrations. This prevents broken test paths and ensures the frontend codebase remains clean.

Does this web component cleanup process handle deprecated UI component documentation?▼

Yes, the web component cleanup process handles deprecated UI component documentation by targeting and removing documentation references. This ensures that no orphaned documentation remains in the codebase after the component source files are deleted.

What is the best way to prevent broken builds when deprecating legacy UI components?▼

The best way to prevent broken builds when deprecating legacy UI components is to validate the removal through automated build and test execution. This regression prevention step checks for stale imports and selector assertions after file deletion.

Related Skills

Explore More Software Engineering Skills→
okgoogle13okgoogle13
1

frontend-backend-mapper

Map frontend TypeScript API calls to Python backend endpoints and generate integration reports.

Community
Intermediate
anyprotoanyproto
509

Feature Toggle Developer

Automate feature toggle removal and cleanup detection in Swift codebases.

Official
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
DayoptDayopt

cleanup

Detect and remove unused code, dead imports, and console statements in TypeScript/JavaScript projects.

Official
Advanced