Theme Audit

What it does

This skill, Theme Audit, analyzes website themes within a codebase to identify potential issues related to accessibility, SEO best practices, and brand consistency. It examines theme definitions and usage across the UI code, specifically looking for missing colour fields, unused theme values, hardcoded colours, contrast problems, and inconsistencies between theme variants. The analysis is performed by executing shell commands against the project's source code.

When to use it

• When refactoring a website’s theme or design system.
• To identify instances of hardcoded colors that should be using theme variables.
• During development to ensure consistency and adherence to accessibility guidelines.
• As part of a regular codebase audit to maintain quality and reduce technical debt.

Key capabilities

• Theme Definition Inspection: Examines the internal/theme/theme.go file (first 200 lines).
• Theme Usage Analysis: Searches for theme variable usage within the internal/app/ directory in .go files (first 50 results).
• Hardcoded Color Detection: Identifies hardcoded colors using regular expressions, specifically looking for lipgloss.Color, lipgloss.AdaptiveColor, or hex codes (#RRGGBB) within UI code.
• Auditing Criteria: Checks for missing color fields, unused theme values, hardcoded colours, contrast issues and inconsistencies between theme variants.

Example prompts

• "Run a theme audit to check for any hardcoded colors in the UI."
• "Analyze the codebase for unused theme values."
• "Perform a theme audit focusing on potential accessibility concerns related to color contrast."

Tips & gotchas

• This skill executes shell commands, so review the commands before installation to understand their impact.
• The analysis is limited to the files and patterns specified in the skill's configuration (e.g., internal/theme/theme.go, internal/app/*.go). It may not cover all theme-related code.