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.

68

Quality

83%

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

83%Weight 40%Scale 1-5

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

The skill body is well-structured, actionable, and concise, with executable code examples and clear navigation. Its main weakness is the absence of explicit validation/retry checkpoints in the workflow and some redundant restatement of the same rules across multiple sections.

Suggestions

Add an explicit verification checkpoint to the Workflow (e.g., a concrete command or grep to confirm every new interactive node in touched files has a data-testid) rather than relying on a passive Done Criteria.

Consolidate the overlapping guidance between Workflow, Minimum Coverage Checklist, Scenario Playbook, and Stability Rules to reduce redundancy and token cost.

Specify how to verify that existing data-testid values were preserved in migration diffs (e.g., a git-diff check) instead of only instructing to 'Confirm' it.

DimensionReasoningScore

Conciseness

The body is largely lean and assumes Claude's competence (no explanations of what data-testid or React are), though several checklist and rules sections repeat the same guidance across Workflow, Minimum Coverage, Scenario Playbook, and Stability Rules, which could be tightened.

4 / 5

Actionability

Provides copy-paste-ready TSX code examples plus concrete naming formats, scope prefixes, and selector patterns covering the common cases (component markup, repeated list rows, config+renderer forwarding).

5 / 5

Workflow Clarity

A clear numbered Workflow sequence and a Done Criteria checklist structure the work, but there are no explicit validate/retry checkpoints; the verification step is a passive confirmation rather than an executable validation command.

4 / 5

Progressive Disclosure

Well-organized into clearly labeled sections (Overview, Workflow, Naming Rules, Minimum Coverage, Query Priority, Scenario Playbook, Patterns, Done Criteria) with no nested or buried references and no bundle files needed for a skill of this scope.

5 / 5

Total

18

/

20

Passed

Description

83%Weight 40%Scale 1-5

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 strong, specific description that clearly states what the skill does and when to use it with concrete trigger contexts. Minor room to broaden trigger synonyms and tighten the action list, but it avoids vague fluff and over-claims.

DimensionReasoningScore

Specificity

Names several concrete actions ('Add stable data-testid attributes', 'config-driven UI', 'forward it to the real clickable DOM node') and enumerates specific component types, with only minor coverage gaps around full naming-rule details.

4 / 5

Completeness

It explicitly states the 'what' ('Add stable data-testid attributes by default for new or refactored UI components') and a concrete 'Use when...' clause listing triggering contexts, answering both clearly.

5 / 5

Trigger Term Quality

Includes natural user-facing terms like 'React/TSX views', 'shadcn/antd-style components', 'dropdown/menu configs', and 'interactive UI flows', though it lacks common synonyms a user might say such as 'selectors' or 'testing'.

4 / 5

Distinctiveness Conflict Risk

The data-testid niche is fairly distinct and tied to specific UI frameworks and test-selector scenarios, with only minor overlap risk against general UI implementation or testing skills.

4 / 5

Total

17

/

20

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.