ui-data-testid

Installation
SKILL.md

UI Data-testid

Overview

Add predictable data-testid attributes to UI code as part of implementation, not as a later patch. Keep selectors stable across i18n text changes and visual refactors. Follow project testing rules in .cursor/rules:

  • preserve existing data-testid during refactor/migration
  • use data-testid-first query strategy in project tests

Workflow

  1. Determine the scope prefix from feature/module context (for example: user-menus, organization-switch, settings-profile).
  2. Add data-testid to the component root container.
  3. Add data-testid to all primary interactive nodes:
    • button/link triggers
    • input/select/checkbox/radio controls
    • tabs/menu items/submenu triggers
    • modal/drawer open and confirm actions
Related skills

More from dtyq/magic

Installs
23
Repository
dtyq/magic
GitHub Stars
4.8K
First Seen
Mar 21, 2026