component-audit

Audit .tsx and .css files for custom UI elements and hardcoded style values.

1|Updated Mar 9, 2026

Search Tags:#code quality #component library #design tokens #frontend development #ui audit #fluent ui #azure storybook

Ready to run

npx skills add https://github.com/unthinkmedia/AzureBuilderHub --skill component-audit-unthinkmedia

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-audit
Source: https://github.com/unthinkmedia/AzureBuilderHub/tree/main/.github/skills/component-audit
Command: npx skills add https://github.com/unthinkmedia/AzureBuilderHub --skill component-audit-unthinkmedia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers identify and replace custom UI elements with standardized shared components and hardcoded style values with design tokens, improving consistency and maintainability.

Core Features & Use Cases

Component Auditing: Scans page files for custom UI patterns that can be replaced by existing AzureStorybook or Fluent UI components.
Token Auditing: Detects hardcoded style values (colors, fonts, spacing) that should utilize design tokens.
Use Case: After building a new page, run this Skill to ensure no components were reinvented and all styles adhere to the design system, preventing future technical debt.

Quick Start

Use the component-audit skill to scan the file 'src/pages/dashboard.tsx' for custom components and hardcoded values.

Frequently Asked Questions about component-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit my codebase for hardcoded styles and custom UI components?▼

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.

Does this audit tool work with Fluent UI and Azure Storybook components?▼

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.

What is a design token and when do I need to replace hardcoded values with them?▼

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.

How do I scan a specific page file for custom UI patterns that should use shared components?▼

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.

What's the best way to prevent technical debt in a frontend component library?▼

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.

Are there limitations to scanning .css and .tsx files for design system violations?▼

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.