CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-data-testid

Add stable `data-testid` attributes by default for new or refactored UI components. Use when implementing React/TSX views, shadcn/antd-style components, dropdown/menu configs, or interactive UI flows that need reliable selectors for unit/E2E tests.

76

Quality

95%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

100%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, executable skill body: concise, actionable, with a sequenced workflow and explicit done-criteria verification. It is self-contained with clean sectioning and no nested references.

DimensionReasoningScore

Conciseness

The body is lean, assumes Claude knows React/TSX and testing libraries, and explains no background concepts; every section delivers rules or examples with no padding.

3 / 3

Actionability

Provides executable TSX snippets, a concrete naming format ('<scope>-<entity>-<action>'), an enumerated stable-suffix list, and a config-forwarding pattern that are copy-paste ready.

3 / 3

Workflow Clarity

A clear 7-step sequence is backed by explicit verification checkpoints (Minimum Coverage Checklist and Done Criteria) that confirm coverage and guard against removing existing ids in migration work.

3 / 3

Progressive Disclosure

No bundle files exist and the skill is self-contained; content is organized into clearly labeled, navigable sections with no nested or multi-level references.

3 / 3

Total

12

/

12

Passed

Description

90%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A tight, third-person description with an explicit 'Use when' trigger and strong natural keyword coverage. Its only weak spot is specificity, which names a single core action rather than multiple concrete capabilities.

DimensionReasoningScore

Specificity

Names the domain ('new or refactored UI components') and one concrete action ('Add stable data-testid attributes'), but does not enumerate multiple distinct actions, so it stops short of the comprehensive anchor.

2 / 3

Completeness

Explicitly answers what ('Add stable data-testid attributes by default') and when via an explicit 'Use when ...' clause listing concrete situations.

3 / 3

Trigger Term Quality

Covers natural terms users would say — 'React/TSX views', 'shadcn/antd-style components', 'dropdown/menu configs', 'unit/E2E tests', 'selectors' — giving broad, realistic trigger coverage.

3 / 3

Distinctiveness Conflict Risk

The data-testid-for-testing-selectors niche is specific and paired with distinct triggers, making it unlikely to fire for the wrong skill.

3 / 3

Total

11

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
dtyq/magic
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.