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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.