docs: update component prop naming with variant docs

[joshblack]

Part of: https://github.com/github/primer/issues/6737

Changelog

New

• Add two guidelines for using the variant prop to the style guide skill

Changed

Removed

Rollout strategy

• None; if selected, include a brief description as to why

This is a change to docs

[changeset-bot]

⚠️ No Changeset found

Latest commit: b73b72e

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]

Pull request overview

Updates the style-guide documentation for Primer React component prop naming by adding explicit guidance on when to use the variant prop (semantic purpose) and when to avoid it (pure appearance).

Changes:

• Add a guideline recommending variant values describe semantic purpose (e.g. info, warning) rather than colors.
• Add a guideline discouraging variant for purely visual concerns like size/padding/shape, recommending more specific prop names instead.

Show a summary per file

File	Description
.github/skills/style-guide/docs/component-prop-naming.md	Adds two new documentation sections (and TOC entries) clarifying semantic vs appearance-driven usage of the variant prop.

Review details

Tip

Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

Suppressed comments (1)

.github/skills/style-guide/docs/component-prop-naming.md:177

• For consistency with other prop references in this doc, consider formatting variant as code here as well.

The variant prop is exclusively meant to communicate the purpose of a component.
It must not be used to communicate the appearance of a component. For example:

• Files reviewed: 1/1 changed files
• Comments generated: 2
• Review effort level: Lite