Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add ThepExcel/agent-skills --skill "geometric-elements"
Install specific skill from multi-skill repository
# Description
Generate decorative geometric elements (corners, lines, arcs, frames) with precise control over colors, gradients, and transparency. Use when creating design assets, slide decorations, or any vector-like graphics programmatically. Can also analyze reference images and recreate geometric patterns.
# SKILL.md
name: geometric-elements
description: Generate decorative geometric elements (corners, lines, arcs, frames) with precise control over colors, gradients, and transparency. Use when creating design assets, slide decorations, or any vector-like graphics programmatically. Can also analyze reference images and recreate geometric patterns.
Geometric Elements Generator
Create decorative geometric elements with code using Pixie-python.
Quick Start
# Install dependency (first time only)
pip install pixie-python
# Generate element (ask user for brand color or check their brand guidelines)
python .claude/skills/geometric-elements/scripts/generate.py corner-accent \
--color "#HEX_COLOR" \
--size 200 \
--output media/output/corner.png
Important: Always ask user for brand colors or check their brand guidelines skill (e.g., /thepexcel-brand-guidelines) before generating.
Available Elements
| Element | Command | Description |
|---|---|---|
| Basic Shapes | shape |
circle, star, heart, hexagon, arrow, etc. |
| Corner Accent | corner-accent |
L-shaped corner decoration |
| Line Divider | line-divider |
Horizontal divider with gradient |
| Arc Accent | arc-accent |
Curved arc |
| Frame Border | frame-border |
4-corner bracket frame |
| Pattern | pattern |
Repeating dots/crosses/diamonds |
| Mandala | mandala |
Sacred geometry / complex patterns |
Common Options
| Option | Description | Default |
|---|---|---|
--color |
Primary color (hex) | #D4A84B |
--color2 |
Secondary color for gradient | None |
--size |
Element size in pixels | 200 |
--width |
Canvas width | 400 |
--height |
Canvas height | 400 |
--stroke |
Stroke width | 4 |
--output |
Output file path | output.png |
--gradient |
linear or radial |
None |
--opacity |
0.0-1.0 | 1.0 |
--fill |
Fill shape (vs stroke) | False |
Examples
Basic Shapes
# Circle (stroke)
python scripts/generate.py shape --style circle --color "#HEX" --size 100 --stroke 3
# Star (filled)
python scripts/generate.py shape --style star --color "#HEX" --size 100 --sides 5 --fill
# Available: circle, ellipse, rectangle, square, rounded-rect, triangle,
# polygon, star, diamond, ring, cross, arrow, heart, hexagon, octagon, crescent
Corner Accent
python scripts/generate.py corner-accent --color "#HEX" --size 150 --stroke 4
Gradient Line Divider
python scripts/generate.py line-divider --color "#HEX" --color2 "#FFFFFF" --gradient linear --width 800
Mandala (Sacred Geometry)
python scripts/generate.py mandala --color "#CCC" --bg "#0A0A0A" --size 400 --rings 8 --layers 4 --stroke 1.5
β More examples: references/element-catalog.md
Custom Elements (On-the-fly)
For complex patterns not in predefined commands, write Python directly:
import pixie
import math
image = pixie.Image(400, 400)
paint = pixie.Paint(pixie.SOLID_PAINT)
paint.color = pixie.Color(0.83, 0.66, 0.29, 1.0) # RGB 0-1 range
ctx = image.new_context()
ctx.stroke_style = paint
ctx.line_width = 2
ctx.stroke_segment(50, 50, 350, 350)
image.write_file("output.png")
β Full API: references/pixie-api.md
From Reference Image
User can send reference images for Claude to analyze and recreate:
- User sends image β screenshot, design reference, pattern
- Claude analyzes β identifies shapes, colors, proportions
- Claude writes code β using pixie-python API
- Output β PNG ready to use
Tips for good reference: Clear image, geometric patterns (not photos), specify hex colors if needed.
Tips
- Transparent bg β All outputs have transparent background by default
- High DPI β Use
--size2x for retina displays - Gradients β Combine
--gradient linearwith--colorand--color2 - Brand colors β Always confirm with user or their brand guidelines first
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.