Color palette generator

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/color-palette-generator

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill color-palette-generator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate accessible color palettes with WCAG compliance

SKILL.md

2.7 KB, as published. Nobody here has run it

Color Palette Generator Skill

Purpose

Generate accessible color palettes that comply with WCAG contrast requirements, create color scales, and export to design token formats.

Capabilities

Create color scales from base colors
Generate complementary, analogous, and triadic color schemes
Ensure WCAG 2.1 AA/AAA contrast compliance
Export palettes to design token formats (CSS, SCSS, JSON)
Generate dark mode color variants
Calculate color contrast ratios
Suggest accessible color alternatives

Target Processes

design-system.js
component-library.js (colorSystemDesignTask)
accessibility-audit.js

Integration Points

chroma.js for color manipulation
color-contrast-checker for WCAG validation
Style Dictionary for token export

Input Schema

{
  "type": "object",
  "properties": {
    "baseColors": {
      "type": "array",
      "items": { "type": "string" },
      "description": "Base colors in hex format"
    },
    "schemeType": {
      "type": "string",
      "enum": ["complementary", "analogous", "triadic", "split-complementary", "monochromatic"]
    },
    "contrastLevel": {
      "type": "string",
      "enum": ["AA", "AAA"],
      "default": "AA"
    },
    "includeDarkMode": {
      "type": "boolean",
      "default": true
    },
    "outputFormat": {
      "type": "string",
      "enum": ["css", "scss", "json", "tokens"],
      "default": "tokens"
    }
  },
  "required": ["baseColors"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "palette": {
      "type": "object",
      "description": "Generated color palette with scales"
    },
    "contrastMatrix": {
      "type": "array",
      "description": "Contrast ratios between color pairs"
    },
    "darkModePalette": {
      "type": "object",
      "description": "Dark mode color variants"
    },
    "tokenOutput": {
      "type": "string",
      "description": "Exported tokens in requested format"
    },
    "accessibilityReport": {
      "type": "object",
      "description": "WCAG compliance report"
    }
  }
}

Usage Example

const result = await skill.execute({
  baseColors: ['#1a73e8', '#34a853', '#ea4335'],
  schemeType: 'complementary',
  contrastLevel: 'AA',
  includeDarkMode: true,
  outputFormat: 'tokens'
});