Color palette and theme generation from brand colors. Use when setting up project theming, creating shadcn/Tailwind color schemes, checking WCAG accessibility contrast, or building dark mode. Includes API tools for palette generation and contrast validation.
Quickly install frontend-color-system AI skill to your development environment via command line
Source: petbrains/mvp-builder.
| AA | 4.5:1 | 3:1 | | AAA | 7:1 | 4.5:1 |
| Blue | #2563EB | 4.5:1 ✓ | | Indigo | #4F46E5 | 4.9:1 ✓ | | Purple | #7C3AED | 4.5:1 ✓ | | Green | #16A34A | 4.5:1 ✓ | | Red | #DC2626 | 4.5:1 ✓ |
| Slate | Cool blue | Tech, modern | | Zinc | Cool neutral | Professional | | Neutral | Pure gray | Minimal | | Stone | Warm brown | Organic |
Color palette and theme generation from brand colors. Use when setting up project theming, creating shadcn/Tailwind color schemes, checking WCAG accessibility contrast, or building dark mode. Includes API tools for palette generation and contrast validation. Source: petbrains/mvp-builder.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/petbrains/mvp-builder --skill frontend-color-systemColor palette and theme generation from brand colors. Use when setting up project theming, creating shadcn/Tailwind color schemes, checking WCAG accessibility contrast, or building dark mode. Includes API tools for palette generation and contrast validation. Source: petbrains/mvp-builder.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/petbrains/mvp-builder --skill frontend-color-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/petbrains/mvp-builder