mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-08-01 19:06:14 +00:00
ef5f5ba0e6
* fix(cli): install all 7 skills via uipro init, not just the orchestrator `uipro init` rendered only the orchestrator (ui-ux-pro-max) and never delivered the 6 sibling skills (banner-design, brand, design, design-system, slides, ui-styling), so users got 1 of 7 skills (#362). - sync-assets.mjs: bundle the 6 sub-skills into cli/assets/skills/ as static copies (source of truth: .claude/skills/), with sync + check coverage. Excludes ui-styling/canvas-fonts (~5.8MB of TTF) and __pycache__/.pyc cruft — a skill registers from its SKILL.md, not its fonts — so the bundle adds ~0.9MB, not ~6.6MB. - template.ts: after rendering the orchestrator, install each bundled sub-skill as a sibling. The skills parent is derived from the platform's skillPath (skills/ for most, prompts/ for copilot, steering/ for kiro) rather than hardcoded. - uninstall.ts: remove the sub-skills too. Verified: check:assets in sync, tsc passes, and a per-platform install harness delivers all 7 skills to the correct parent dir with no fonts. Closes #362 * fix(cli): filter excluded files from target side of check:assets check:assets filtered sourceFiles with isExcludedAssetFile but not targetFiles, so a stray cli/assets/scripts/__pycache__/*.pyc (generated by a local Python run) was reported as an "extra asset file" and failed the gate. Apply the same predicate to targetFiles in both the dirsToSync and sub-skill loops. Verified: check:assets now passes with __pycache__/*.pyc present in the target tree; typecheck passes. * fix(cli): uninstall from each platform's real skills dir, not hardcoded skills/ removeSkillDir() hardcoded <folder>/skills/<name>, but the installer places skills under each platform config's skillPath parent — copilot in .github/prompts/, kiro in .kiro/steering/. So uninstall left those platforms' skills (orchestrator + sub-skills) behind. Derive the install parent from loadPlatformConfig(aiType).folderStructure (same source the installer uses), and keep the legacy <folder>/skills/ cleanup (incl. .shared/) for older installs. Deduped via a Set. Verified: typecheck passes; an install+uninstall harness removes all 7 skills with zero leftovers for claude (.claude/skills), copilot (.github/prompts) and kiro (.kiro/steering). * fix(cli): re-sync bundled sub-skills after #385 stripped ckm- names #385 merged to main and removed the ckm- prefix from the six .claude/skills/*/SKILL.md name fields. This branch's bundled copies under cli/assets/skills/ still carried the old ckm- names, so after the PR merges with main the source no longer matched the bundle and the check-asset-sync CI gate failed (stale asset file: skills/*/SKILL.md). Merge main and regenerate the bundle so cli/assets/skills matches the current .claude/skills source of truth. check:assets and typecheck pass.
3.3 KiB
3.3 KiB
Update brand colors, typography, and style - automatically syncs to all design system files.
$ARGUMENTS
Overview
This command systematically updates:
docs/brand-guidelines.md- Human-readable brand docassets/design-tokens.json- Token source of truthassets/design-tokens.css- Generated CSS variables
Workflow
Step 1: Gather Brand Input
Use AskUserQuestion to collect:
Theme Selection:
- Theme name (e.g., "Ocean Professional", "Electric Creative", "Forest Calm")
Primary Color:
- Color name (e.g., "Ocean Blue", "Coral", "Forest Green")
- Hex code (e.g., #3B82F6)
Secondary Color:
- Color name (e.g., "Golden Amber", "Electric Purple")
- Hex code
Accent Color:
- Color name (e.g., "Emerald", "Neon Mint")
- Hex code
Brand Mood (for AI image generation):
- Mood keywords (e.g., "professional, trustworthy, premium" or "bold, creative, energetic")
Step 2: Update Brand Guidelines
Edit docs/brand-guidelines.md:
- Quick Reference table - Update color names and hex codes
- Brand Concept section - Update theme name and description
- Color Palette section - Update Primary, Secondary, Accent colors with shades
- AI Image Generation section - Update base prompt, keywords, mood descriptors
Step 3: Sync to Design Tokens
Run the sync script:
node .claude/skills/brand/scripts/sync-brand-to-tokens.cjs
This will:
- Update
assets/design-tokens.jsonwith new color names and values - Regenerate
assets/design-tokens.csswith correct CSS variables
Step 4: Verify Sync
Confirm all files are updated:
# Check brand context extraction
node .claude/skills/brand/scripts/inject-brand-context.cjs --json | head -30
# Check CSS variables
grep "primary" assets/design-tokens.css | head -5
Step 5: Report
Output summary:
- Theme: [name]
- Primary: [name] ([hex])
- Secondary: [name] ([hex])
- Accent: [name] ([hex])
- Files updated: brand-guidelines.md, design-tokens.json, design-tokens.css
Files Modified
| File | Purpose |
|---|---|
docs/brand-guidelines.md |
Human-readable brand documentation |
assets/design-tokens.json |
Token definitions (primitive→semantic→component) |
assets/design-tokens.css |
CSS variables for UI components |
Skills Used
brand- Brand context extraction and syncdesign-system- Token generation
Examples
# Interactive mode
/brand:update
# With theme hint
/brand:update "Ocean Professional"
# Quick preset
/brand:update "midnight purple"
Color Presets
If user specifies a preset name, use these defaults:
| Preset | Primary | Secondary | Accent |
|---|---|---|---|
| ocean-professional | #3B82F6 Ocean Blue | #F59E0B Golden Amber | #10B981 Emerald |
| electric-creative | #FF6B6B Coral | #9B5DE5 Electric Purple | #00F5D4 Neon Mint |
| forest-calm | #059669 Forest Green | #92400E Warm Brown | #FBBF24 Sunlight |
| midnight-purple | #7C3AED Violet | #EC4899 Pink | #06B6D4 Cyan |
| sunset-warm | #F97316 Orange | #DC2626 Red | #FACC15 Yellow |
Important
- Always sync all three files - Never update just brand-guidelines.md alone
- Verify extraction - Run inject-brand-context.cjs after update to confirm
- Test image generation - Optionally generate a test image to verify brand application