Gradient

Generate CSS gradient code, preview gradient combinations, and build gradient palettes using bash and Python. Use when creating linear, radial, or conic grad...

Security Scan

The skill's code, files, and runtime instructions are consistent with a local CSS gradient generator that stores records under ~/.gradient and does not request unrelated credentials or network installs.

Purpose & Capability

Name/description match the provided files and instructions. The script generates gradients, previews, palettes, and exports CSS/Tailwind/SCSS, and stores records in ~/.gradient/data.jsonl — all consistent with the stated purpose. No unrelated resources (cloud credentials, external services) are requested.

Instruction Scope

SKILL.md instructs use of the included bash script (bash scripts/script.sh ...) and documents local storage and export behavior. The runtime actions are scoped to local file operations (reading/writing ~/.gradient/data.jsonl and user-specified export/preview files). It does not instruct reading other system-wide config files or exfiltrating data to remote endpoints.

Install Mechanism

No install spec is present (instruction-only skill with an included script). There are no downloads or package installs declared; the tool relies on Python 3 and Bash which are reasonable prerequisites for a script of this type.

Credentials

The skill requests no environment variables or credentials. Its only persistent footprint is a data directory under the user's home (~/.gradient), which is reasonable for a local CLI utility. There are no requests for unrelated secrets or config paths.

Persistence & Privilege

always is false and the skill does not declare any elevated or system-wide modifications. It writes only to its own data directory and to user-specified export/preview files. It does not modify other skills or agent configuration.

Assessment

This skill appears to be a self-contained, local CSS gradient generator that stores its data in ~/.gradient/data.jsonl and writes export/preview files you request. Before installing or running: (1) review the script if you want to confirm there are no edits you disagree with, (2) be aware it will create and write files under $HOME/.gradient, and (3) run it in a controlled environment if you prefer (e.g., a throwaway user account or container). No network calls or credential access are requested by the code or SKILL.md.

Gradient — CSS Gradient Generator & Palette Builder

Generate production-ready CSS gradient code for linear, radial, and conic gradients. Create gradient palettes, preview combinations, adjust angles and color stops, and export gradient collections. All gradient definitions are stored locally in JSONL format for reuse and sharing.

Prerequisites

• Python 3.6+
• Bash 4+

Data Storage

All gradient records and palettes are stored in ~/.gradient/data.jsonl. Each record is a JSON object with fields including id, name, type (linear, radial, conic), css, stops, angle, created_at, and additional metadata.

Commands

Run via: bash scripts/script.sh <command> [options]

Command	Description
create	Create a new gradient with type, colors, angle, and optional name
list	List all saved gradients with names, types, and CSS preview
get	Get full details and CSS code for a specific gradient by ID or name
update	Update an existing gradient's colors, angle, or name
delete	Remove a gradient from the collection by ID
linear	Shortcut to generate a linear gradient with angle and color stops
radial	Shortcut to generate a radial gradient with shape, position, and stops
conic	Shortcut to generate a conic gradient with start angle and stops
random	Generate random gradients with optional constraints on hue or type
palette	Generate a collection of related gradients from a base color
export	Export gradients as CSS classes, Tailwind config, or SCSS variables
preview	Generate an HTML preview page for one or all gradients
help	Show usage information
version	Print the tool version

Usage Examples

# Create a simple linear gradient
bash scripts/script.sh create --name sunset --type linear --angle 135 --stops "#ff6b6b,#feca57,#48dbfb"

# Shortcut for linear gradient
bash scripts/script.sh linear --angle 90 --stops "#667eea,#764ba2"

# Create a radial gradient
bash scripts/script.sh radial --shape circle --position center --stops "#00d2ff,#3a7bd5"

# Create a conic gradient
bash scripts/script.sh conic --from 0 --stops "#ff0000,#00ff00,#0000ff,#ff0000"

# List all saved gradients
bash scripts/script.sh list

# Get details for a gradient
bash scripts/script.sh get --id abc123

# Update a gradient
bash scripts/script.sh update --id abc123 --angle 180 --stops "#e74c3c,#9b59b6"

# Delete a gradient
bash scripts/script.sh delete --id abc123

# Generate 5 random gradients
bash scripts/script.sh random --count 5

# Generate gradients with warm hues only
bash scripts/script.sh random --count 3 --hue 0-60

# Build a palette from a base color
bash scripts/script.sh palette --color "#3498db" --count 5

# Export as CSS
bash scripts/script.sh export --format css --output gradients.css

# Export as Tailwind config
bash scripts/script.sh export --format tailwind --output tailwind-gradients.js

# Generate HTML preview
bash scripts/script.sh preview --output preview.html

Output Format

create, linear, radial, and conic output the CSS gradient string to stdout. list returns a formatted table. get returns full JSON metadata. export writes to the specified file format. preview generates a self-contained HTML file.

Notes

• Gradient types: linear, radial, conic.
• Linear gradients support angles in degrees (0-360) or keywords (to right, to bottom left).
• Radial gradients support shapes: circle, ellipse; positions: center, top left, etc.
• Color stops accept hex (#rrggbb), rgb(), hsl(), or CSS named colors.
• Each stop can include an optional position percentage: #ff0000:30%.
• The palette command generates harmonious gradient variations from a single base color.
• Export formats: css (classes), tailwind (JS config), scss (variables with mixins).
• Preview HTML includes responsive cards showing each gradient with its CSS code.

---

Powered by BytesAgain | bytesagain.com | [e-mail]