mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-09-29 23:46:15 +00:00

fix(skills): skill-relative paths below SKILL.md, widen path contract (#482 )

Refs #474 (finding 1 follow-up to #476, which rewrote design/SKILL.md
and added a contract that grepped only */SKILL.md; the same defect one
level down survived).

- 29 home-rooted paths (~/.claude/skills/design/scripts/...) in
  design/references/{cip,icon,logo}-design.md -> scripts/... (27 at
  review time, two more added by #470); the printed
  hint in design/scripts/cip/generate.py now derives the absolute path
  from __file__
- 19 project-rooted invocations (.claude/skills/<skill>/scripts/...) in
  brand/, slides/ and design/ references -> scripts/... (own skill) or
  ../<skill>/scripts/... (sibling sub-skill; sub-skills are installed
  side by side in every layout)
- brand/scripts/sync-brand-to-tokens.cjs resolved its sibling script from
  process.cwd(), silently skipping CSS regeneration under plugin and
  --global installs; now resolved from __dirname, with a warning when
  the sibling skill is missing; regression test asserts the regeneration
- brand/scripts/extract-colors.cjs: tool-neutral hint instead of a
  project-rooted path into a skill this plugin does not ship
- "Script Paths" section in the five sub-skills that invoke scripts:
  script path from the skill directory, working directory at the
  project root
- new test_skill_script_paths.py (src, mirrored to both scripts/tests
  copies): every python/node/bash invocation in every shipped skill
  markdown must be skill-relative and name a file that ships
- check-asset-sync.yml: contract covers every file under both skill
  trees and home-/project-/variable-rooted forms; ${CLAUDE_PLUGIN_ROOT}
  allowed only in the plugin-only core SKILL.md; LC_ALL=C + -I for the tracked
  .coverage binary; grep errors fail instead of passing; push filter
  includes the workflow and sync-assets.mjs
- CLI copy regenerated via sync-assets.mjs

Co-authored-by: notbucki <daniel@buckenmaier.xyz>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

2026-09-03 15:14:02 +07:00

4.1 KiB

Raw Blame History

Icon Design Reference

AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.

Scripts

Script	Purpose
`scripts/icon/generate.py`	Generate SVG icons with Gemini 3.1 Pro Preview

Commands

Generate Single Icon

python3 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Generate Batch Variations

python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
python3 scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons

Generate Multiple Sizes

python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

List Styles/Categories

python3 scripts/icon/generate.py --list-styles
python3 scripts/icon/generate.py --list-categories

CLI Options

Option	Description	Default
`--prompt, -p`	Icon description	required
`--name, -n`	Icon name (for filename)	-
`--style, -s`	Icon style (15 options)	-
`--category, -c`	Icon category for context	-
`--color`	Primary hex color	currentColor
`--size`	Display size in px	24
`--viewbox`	SVG viewBox size	24
`--output, -o`	Output file path	auto
`--output-dir`	Output directory (batch)	./icons
`--batch`	Number of variations	-
`--sizes`	Comma-separated sizes	-

Available Styles

Style	Stroke	Fill	Best For
outlined	2px	none	UI interfaces, web apps
filled	0	solid	Mobile apps, nav bars
duotone	0	dual	Marketing, landing pages
thin	1-1.5px	none	Luxury brands, editorial
bold	3px	none	Headers, hero sections
rounded	2px	none	Friendly apps, health
sharp	2px	none	Tech, fintech, enterprise
flat	0	solid	Material design, Google-style
gradient	0	gradient	Modern brands, SaaS
glassmorphism	1px	semi	Modern UI, overlays
pixel	0	solid	Gaming, retro
hand-drawn	varies	none	Artisan, creative
isometric	1-2px	partial	Tech docs, infographics
glyph	0	solid	System UI, compact
animated-ready	2px	varies	Interactive UI, onboarding

Icon Categories

Category	Icons
navigation	arrows, menus, home, chevrons
action	edit, delete, save, download, upload
communication	email, chat, phone, notification
media	play, pause, volume, camera
file	document, folder, archive, cloud
user	person, group, profile, settings
commerce	cart, bag, wallet, credit card
data	chart, graph, analytics, dashboard
development	code, terminal, bug, git, API
social	heart, star, bookmark, trophy
weather	sun, moon, cloud, rain
map	pin, location, compass, globe

SVG Best Practices

ViewBox: Use 0 0 24 24 (standard) or 0 0 16 16 (compact)
Colors: Use currentColor for CSS inheritance, avoid hardcoded colors
Accessibility: Always include <title> element
Optimization: Minimal path nodes, no embedded fonts or raster images
Sizing: Design at 24px, test at 16px and 48px for clarity
Stroke: Use stroke-linecap="round" and stroke-linejoin="round" for outlined styles

Model

gemini-3.1-pro-preview: Best thinking, token efficiency, factual consistency
Text-only output (SVG is XML text) — no image generation API needed
Supports structured output for consistent SVG formatting

Workflow

Describe icon → --prompt "settings gear"
Choose style → --style outlined
Generate → script outputs .svg file
Optionally batch → --batch 4 for variations
Multi-size export → --sizes "16,24,32,48"

Setup

export GEMINI_API_KEY="your-key"
pip install google-genai

4.1 KiB Raw Blame History