For frontend engineers authoring UI — how to make components reliably locatable by tests and AI agents. Covers the official Playwright locator priority, semantic/accessible markup first, and how to add valid, unique, stable `data-testid` attributes (naming convention, uniqueness in lists, stability rules) for React, Vue, Angular, and Svelte.
Install
npx skills add testdino-hq/playwright-skill --skill playwright-frontendnpx skills add testdino-hq/playwright-skill --skill playwright-frontend -a claude-code -gnpx skills add testdino-hq/playwright-skill --skill playwright-frontend -a codex -ggemini skills install https://github.com/testdino-hq/playwright-skill.git --path frontendgh skill install testdino-hq/playwright-skill playwright-frontendgit clone --depth 1 https://github.com/testdino-hq/playwright-skill /tmp/testdino-hq__playwright-skill
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/testdino-hq__playwright-skill/frontend ~/.claude/skills/playwright-frontend # Claude Code
cp -R /tmp/testdino-hq__playwright-skill/frontend ~/.agents/skills/playwright-frontend # Codex, Cursor, Gemini CLI, Copilot, OpenCode