skills.rest
gwpjp
gwpjpCOMMUNITY
Explore all skills by this author →
GitHub

analyze-theme

Audit MUI components and theme config for hardcoded values and generate violation reports.

3|Updated Jan 31, 2026
Search Tags:#react#code-quality#theme#mui#lint#analyze
One-click install
npx skills add https://github.com/gwpjp/Web3-Claude --skill analyze-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: analyze-theme
Source: https://github.com/gwpjp/Web3-Claude/tree/main/.claude/skills/analyze-theme
Command: npx skills add https://github.com/gwpjp/Web3-Claude --skill analyze-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces consistent MUI theme usage across a project by auditing components and theme config to identify hardcoded colors, font sizes, and typography that diverge from the shared theme. It produces a structured violation report with exact fixes and can apply fixes automatically.

Core Features & Use Cases

  • Theme audit: Scan components and theme config to surface all violations relative to the central theme.
  • Automated fixes: Generate concrete code changes to replace hardcoded values with theme references.
  • Use Case: Designers or engineers want to ensure a uniform look across an app by removing hardcoded styles and aligning with the theme.

Quick Start

Run the analyze-theme skill to scan the project’s UI code and theme configuration and generate a report of violations. Then optionally apply the fixes automatically on your codebase.

Frequently Asked Questions about analyze-theme

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

FAQPage Schema
How do I find hardcoded colors and typography values in my MUI React components?▼

To find hardcoded values in MUI React components, scan your UI code and theme configuration against a central theme reference. This process identifies inline colors, font sizes, and typography that diverge from the shared MUI theme.

What is the best way to enforce MUI theme consistency across a React project?▼

Enforcing MUI theme consistency involves auditing component files and theme configs to detect hardcoded styles. It generates a structured violation report detailing exact fixes to replace inline values with proper theme references.

Can I automatically fix hardcoded theme violations in my React codebase?▼

Yes, you can automatically fix hardcoded theme violations in your React codebase. After generating a structured report of exact code changes needed, the fixes can be optionally auto-applied directly to your component files.

Do I need specific documentation files to audit my MUI theme configuration?▼

Yes, auditing your MUI theme configuration requires consulting a shared theme reference and project style rules. These documentation files define the central theme values and coding standards used to evaluate violations.

How does a theme audit handle violations in src/theme/themeConfig.tsx?▼

A theme audit handles violations in src/theme/themeConfig.tsx by applying an auditing process to the file and related component directories. It checks for divergent typography and colors, producing a structured violation report with exact fixes.

Related Skills

Explore More Software Engineering Skills→
Marcus-Mok-GHMarcus-Mok-GH

theme-consistency

Enforce theme values from theme.yaml in prototype screens.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
adilkalamadilkalam
2

cursor-code-style

Enforce Cursor Code Style guidelines on JavaScript/TypeScript and Python code.

Community
Basic
anderskevanderskev
75

react-flow-code-review

Review React Flow code for anti-patterns and performance issues.

Community
Intermediate