Playwright 프론트엔드 — 테스트하기 좋은 마크업 작성

무엇을 해주나

• Playwright 공식 로케이터 우선순위(role → label → text → testid)를 기준으로 컴포넌트 마크업을 점검합니다.
• data-testid를 언제 붙이고 언제 붙이지 말아야 하는지, 그리고 feature-component-element[-variant] 케밥케이스 명명 규칙을 적용합니다.
• 리스트/반복 요소에서 배열 인덱스 대신 도메인 키 기반 고유 ID(user-row-${user.id})를 쓰도록 유도합니다.
• React·Vue·Angular·Svelte별 패턴, 테스트 ID 중앙 관리, 프로덕션 빌드에서 제거하는 방법을 하위 문서로 안내합니다.

이런 분께 추천

• Playwright(또는 다른 E2E 도구)로 테스트되는 앱의 UI를 직접 작성하는 프론트엔드 개발자
• 플레이키한 셀렉터 때문에 E2E가 자주 깨지는 팀
• AI 에이전트가 UI를 자동 조작하도록 만들려는 개발자

활용 예시

1. "이 드롭다운 컴포넌트 PR 리뷰해줘" → 역할/라벨이 없는 커스텀 위젯에 접근성 속성 추가 + 필요한 곳에만 testid 제안.
2. "유저 테이블 행에 테스트 ID 붙여줘" → user-row-${user.id} 형태로 인덱스 대신 안정적인 키 사용.
3. "테스트 ID를 한 곳에서 관리하고 싶다" → 상수 파일로 중앙화하고 프로덕션에서 스트립하는 패턴 적용.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/testdino-hq/playwright-skill/HEAD/frontend/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 testdino-hq/playwright-skill 의 frontend 폴더를 내 ~/.claude/skills/playwright-frontend/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.