fullstory-stable-selectors
CommunityStable, framework-agnostic selectors for AI.
Software Engineering#accessibility#framework-agnostic#e2e-testing#AI-agents#data-attributes#Fullstory#stable-selectors
Authorrcmaples
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Stable selectors solve brittle element targeting across frameworks by using semantic data attributes suitable for analytics, tests, and AI automation.
Core Features & Use Cases
- Framework-agnostic data attributes: data-component, data-element, data-action, data-state to reliably identify interactive elements across React, Angular, Vue, Svelte, Next.js, Astro, and SSR templates.
- Cross-tooling readiness: Enables Fullstory searches, stable E2E test selectors, and AI agent navigation without framework-specific plugins.
- Real-world use: Apply stable selectors to a ProductCard for durable automation across UI changes and deployments.
Quick Start
Annotate UI components by adding data-component on the root element and data-element on key interactive elements. Include data-action and data-state where applicable to describe interactions and states. Use a simple example pattern from the guidance to implement consistent naming across the codebase.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: fullstory-stable-selectors Download link: https://github.com/rcmaples/btx/archive/main.zip#fullstory-stable-selectors Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.