How does this skill identify 'visual drift'?

It compares existing UI implementations against defined standards for surfaces, colors, and typography, flagging any deviations from the established design language.

Does it support specific brand color schemes?

Yes, it is pre-configured to validate the Chravel surface system (dark/navy) and premium gold/amber accent hierarchies.

What is the primary purpose of the Chravel UI Consistency skill?

It audits the Chravel application to ensure all visual elements, interaction patterns, and component reuse align with the core design system and premium brand feel.

Can I use this for both mobile and desktop interfaces?

Yes, the skill includes specific dimensions for both desktop modal shells and mobile bottom-sheet interaction models.

What kind of output does the audit provide?

It generates a diagnosis (from coherent to fragmented), a prioritized list of inconsistencies with severity ratings, and specific recommended patterns for correction.

Chravel UI Consistency Auditor

Name: Chravel UI Consistency Auditor
Author: MeechYourGoals

byMeechYourGoals

•

Design Tools

Audits application interfaces for visual consistency, component reuse, and adherence to established design systems.

The Chravel UI Consistency skill empowers Claude to perform deep visual audits across your application, ensuring every feature aligns with a single, unified design language. By analyzing surface systems, color palettes, and interaction patterns, it identifies 'visual drift' where UI elements have diverged from the core brand. This skill is essential for developers maintaining complex frontends, providing actionable feedback on everything from button styling and typography hierarchy to mobile-specific bottom sheet interactions and empty state guidance.

Key Features

01Comprehensive surface and elevation system validation

022 GitHub stars

03Typography and spacing hierarchy alignment checks

04Identification of visual drift in buttons and interactive controls

05Consistency auditing for empty states and confirmation patterns

06Detailed diagnosis reports with recommended canonical patterns

Use Cases

01Auditing new feature UI before deployment to ensure design system compliance

02Fixing fragmented user experiences across mobile and desktop interaction models

03Standardizing legacy components to align with premium dark-mode brand guidelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add meechyourgoals/chravel chravel-ui-consistency

For use in Claude.ai and ChatGPT

Key Features

01Comprehensive surface and elevation system validation

022 GitHub stars

03Typography and spacing hierarchy alignment checks

04Identification of visual drift in buttons and interactive controls

05Consistency auditing for empty states and confirmation patterns

06Detailed diagnosis reports with recommended canonical patterns

Use Cases

01Auditing new feature UI before deployment to ensure design system compliance

02Fixing fragmented user experiences across mobile and desktop interaction models

03Standardizing legacy components to align with premium dark-mode brand guidelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add meechyourgoals/chravel chravel-ui-consistency

For use in Claude.ai and ChatGPT