When should I use the AI Gradient feature?

The AI Gradient is a signature visual element reserved for identifying AI-powered features like chat interfaces, generation buttons, and AI-driven loading states.

Can I use this with my existing Tailwind CSS project?

Yes, the skill is designed to integrate seamlessly with Tailwind CSS by utilizing CSS custom properties for themes and standardized utility classes.

What is OKLCH and why does this skill use it?

OKLCH is a modern color space providing perceptual uniformity and smoother gradients, natively supported by Tailwind CSS v4 and modern browsers.

Does this skill help with web accessibility?

Yes, it enforces WCAG 2.1 AA compliance for color contrast and ensures all interactive elements have visible focus indicators and proper keyboard navigation.

Brand System Design Guide

Name: Brand System Design Guide
Author: tundraray

bytundraray

•

Design Tools

Enforces production-grade brand standards, including OKLCH color systems, AI-specific gradients, and WCAG 2.1 AA accessibility compliance.

The Brand System Guide skill empowers Claude to maintain visual consistency and professional design standards across frontend projects. By implementing a 'Soft Intelligence' philosophy, it provides a comprehensive framework for OKLCH-based color palettes, specialized AI gradients for identifying machine-driven features, and robust dark mode patterns. It ensures all generated UI components are not only aesthetically pleasing but also fully accessible, meeting WCAG 2.1 AA standards while providing seamless integration with Tailwind CSS and modern browser features.

Key Features

01Implementation of the OKLCH color space for perceptual uniformity and wider gamut support

02Automated WCAG 2.1 AA accessibility compliance for color contrast and focus indicators

03Ready-to-use Tailwind CSS configuration and reusable UI component patterns

041 GitHub stars

05Signature AI Gradient system for distinctively identifying AI-powered UI features

06Comprehensive dark mode color patterns and CSS utility class generation

Use Cases

01Migrating existing CSS or HSL color schemes to the modern OKLCH color space

02Ensuring all frontend components meet strict accessibility and dark mode requirements

03Building a cohesive design system for a new AI-powered web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/claude-code-workflows brand-system-guide

For use in Claude.ai and ChatGPT

Download Skill