From svg-infographics
SVG theme swatch generation, palette approval workflow, colour naming, and brand palette management. Auto-triggered when creating theme swatches, defining colour palettes, or working with brand-specific SVG colour schemes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svg-infographics:themeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Themes define the colour palette for all SVG infographics. Every project needs approved theme before deliverables.
Themes define the colour palette for all SVG infographics. Every project needs approved theme before deliverables.
pip install stellars-claude-code-plugins
Ships svg-infographics CLI (used for swatch generation, contrast audit). Verify: svg-infographics --help.
MANDATORY: TaskCreate/TaskUpdate when generating themes. Tasks for swatch generation, user approval, documentation.
theme_swatch.svg showing all colours in context:
CLAUDE.md or theme.mdNumbered shade grades in four roles:
| Role | Grade | Purpose |
|---|---|---|
| fg-1 | Most contrastive | Headings, primary labels, hero stats |
| fg-2 | High contrast | Card titles, phase subtitles |
| fg-3 | Medium contrast | Descriptions, sublabels |
| fg-4 | Least contrastive | Metadata, tertiary text |
| accent-1 | Primary | Strokes, icons, borders |
| accent-2 | Secondary | Lighter strokes, later-phase |
| bg-1 | Card fill | Accent-1 at fill-opacity 0.04-0.06 |
| bg-2 | Track fill | Accent-1 at opacity 0.3 |
fg-4 MUST remain readable at 9-10px.
fg-1: #103d82 (darkest - headings, primary labels)
fg-2: #2a5f9e (mid - card titles, stat numbers)
fg-3: #4a7ba7 (medium - descriptions, sublabels)
fg-4: #6b8db5 (lightest - metadata, tertiary text)
accent-1: #00a6ff (primary strokes, icons, borders)
accent-2: #66ccff (secondary strokes, later-phase)
bg-1: #00a6ff at fill-opacity 0.04-0.06
bg-2: #00a6ff at opacity 0.3
Three sections: palette reference (transparent bg), light background strip, dark background strip. Each strip demonstrates: card, stats, timeline, arrows, coverage bar.
=== COLOUR RULES === comment block documenting all hex values, dark mode mappings, accent usage guidance, hierarchyMANDATORY: Every hex colour in any SVG MUST have a named entry in the theme swatch.
Named categories:
New colour procedure:
| File | Brand |
|---|---|
theme_swatch_1_kolomolo.svg | Kolomolo (deep blue/violet) |
theme_swatch_3_meridian.svg | Meridian (blue palette) |
theme_swatch_5_optima_manufacturing.svg | Optima Manufacturing (burgundy + gray) |
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub stellarshenson/claude-code-plugins --plugin svg-infographics