wsbaser:generate-selectors

Generate, validate, and migrate XCSS selectors from component markup.

1|Updated Feb 21, 2026
One-click install
npx skills add https://github.com/wsbaser/claude-plugins --skill wsbaser-generate-selectors
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wsbaser:generate-selectors
Source: https://github.com/wsbaser/claude-plugins/tree/main/plugins/wsbaser/skills/generate-selectors
Command: npx skills add https://github.com/wsbaser/claude-plugins --skill wsbaser-generate-selectors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reading modern component markup and maintaining robust element selectors is time-consuming and error-prone, especially as interfaces evolve. This skill automates the process of generating, validating, and migrating XCSS selectors to align with the current markup and accessibility priorities.

Core Features & Use Cases

  • Generate: derive selectors for target elements or components from the markup.
  • Validate: check existing selectors for syntax, priority, and uniqueness against the current DOM.
  • Migrate: upgrade selectors to higher-priority types (e.g., aria attributes) when available in the markup to improve stability.

Quick Start

Provide the markup source path(s) and the elements to generate or validate selectors.

Frequently Asked Questions about wsbaser:generate-selectors

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

FAQPage Schema
How do I generate robust web selectors for UI automation testing?

Generate robust web selectors by reading component markup and applying XCSS priority rules to derive a named list of stable element selectors. This process targets available aria attributes first to ensure selectors remain valid as interfaces evolve.

Why do my CSS selectors break when the web component markup changes?

CSS selectors break when markup changes because they rely on unstable structural attributes. Validate current selectors against the DOM and migrate them to higher-priority types like aria attributes to improve selector stability across UI updates.

What is the best way to validate existing selectors for uniqueness against the current DOM?

The best way to validate existing selectors is to check their syntax, priority, and uniqueness against the current DOM. This ensures your XCSS selectors accurately target elements without conflicts in the web component markup.

How do I migrate selectors to use aria attributes for better stability?

Migrate selectors to use aria attributes by analyzing the updated web component markup and upgrading existing selectors to higher-priority types. This migration aligns selectors with accessibility priorities to prevent test breakage during interface evolution.

Do I need to provide the markup source to generate XCSS selectors?

Yes, you need to provide the markup source path and specify the target elements to generate or validate XCSS selectors. The tool reads this markup to apply priority rules and output a named list of accurate selectors.

When should I upgrade my web element selectors instead of rewriting them?

Upgrade web element selectors when the interface evolves but the core components remain. Migrating existing selectors to higher-priority XCSS types like aria attributes maintains test coverage while improving selector robustness against DOM changes.