component-audit

To audit your codebase for hardcoded styles and custom UI components, run this skill to scan .tsx and .css files. It cross-references page files against component registries and design token specifications to identify violations and prioritize remediation steps.

Yes, this audit tool works with Fluent UI and Azure Storybook components. It analyzes your page files to detect custom UI patterns that can be replaced by these specific shared component libraries, ensuring adherence to your established design system.

A design token is a standardized style variable for colors, fonts, or spacing. You need to replace hardcoded values with them when an audit detects inline styles in your .css and .tsx files that should utilize these design token specifications for consistency.

To scan a specific page file for custom UI patterns, target the file directly during the audit process. The skill analyzes the specified .tsx and .css files, detects reinvented UI elements, and provides prioritized next steps to replace them with shared components.

The best way to prevent technical debt in a frontend component library is to run an automated audit after building new pages. This identifies custom UI elements and hardcoded style values that bypass shared components and design tokens, allowing for immediate remediation.

The primary limitation when scanning .css and .tsx files for design system violations is that the audit relies on cross-referencing with existing component registries and design token specifications. Unregistered custom patterns may not be fully recognized as violations.