skills.rest
ConductionNL
ConductionNLOFFICIAL
Explore all skills by this author →
WebsiteGitHub

journeydoc-instrument

Injects data-testid attributes into Vue components and verifies with Vitest.

1|1|Updated Apr 8, 2026
Search Tags:#testing#frontend#e2e#vue#instrumentation#playwright
One-click install
npx skills add https://github.com/ConductionNL/shillinq --skill journeydoc-instrument
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: journeydoc-instrument
Source: https://github.com/ConductionNL/shillinq/tree/main/.claude/skills/journeydoc-instrument
Command: npx skills add https://github.com/ConductionNL/shillinq --skill journeydoc-instrument

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the fragility of end-to-end tests caused by shifting UI labels, refactored CSS classes, and ambiguous aria-labels by injecting stable, dedicated test identifiers into Vue components.

Core Features & Use Cases

  • Automated Auditing: Scans Vue Single File Components to identify critical interactive elements like modals, buttons, and form inputs.
  • Surgical Injection: Proposes and applies data-testid attributes without altering component behavior or styling.
  • Regression Verification: Automatically runs Vitest suites to ensure that adding test identifiers does not break existing component logic.

Quick Start

Run the journeydoc-instrument skill by providing the file path to the Vue component you wish to instrument.

Frequently Asked Questions about journeydoc-instrument

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

FAQPage Schema
How do I add stable data-testid attributes to Vue components for E2E testing?▼

You can inject stable data-testid attributes into Vue components by running the journeydoc-instrument skill with a valid Vue file path to ensure reliable selector targeting for E2E tests. It surgically adds identifiers without altering component behavior or styling.

Why do my Playwright E2E tests break when Vue component CSS classes or labels change?▼

E2E tests break because selectors relying on CSS classes or UI labels are fragile. Injecting dedicated data-testid attributes into Vue components provides consistent selector targeting across test suites, preventing tests from failing during UI refactoring.

Can I automatically verify that adding test identifiers does not break my Vue component logic?▼

Yes, the skill performs automated regression verification by running Vitest suites after injecting data-testid attributes. This ensures that adding stable test identifiers to Vue Single File Components maintains existing component integrity and logic.

Does this instrumentation tool work with Vue Single File Components and Vitest?▼

Yes, this tool works specifically with Vue Single File Components and uses Vitest for automated verification. It scans Vue SFCs to identify critical interactive elements like modals, buttons, and form inputs before applying test identifiers.

What is the best way to instrument interactive UI elements in Vue for reliable E2E capture?▼

The best way is to audit Vue components and surgically inject data-testid attributes targeting interactive UI elements. This approach ensures stable E2E capture by using dedicated test identifiers instead of ambiguous aria-labels or shifting CSS classes.

Related Skills

Explore More Software Engineering Skills→
CloudyWingCloudyWing

vitest

Configure Vitest and Vue Test Utils for component, composable, and store unit tests.

Community
Intermediate
j7-devj7-dev
19

e2e-runner

Generate, maintain, and execute Playwright end-to-end tests with failure artifacts.

Community
Advanced
jie023jie023
36

test-function

Automate web application functional testing with Playwright and MCP tooling.

Community
Advanced
etylsarinetylsarin
59

cypress-testing

Configure Cypress E2E and component tests with CI-ready GitHub Actions.

Community
Intermediate