This skill should be used when the user asks to "create section dividers", "make transparent dividers", "generate decorative borders", "create parallax dividers", "design section transitions", "make HR dividers", "crystal dividers", "organic borders", "silhouette borders", or needs transparent PNG dividers for web sections.
From gemskillsnpx claudepluginhub b-open-io/claude-plugins --plugin gemskillsThis skill uses the workspace's default tool permissions.
assets/border-library/braided-gemstone-border.pngreferences/prompt-templates.mdscripts/analyze-bg.tsscripts/colorize.tsscripts/defringe.tsscripts/remove-background.tsscripts/remove-bg.tsscripts/remove-magenta.tsscripts/slice-divider.tsDispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
Generate transparent decorative dividers for web page sections.
analyze-bg.ts)Use a HIGH CONTRAST color from the parallax image's own palette. This ensures:
# Analyze the parallax image to find colors in its palette
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/analyze-bg.ts /path/to/parallax.png top # for top border
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/analyze-bg.ts /path/to/parallax.png bottom # for bottom border
Choose the color from the parallax palette that provides HIGHEST CONTRAST with your silhouette color. For dark silhouettes, pick the lightest color from the parallax. For light silhouettes, pick the darkest.
Use remove-bg.ts (AI-based) for reliable background removal:
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/remove-bg.ts input.png output.png
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "[PROMPT]" --aspect 21:9 --size 2K --negative "[NEGATIVES]" --output divider-raw.png
Prompt template:
ONE THIN horizontal SOLID terrain strip floating in solid [PARALLAX_COLOR].
FULL WIDTH from left edge to right edge.
The strip is SOLID FILLED - not hollow, not a cave.
TOP EDGE silhouette: [SURFACE_CONTENT] pointing UPWARD.
BOTTOM EDGE silhouette: [UNDERGROUND_CONTENT] pointing DOWNWARD.
SOLID MASS between top and bottom edges - filled with [SECTION_COLOR].
JAGGED organic edges on BOTH top AND bottom.
Strip is 12-15% of image height floating in vertical center.
85% solid [PARALLAX_COLOR] background above and below.
Shadow puppet silhouettes.
Negative prompt:
hollow, cave, empty center, arch, tunnel view, flat edges, reflection, mirror, white, pink, magenta, tall, thick, floating island, not full width
Before processing, verify:
If ANY check fails = REGENERATE. Do not process junk.
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/remove-bg.ts divider-raw.png divider.png
Uses cjwbw/rembg model which PRESERVES RESOLUTION.
AI background removal via Replicate (rembg model). Preserves original resolution.
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/remove-bg.ts input.png output.png
Extract dominant color from parallax image.
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/analyze-bg.ts parallax.png bottom
Tint transparent silhouette to match theme.
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/colorize.ts input.png output.png "#042f2e"
Do not read generated divider images back into context. Scripts output file paths. Ask the user to visually verify the divider in their browser against the parallax and section backgrounds. To inspect programmatically, optimize the image first (via the optimize-images skill).
When an existing divider has wrong colors or semi-transparent edges:
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/remove-bg.ts original.png transparent.png
The remove-bg output has semi-transparent edges. To make it SOLID and match the section:
from PIL import Image
img = Image.open('transparent.png').convert('RGBA')
pixels = img.load()
width, height = img.size
# Get EXACT section color from CSS/computed style
# Example: oklch(0.12 0.015 260) = RGB(3, 6, 11)
sr, sg, sb = 3, 6, 11
for y in range(height):
for x in range(width):
r, g, b, a = pixels[x, y]
if a > 50: # Any visible pixel = SOLID section color
pixels[x, y] = (sr, sg, sb, 255)
else: # Transparent stays transparent
pixels[x, y] = (0, 0, 0, 0)
img.save('final.png')
Key points:
// In browser console on the page:
const el = document.querySelector('#section-id');
const canvas = document.createElement('canvas');
canvas.width = 1; canvas.height = 1;
const ctx = canvas.getContext('2d');
ctx.fillStyle = getComputedStyle(el).backgroundColor;
ctx.fillRect(0, 0, 1, 1);
const data = ctx.getImageData(0, 0, 1, 1).data;
console.log(`RGB(${data[0]}, ${data[1]}, ${data[2]})`);
| Problem | Cause | Fix |
|---|---|---|
| Content doesn't span full width | Missing "FULL WIDTH" | Add "FULL WIDTH from left edge to right edge" |
| Bottom is mirror of top | Reflection not cross-section | Use DIFFERENT content for top and bottom |
| Hollow/cave shape | Wrong shape prompt | Add "SOLID FILLED - not hollow, not a cave" |
| Content touches edges | Strip too tall | Add "12-15% height, 85% background above/below" |
| Fuzzy edges after removal | Background color mismatch | Ensure background EXACTLY matches parallax color |
| AI removed too much | Complex edges | Try regenerating with cleaner silhouette shapes |
| Wrong colors | Didn't match exactly | Use exact hex values from analyze-bg and CSS |
| Ghosting/semi-transparent edges | Soft edges in generation | Regenerate with sharper silhouette style |
| Semi-transparent silhouette | AI removal creates soft alpha | Use "Fixing Existing Dividers" workflow above |
| Color doesn't match section | Wrong RGB values | Get exact color from browser computed style |
For ANIMATED dividers (with .float or other CSS animations):
top: -20pxtranslateY(-50%)For STATIC dividers (no animation):
translateY(-50%) works fineWhen an element has a CSS animation that uses transform in its keyframes:
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
The animation's transform completely overrides any inline transform:
style={{ transform: "translateY(-50%)" }} gets replacedtranslateY(0px) insteadAlso note: percentage margins (margin-top: -50%) are based on parent WIDTH, not height.
/* Position divider on seam between sections */
.divider-top {
position: absolute;
top: -20px; /* Adjust until CENTER sits on seam */
left: 0;
right: 0;
z-index: 50;
pointer-events: none;
}
SECTION (solid background)
↓
SEAM ← divider CENTER should align HERE
↓
PARALLAX CONTAINER
└── DIVIDER (absolute, top: -20px, adjusts per image)
└── PARALLAX IMAGE
└── DIVIDER (absolute, bottom: 0, transform for bottom)
↓
SEAM
↓
SECTION (solid background)
From tokenpass-web/src/components/BorderedParallax.tsx:
{/* Top divider - sits on seam above parallax */}
<div
className="absolute left-0 right-0 z-50 pointer-events-none float"
style={{ top: "-20px" }} // Simple fixed value
>
<img src={borders.top} className="w-full h-auto" />
</div>
top: -20px and adjust visually