What is the Chravel Design Language skill?

It is a specialized capability for Claude Code that enforces the Chravel premium design system, specifically focusing on its signature dark theme and gold accents.

Can it help with accessibility in dark themes?

Yes, one of the core rules within the skill is to maintain high contrast ratios to ensure the premium dark theme remains accessible.

Does this skill work with Tailwind CSS?

Yes, the skill is built around specific Tailwind CSS utility classes to ensure surfaces, typography, and components are implemented correctly.

How do I trigger this skill in Claude Code?

The skill triggers on phrases such as 'design system', 'premium feel', 'gold accent', or when asking Claude to check if a UI matches the project's style.

Chravel Design Language Enforcer

Name: Chravel Design Language Enforcer
Author: MeechYourGoals

byMeechYourGoals

•

设计工具

Enforces Chravel’s premium dark and gold design system to ensure consistent, high-quality UI implementation across all surfaces.

The Chravel Design Language skill provides Claude with the specific design tokens, typography rules, and component patterns required to maintain the Chravel ecosystem's signature aesthetic. By codifying the use of the gold-on-dark color palette and specific Tailwind CSS utility classes, this skill allows developers to generate new UI components or audit existing code for brand consistency. It is essential for teams looking to preserve a 'premium feel' while scaling their frontend, ensuring that every button, card, and modal adheres to established design standards automatically.

主要功能

01Design review capabilities to identify and fix style inconsistencies

02Standardized Tailwind CSS tokens for typography, spacing, and layout

03Consistent component patterns for buttons, inputs, modals, and cards

04Automated enforcement of the signature dark-and-gold color palette

05Predefined empty state templates with gold-accented CTAs

062 GitHub stars

使用场景

01Refactoring legacy styles to the modern Chravel dark theme

02Reviewing existing code to ensure adherence to design system rules

03Building new brand-compliant UI features from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add meechyourgoals/chravel chravel-design-language

For use in Claude.ai and ChatGPT

主要功能

01Design review capabilities to identify and fix style inconsistencies

02Standardized Tailwind CSS tokens for typography, spacing, and layout

03Consistent component patterns for buttons, inputs, modals, and cards

04Automated enforcement of the signature dark-and-gold color palette

05Predefined empty state templates with gold-accented CTAs

062 GitHub stars

使用场景

01Refactoring legacy styles to the modern Chravel dark theme

02Reviewing existing code to ensure adherence to design system rules

03Building new brand-compliant UI features from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add meechyourgoals/chravel chravel-design-language

For use in Claude.ai and ChatGPT