[tay1orjones]

Related to #8527 and #8573.

Give agents a focused skill for writing and debugging Vitest browser tests. Follow the new write-skill conventions with explicit triggers and exclusions, keeping the guidance separate from component implementation and API design.

The guidance assumes the browser locator migration is complete and can land independently of the remaining migration work.

Changelog

New

• A component-testing skill covering browser interactions, assertion timing, React updates, locators, and intentional low-level event tests.

Changed

Removed

Rollout strategy

• No changes needed in github/github-ui
• Needs changes in github/github-ui
• Ships with feature flag(s)
• Not sure
• None

Testing & Reviewing

Check that the skill triggers for Vitest browser tests and excludes Node/SSR and standalone Playwright suites. Review the distinction between direct awaited browser interactions, RTL's act for manual updates, and synchronous assertions.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0171203

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

🟡 Changes recommended

Directly awaited interaction guidance needs an explicit browser-setup prerequisite to avoid React update warnings.

1 open issue

• Document or land the browser setup prerequisite for direct-await guidance · New

What changed in this PR

Adds component-testing conventions to the style-guide skill, supporting the browser-locator migration.

Changes:

• Expands skill guidance to cover test authoring, modification, and debugging.
• Documents interactions, assertion timing, React updates, locators, and intentional synthetic events.

File	Description
.github/​skills/​style-guide/​SKILL.md	Expands test-related usage and links the new topic.
.github/​skills/​style-guide/​docs/​component-testing.md	Adds browser component-testing guidance and examples.

_{Review effort: Balanced}

[tay1orjones]

Fair point. Not sure how big of a deal it is though.

[joshblack]

@tay1orjones what do you think of having this be in a testing (or test) skill that has the same structure as the style guide one? Specifically a short entry SKILL.md that links out to references, as needed.

I'll make a PR real quick for a /write-skill skill too to see what you think in terms of structure. My guess right now is that generally we will want these files to have a way to be quickly scanned but I'm not sure yet 🤔

[tay1orjones]

@joshblack Yeah! Either way works for me, mainly just wanted to get this up as a start to discussion.

Do we want to avoid having another discover boundary for agents modifying behavior? It's probably less and less of a concern with current models. Selective loading within the style-guide skill should extend to this as well if we wanted to keep it here though.

[tay1orjones]

The current eslint config already enables the recommended Vitest and RTL rules for unit tests, but would we want to lint importing act from RTL rather than React via no-restricted-imports?

[tay1orjones]

Going to mark this a draft until #8573 is in and I can use it to regen the skill with the skill creator ... skill 😆

[tay1orjones]

I used the new /write-skill to revise this guidance into a new /component-testing skill and removed it from the styleguide.