skills.rest
petbrains
petbrainsOFFICIAL
Explore all skills by this author →
GitHub

frontend-color-system

Generate accessible color palettes and themes from brand colors with WCAG contrast validation.

13|2|Updated Aug 9, 2025
Search Tags:#theming#WCAG#brand#palette#color-system
One-click install
npx skills add https://github.com/petbrains/mvp-builder --skill frontend-color-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-color-system
Source: https://github.com/petbrains/mvp-builder/tree/main/.claude/skills/frontend-color-system
Command: npx skills add https://github.com/petbrains/mvp-builder --skill frontend-color-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creates accessible color palettes and brand-themed themes with WCAG checks.

Core Features & Use Cases

  • Brand color extraction
  • Palette generation via API
  • WCAG contrast validation and dark mode support

Quick Start

Generate a palette from a brand color and validate contrast, then apply to a Tailwind theme.

Frequently Asked Questions about frontend-color-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an accessible color palette from my brand colors?▼

Generate accessible color palettes by inputting your brand colors into the palette generation API, which creates a full color system and validates WCAG contrast ratios automatically. The output applies directly to CSS variables and Tailwind configuration for immediate use.

Can I create dark mode themes with WCAG compliance?▼

Yes. The Skill generates dark mode variants alongside light themes, validating contrast compliance for both. It ensures all color pairings meet WCAG standards before applying to your theming system.

How do I set up theming with Tailwind and shadcn components?▼

Apply the generated color scheme to your Tailwind configuration and CSS variables. The Skill produces theme outputs formatted for direct integration with Tailwind color utilities and shadcn component styling.

What happens if my brand colors don't meet accessibility standards?▼

The WCAG validation step identifies contrast failures and flags them before applying to your theme. You can then adjust brand colors or use alternative palette options that maintain brand identity while meeting accessibility requirements.

Do I need to manually validate color contrast after generation?▼

No. The Skill automatically validates all generated color combinations against WCAG contrast standards during the generation process, eliminating manual checking for light and dark variants.

Related Skills

Explore More Design & Creative Skills→
winsorllcwinsorllc

color-picker

Convert and manipulate color values across HEX, RGB, HSL, and CMYK formats.

Community
Intermediate
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate
petbrainspetbrains
13

frontend-color-system

Generate accessible color palettes and themes from brand colors with WCAG contrast validation.

Official
Intermediate