← Files Gradient Maker - Linear ColorARCHIVED FILE

SKILL.md

2.5 KB · Oct 2, 2026 · 00:09 UTC

↓ Download file

---
name: gradient-handoff-pack
description: Prepare a concise, semantically named gradient collection for design-to-development handoff and display it in the Gradient Picker for exact exports. Use when users need gradients organized for UI roles, CSS variables, Tailwind classes, or a shareable swatch sheet. Do not claim to edit source files, operate the widget's export controls, or persist a shared design-token library.
---

# Gradient Handoff Pack

Organize a final or near-final gradient collection so a developer can understand each role and export exact current values from the widget.

## Gather inputs

Identify:

- the product or interface context;
- the required semantic roles, such as hero, card, CTA, accent, or decorative surface;
- fixed gradient values or brand constraints;
- the target handoff formats: named values, CSS variables, Tailwind classes, or PNG swatches.

Use valid gradients from the prompt, conversation, or model-visible widget state when supplied. If no final collection exists, design the smallest collection that covers the requested roles.

## Prepare the collection

1. Assign one clear responsibility to each gradient and remove redundant variants.
2. Use short, unique, semantic names that remain understandable when converted into CSS-variable slugs.
3. Preserve approved colors, angles, stop positions, and collection order.
4. Keep the pack between one and eight gradients, with two to eight stops per gradient.
5. Call `display-gradients` with the complete handoff collection and a concise `reason`.

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

## Deliver the handoff

After rendering:

- provide a compact mapping from semantic role to gradient name;
- note any assumption that still needs design approval;
- tell the user to make final visual edits in the widget before exporting;
- direct the user to the Names, CSS variables, Tailwind classes, or swatch-image action matching the requested handoff.

Treat the widget export as the source of exact values after local edits. Do not reproduce supposedly final code from stale pre-edit values.

## Boundaries

- Do not claim to click export controls, write files, install tokens, or modify an application repository.
- Do not invent support for formats beyond the widget's text and PNG exports.
- Do not promise cross-session storage or synchronization with a design system.
- Do not label the pack accessible without separate testing in its real UI context.

SHA-256: d9f60c7452fa109d5de05579be30221aca8a38f86efb6ec4da63ec96b20e502a