SKILL.md

---
name: brand-gradient-kit
description: Create a role-based brand gradient kit from a brand brief, mood, and optional hex palette, then display it with the Gradient Picker. Use when users ask for a branded gradient system, reusable brand gradients, or coordinated gradients for hero, accent, surface, promotional, and dark roles. Do not use for logo design, image palette extraction, or verified accessibility auditing.
---

# Brand Gradient Kit

Build a coordinated gradient system for distinct brand roles rather than a set of unrelated color experiments.

## Gather inputs

Identify:

- the brand traits, audience, and product context;
- required and forbidden colors, expressed as hex when provided;
- the surfaces or roles the kit must cover;
- the requested mood, intensity, and number of options.

Ask one focused question only when a missing brand color or required role would materially change the kit. Otherwise, make restrained assumptions and state them briefly.

## Build the kit

1. Treat supplied brand colors and prohibitions as hard constraints unless the user explicitly permits variations.
2. Choose one to eight useful roles. Prefer a compact set such as hero, accent, surface, promotional, and dark over near-duplicate options.
3. Establish cohesion with shared anchor colors, deliberate angle relationships, and consistent stop-position logic.
4. Give every gradient a concise semantic name that identifies its intended role.
5. Order the collection from the most prominent brand use to the most specialized use.
6. Call `display-gradients` once with the complete proposed collection and a concise `reason`.

For `display-gradients`, provide one to eight gradients. Give each gradient a name of at most 80 characters, an integer angle from 0 through 359, and two to eight stops. Give every stop a three- or six-digit hex color and a position from 0 through 100.

## Deliver the result

After rendering the widget:

- provide a compact role-to-gradient usage map;
- explain the shared design logic in no more than a few sentences;
- invite the user to adjust names, angles, colors, or stops in the widget;
- point to the widget's Names, CSS variables, Tailwind classes, and swatch-image exports when implementation assets are wanted.

When valid current gradients are available in model-visible widget state, treat them as the current collection during follow-up discussion. Never rely on private widget state.

## Boundaries

- Create linear gradients with opaque hex colors only.
- Do not claim to sample colors from an image or external brand site.
- Do not claim that a gradient passes accessibility requirements. Recommend testing it with its actual text and layout when accessibility matters.
- Do not claim to save a persistent brand library or modify the user's codebase.