Conventions for picking, sizing, and bundling Fluent icons. USE WHEN: adding or changing an icon in a `*.tsx` file, or picking an icon name.
日本語の概要は準備中です。原文の説明を表示しています。
実行スコア 未検証
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
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 />} />;
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。