skills.rest
rcmaples
rcmaplesCOMMUNITY
Explore all skills by this author →
GitHub

fullstory-stable-selectors

Generate framework-agnostic data attributes for stable element targeting.

Updated Dec 20, 2025
Search Tags:#accessibility#framework-agnostic#e2e-testing#AI-agents#data-attributes#Fullstory#stable-selectors
One-click install
npx skills add https://github.com/rcmaples/btx --skill fullstory-stable-selectors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstory-stable-selectors
Source: https://github.com/rcmaples/btx/tree/main/.claude/skills/fullstory-stable-selectors
Command: npx skills add https://github.com/rcmaples/btx --skill fullstory-stable-selectors

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about fullstory-stable-selectors

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

FAQPage Schema
How do I create stable selectors for E2E testing across multiple frameworks?▼

Stable selectors use framework-agnostic data attributes like data-component and data-element to reliably target interactive elements across React, Angular, Vue, and vanilla HTML for durable E2E testing.

What are stable selectors and why do I need them for AI agents?▼

Stable selectors are semantic data attributes that provide framework-agnostic element targeting. They enable AI agents to navigate UI reliably without relying on brittle CSS classes or framework-specific plugins.

Can I use data attributes for Fullstory analytics without external plugins?▼

Yes, you can apply data-component, data-element, and optional data-action attributes directly in your HTML. This enables Fullstory analytics searches without requiring any external framework-specific plugins.

Does this stable selector approach work with Next.js, Astro, and server-side templates?▼

Yes, the framework-agnostic data attributes work across Next.js, Astro, Svelte, and server-side templates. They attach directly to HTML elements, ensuring consistent semantic targeting regardless of the rendering framework.

How do I implement stable data attributes for interactive UI elements?▼

Add data-component to the root element and data-element to key interactive elements. Include data-action and data-state where applicable to describe interactions and states, ensuring consistent naming across your codebase.

Related Skills

Explore More Software Engineering Skills→
bacchus-labsbacchus-labs
4

codebase-index

Generate framework-agnostic relationship and dependency maps for component-based codebases.

Official
Intermediate
fullstorydevfullstorydev
11

fullstory-test-automation

Generate cross-platform test automation scripts from Fullstory-decorated codebases.

Official
Advanced
fullstorydevfullstorydev
11

fullstory-stable-selectors

Replace brittle dynamic identifiers with stable semantic selectors across web and mobile platforms.

Official
Basic
atomeamatomeam
2

framework-specific-rendering-automation

Locate and interact with portal-rendered overlays in React, Vue, and Angular apps.

Community
Intermediate