Map rendered/pasted HTML class names back to source code (CSS Modules, Fluent UI, Griffel). USE WHEN: inspecting Playwright DOM output, debugging styles in the browser, or reverse-engineering pasted HTML.
日本語の概要は準備中です。原文の説明を表示しています。
実行スコア 未検証
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
When the site is rendered to HTML, you can identify several aspects of the app code via HTML properties:
_camelCase_123ab_45 correspond to class names applied from CSS Modules.
class="_headerWrapper_16arl_15" in HTML comes from className={styles.headerWrapper} in React.fui- are derived from Fluent UI components.
fui-Button is a <Button/>.__ delimiter (BEM style). For example, fui-Button__icon comes from <Button icon={<SomeIcon20Regular/>}/>.f123abc are Griffel-generated atomic classes. Reset classes use an r… hash, and sequence classes start with ___. These are auto-generated and are not authored source identifiers. For example: class="f11589ue f1q5o8ev f1pdflbu fkfq4zb". Do not search these hashes to locate authored styles.data-* attributes may be authored in React, generated by a framework, or derived from dynamic state. Verify their origin before using them to locate source; do not assume their values are static.aria-label attributes and text content often appear as literal strings in this prototype, so searching them can help locate the corresponding JSX. For example, Create agent appears directly in the agents route. Values may also come from props, data, or localization, so a rendered string does not always have an exact literal match in source.The prototype's customized React Grab context is not raw DOM output. It decodes CSS Module class names to their local names and omits Fluent/Griffel classes. A cleaned class such as brandLink can therefore correspond to a hashed CSS Module class in the browser.
The in Component (path:line:column) entries describe component usage or rendering ancestry, not necessarily component definitions. Components that render passed-in children may appear in the ancestry even when another component created that JSX. Use the reported location to inspect the relevant call site or component body before deciding which source to edit.
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
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.
日本語の概要は準備中です。原文の説明を表示しています。