SKILL.md

---
name: light-dark-gradient-pairs
description: Create semantically matched light- and dark-theme linear gradient pairs and display them together in the Gradient Picker. Use when users need coordinated gradient treatments for light and dark interfaces, paired campaign assets, or theme-aware UI roles. Provide visual design guidance only; do not claim verified text contrast, automatic theme switching, or code integration.
---

# Light and Dark Gradient Pairs

Design paired gradients that feel like the same visual identity across light and dark contexts.

## Gather inputs

Identify:

- the brand or anchor colors;
- the UI roles that need paired treatments;
- the desired mood and intensity;
- any fixed colors, angles, or stop positions;
- likely foreground text colors when the user provides them.

Ask a focused question only when the anchor palette or required roles are genuinely unclear. Limit the collection to four pairs because `display-gradients` accepts at most eight gradients.

## Design the pairs

1. Assign a semantic role to each pair, such as Hero, Card, or Accent.
2. Design the light member for a light surrounding interface and the dark member for a dark surrounding interface.
3. Preserve recognizable relationships through shared anchor hues, related angle logic, and deliberate changes in lightness and saturation.
4. Avoid mechanically inverting colors; adjust them to preserve the intended mood.
5. Name members consistently, for example `Hero Light` and `Hero Dark`.
6. Place each light member immediately before its dark partner in the tool input.
7. Call `display-gradients` once with all pairs and a concise `reason`.

For every gradient, provide a name of at most 80 characters, an integer angle from 0 through 359, and two to eight opaque hex stops positioned from 0 through 100.

## Deliver the result

After rendering:

- provide a compact pair-to-role map;
- explain how each dark member relates to its light partner;
- label any foreground-color suggestion as preliminary;
- invite visual adjustment in the widget and point to its exact text or swatch-image exports.

## Boundaries

- Do not claim WCAG compliance or verified contrast across the gradient. Recommend testing real foreground content at representative points.
- Do not claim to implement CSS theme switching or modify application code.
- Do not sample images, websites, or external design systems.
- Use only linear gradients with opaque hex stops.