Component Audit

What This Does

Component Audit is a component intelligence engine powered by the M.ai agent that transforms a URL into a structured component report.

You paste a URL. The tool:

1. Visits the page and captures a full-page screenshot
2. Builds a component inventory — every button, input, dropdown, dialog, table, tab, menu, tree, nav, card, heading, link, and image with metadata
3. Detects component source — native HTML, Fluent, or custom implementation — with a confidence score
4. Applies the Fluent rule pack to flag risky implementations
5. Generates annotated findings with bounding boxes on the screenshot
6. Produces recommendations mapped to the appropriate Fluent component with explanation and benefits
7. Lets you export to PDF or Markdown for sharing
8. Gives you an M.ai context payload for follow-up questions about specific findings

Core Concept

This is an observe → inventory → annotate → recommend engine. The same architecture that powers the Accessibility Audit applied to component-level analysis. The first rule pack targets Fluent. Additional rule packs (Carbon, Material, Ant Design, etc.) can be added later.

Inventory Captures

For each detected component:

• Component type — button, input, dropdown, combobox, dialog, table, tabs, menu, tree, navigation, card, form, link, heading, image
• Selector — CSS path to the element
• Role — ARIA or implicit role
• Accessible name — aria-label, title, or label text
• Visible text — trimmed text content
• Classes — applied CSS class names
• Attributes — type, disabled, aria-expanded, aria-haspopup, and others
• Bounding box — pixel coordinates for annotation overlay
• Possible source — native / fluent / custom / unknown
• Confidence score — how confident the engine is in the source classification

Risk Evaluation

Risk	Description
Low	Native HTML controls used correctly, or confirmed Fluent components
Medium	Wrapped natives, partially customized controls, unknown source on interactive elements
High	Custom dropdowns, custom tree views, custom menus, custom tables, custom dialogs, custom tab implementations

Fluent Recommendations

When a risky implementation is found, the report includes:

• The specific Fluent component to use (@fluentui/react-components)
• Why the custom implementation carries risk — what keyboard and accessibility behaviors it likely misses
• Benefits of switching — consistency, keyboard support, focus behavior, screen reader support

Limitations (v0)

• Fluent rule pack only (v0). Additional design systems coming later.
• Single page only (no multi-page crawl)
• Automated detection only — manual review recommended for nuance
• Source detection is heuristic (class-name and ARIA-based), not build-artifact analysis
• No saved history or user accounts

FAQ

Can I use this for a client’s product? Yes. The tool is public and free. Export the report and share with your engineering and design team.

Is this only useful for Fluent codebases? No. The component inventory is useful for any page — it tells you what exists and how it’s implemented. The risk annotations are Fluent-specific in v0, but the inventory is system-agnostic.

How does source detection work? The engine checks for Fluent class name prefixes (fui-, ms-), data-automationid attributes, and whether the element is a native HTML control. Confidence scores reflect how certain the heuristic is.

Can I ask M.ai follow-up questions about my report? Yes. The report includes an M.ai context payload you can paste into M.ai to ask detailed questions about specific findings.

Why no accounts or history? v0 is validation mode. Once we see demand, we’ll add saved reports, team sharing, and paid tiers.