Conventions for picking, sizing, and bundling Fluent icons. USE WHEN: adding or changing an icon in a `*.tsx` file, or picking an icon name.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
When looking for icon names,
@fluentui/react-icons exports so the names match the version the app actually uses. Run this from this app's directory, replacing the search expression with the concept you need:node -e "const icons = require('@fluentui/react-icons'); console.log(Object.keys(icons).filter(name => /document.*add/i.test(name) && !/\d/.test(name) && /(?:Regular|Filled)$/.test(name)).join('\n'));"
The example searches document-add icons, excludes numbered-size exports, and keeps filled/regular styles.
https://github.com/microsoft/fluentui-system-icons/blob/main/icons_regular.md or https://github.com/microsoft/fluentui-system-icons/blob/main/icons_filled.md.@fluentui/react-icons package; the online catalog may include icons from newer versions.Prefer using the unsized icons without the number suffix, e.g. TextBulletListTreeFilled instead of TextBulletListTree20Filled. This allows the icon to scale dynamically within buttons and other components.
When adding icons to Fluent components, use the bundleIcon utility from @fluentui/react-icons to combine filled and regular icons. For example:
const TraceIcon = bundleIcon(TextBulletListTreeFilled, TextBulletListTreeRegular);
<Button icon={<TraceIcon />} />;
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Audits actual components and routes against applicable WCAG 2.2 A/AA criteria using consumer-owned design-system evidence and repository tools. Use when asked for an accessibility audit, a11y check, keyboard or focus review, contrast check, or screen-reader verification.
The English summary is being prepared. Showing the original description.
Creates or updates believable deterministic raw fixture scenarios without breaking an existing prototype. Use when asked to add or change fixtures, seed data, sample data, scenarios, or cross-record relationships. Not for UI redesign, live-data infrastructure, or unrelated commands.
The English summary is being prepared. Showing the original description.
Use for explicit agent-browser CLI checks or a named browser capability neither the Copilot canvas nor configured Playwright MCP can supply. Ordinary rendered checks and browser selection belong to browser-canvas-validation.
The English summary is being prepared. Showing the original description.
Use the Copilot browser canvas first for rendered route checks, interaction tests, screenshots and visual, responsive or accessibility evidence. Use configured isolated Playwright MCP only when the canvas is unavailable for a required check.
The English summary is being prepared. Showing the original description.
Review Replica pull requests using the same shared conventions and project guides as implementation agents. Use when reviewing changes to code, tests, workflows, or documentation in this repository.
The English summary is being prepared. Showing the original description.
Reviews existing UI components for design-system consistency, states, responsiveness and accessibility using consumer-owned context. Use when asked to review component quality, check design-system adherence or audit component consistency.
The English summary is being prepared. Showing the original description.