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

•

设计工具

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.

主要功能

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

使用场景

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

主要功能

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

使用场景

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