ui-pro-forge-cli 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (188) hide show
  1. package/README.md +99 -0
  2. package/assets/data/app-interface.csv +31 -0
  3. package/assets/data/charts.csv +26 -0
  4. package/assets/data/colors.csv +194 -0
  5. package/assets/data/google-fonts.csv +1924 -0
  6. package/assets/data/icons.csv +106 -0
  7. package/assets/data/landing.csv +35 -0
  8. package/assets/data/motion.csv +17 -0
  9. package/assets/data/products.csv +193 -0
  10. package/assets/data/react-performance.csv +45 -0
  11. package/assets/data/stacks/angular.csv +51 -0
  12. package/assets/data/stacks/astro.csv +54 -0
  13. package/assets/data/stacks/avalonia.csv +57 -0
  14. package/assets/data/stacks/flutter.csv +53 -0
  15. package/assets/data/stacks/html-tailwind.csv +56 -0
  16. package/assets/data/stacks/javafx.csv +76 -0
  17. package/assets/data/stacks/jetpack-compose.csv +53 -0
  18. package/assets/data/stacks/laravel.csv +51 -0
  19. package/assets/data/stacks/nextjs.csv +53 -0
  20. package/assets/data/stacks/nuxt-ui.csv +71 -0
  21. package/assets/data/stacks/nuxtjs.csv +59 -0
  22. package/assets/data/stacks/react-native.csv +52 -0
  23. package/assets/data/stacks/react.csv +54 -0
  24. package/assets/data/stacks/shadcn.csv +61 -0
  25. package/assets/data/stacks/solidjs.csv +21 -0
  26. package/assets/data/stacks/svelte.csv +54 -0
  27. package/assets/data/stacks/swiftui.csv +51 -0
  28. package/assets/data/stacks/threejs.csv +54 -0
  29. package/assets/data/stacks/uno.csv +60 -0
  30. package/assets/data/stacks/vue.csv +50 -0
  31. package/assets/data/stacks/winui.csv +60 -0
  32. package/assets/data/styles.csv +86 -0
  33. package/assets/data/typography.csv +75 -0
  34. package/assets/data/ui-reasoning.csv +162 -0
  35. package/assets/data/ux-guidelines.csv +100 -0
  36. package/assets/scripts/core.py +463 -0
  37. package/assets/scripts/design_system.py +1371 -0
  38. package/assets/scripts/search.py +162 -0
  39. package/assets/scripts/tests/test_core.py +134 -0
  40. package/assets/scripts/validate_data.py +114 -0
  41. package/assets/skills/banner-design/SKILL.md +196 -0
  42. package/assets/skills/banner-design/references/banner-sizes-and-styles.md +118 -0
  43. package/assets/skills/brand/SKILL.md +97 -0
  44. package/assets/skills/brand/references/approval-checklist.md +169 -0
  45. package/assets/skills/brand/references/asset-organization.md +157 -0
  46. package/assets/skills/brand/references/brand-guideline-template.md +140 -0
  47. package/assets/skills/brand/references/color-palette-management.md +186 -0
  48. package/assets/skills/brand/references/consistency-checklist.md +94 -0
  49. package/assets/skills/brand/references/logo-usage-rules.md +185 -0
  50. package/assets/skills/brand/references/messaging-framework.md +85 -0
  51. package/assets/skills/brand/references/typography-specifications.md +214 -0
  52. package/assets/skills/brand/references/update.md +118 -0
  53. package/assets/skills/brand/references/visual-identity.md +96 -0
  54. package/assets/skills/brand/references/voice-framework.md +88 -0
  55. package/assets/skills/brand/scripts/extract-colors.cjs +341 -0
  56. package/assets/skills/brand/scripts/inject-brand-context.cjs +349 -0
  57. package/assets/skills/brand/scripts/sync-brand-to-tokens.cjs +248 -0
  58. package/assets/skills/brand/scripts/tests/test_sync_brand_to_tokens.py +52 -0
  59. package/assets/skills/brand/scripts/validate-asset.cjs +387 -0
  60. package/assets/skills/brand/templates/brand-guidelines-starter.md +275 -0
  61. package/assets/skills/design/SKILL.md +313 -0
  62. package/assets/skills/design/data/cip/deliverables.csv +51 -0
  63. package/assets/skills/design/data/cip/industries.csv +21 -0
  64. package/assets/skills/design/data/cip/mockup-contexts.csv +21 -0
  65. package/assets/skills/design/data/cip/styles.csv +21 -0
  66. package/assets/skills/design/data/icon/styles.csv +16 -0
  67. package/assets/skills/design/data/logo/colors.csv +56 -0
  68. package/assets/skills/design/data/logo/industries.csv +56 -0
  69. package/assets/skills/design/data/logo/styles.csv +56 -0
  70. package/assets/skills/design/references/banner-sizes-and-styles.md +118 -0
  71. package/assets/skills/design/references/cip-deliverable-guide.md +95 -0
  72. package/assets/skills/design/references/cip-design.md +121 -0
  73. package/assets/skills/design/references/cip-prompt-engineering.md +84 -0
  74. package/assets/skills/design/references/cip-style-guide.md +68 -0
  75. package/assets/skills/design/references/design-routing.md +207 -0
  76. package/assets/skills/design/references/icon-design.md +122 -0
  77. package/assets/skills/design/references/logo-color-psychology.md +101 -0
  78. package/assets/skills/design/references/logo-design.md +92 -0
  79. package/assets/skills/design/references/logo-prompt-engineering.md +158 -0
  80. package/assets/skills/design/references/logo-style-guide.md +109 -0
  81. package/assets/skills/design/references/slides-copywriting-formulas.md +84 -0
  82. package/assets/skills/design/references/slides-create.md +4 -0
  83. package/assets/skills/design/references/slides-html-template.md +295 -0
  84. package/assets/skills/design/references/slides-layout-patterns.md +137 -0
  85. package/assets/skills/design/references/slides-strategies.md +94 -0
  86. package/assets/skills/design/references/slides.md +42 -0
  87. package/assets/skills/design/references/social-photos-design.md +329 -0
  88. package/assets/skills/design/scripts/cip/core.py +215 -0
  89. package/assets/skills/design/scripts/cip/generate.py +484 -0
  90. package/assets/skills/design/scripts/cip/render-html.py +424 -0
  91. package/assets/skills/design/scripts/cip/search.py +127 -0
  92. package/assets/skills/design/scripts/icon/generate.py +487 -0
  93. package/assets/skills/design/scripts/logo/core.py +175 -0
  94. package/assets/skills/design/scripts/logo/generate.py +362 -0
  95. package/assets/skills/design/scripts/logo/search.py +114 -0
  96. package/assets/skills/design-system/SKILL.md +244 -0
  97. package/assets/skills/design-system/data/slide-backgrounds.csv +11 -0
  98. package/assets/skills/design-system/data/slide-charts.csv +26 -0
  99. package/assets/skills/design-system/data/slide-color-logic.csv +14 -0
  100. package/assets/skills/design-system/data/slide-copy.csv +26 -0
  101. package/assets/skills/design-system/data/slide-layout-logic.csv +16 -0
  102. package/assets/skills/design-system/data/slide-layouts.csv +26 -0
  103. package/assets/skills/design-system/data/slide-strategies.csv +16 -0
  104. package/assets/skills/design-system/data/slide-typography.csv +15 -0
  105. package/assets/skills/design-system/references/component-specs.md +236 -0
  106. package/assets/skills/design-system/references/component-tokens.md +214 -0
  107. package/assets/skills/design-system/references/primitive-tokens.md +203 -0
  108. package/assets/skills/design-system/references/semantic-tokens.md +215 -0
  109. package/assets/skills/design-system/references/states-and-variants.md +241 -0
  110. package/assets/skills/design-system/references/tailwind-integration.md +251 -0
  111. package/assets/skills/design-system/references/token-architecture.md +224 -0
  112. package/assets/skills/design-system/scripts/embed-tokens.cjs +99 -0
  113. package/assets/skills/design-system/scripts/fetch-background.py +317 -0
  114. package/assets/skills/design-system/scripts/generate-slide.py +770 -0
  115. package/assets/skills/design-system/scripts/generate-tokens.cjs +205 -0
  116. package/assets/skills/design-system/scripts/html-token-validator.py +327 -0
  117. package/assets/skills/design-system/scripts/search-slides.py +218 -0
  118. package/assets/skills/design-system/scripts/slide-token-validator.py +35 -0
  119. package/assets/skills/design-system/scripts/slide_search_core.py +453 -0
  120. package/assets/skills/design-system/scripts/tests/test_validate_tokens.py +48 -0
  121. package/assets/skills/design-system/scripts/validate-tokens.cjs +246 -0
  122. package/assets/skills/design-system/templates/design-tokens-starter.json +143 -0
  123. package/assets/skills/slides/SKILL.md +40 -0
  124. package/assets/skills/slides/references/copywriting-formulas.md +84 -0
  125. package/assets/skills/slides/references/create.md +4 -0
  126. package/assets/skills/slides/references/html-template.md +295 -0
  127. package/assets/skills/slides/references/layout-patterns.md +137 -0
  128. package/assets/skills/slides/references/slide-strategies.md +94 -0
  129. package/assets/skills/ui-styling/LICENSE.txt +202 -0
  130. package/assets/skills/ui-styling/SKILL.md +324 -0
  131. package/assets/skills/ui-styling/references/canvas-design-system.md +320 -0
  132. package/assets/skills/ui-styling/references/shadcn-accessibility.md +471 -0
  133. package/assets/skills/ui-styling/references/shadcn-components.md +424 -0
  134. package/assets/skills/ui-styling/references/shadcn-theming.md +373 -0
  135. package/assets/skills/ui-styling/references/tailwind-customization.md +483 -0
  136. package/assets/skills/ui-styling/references/tailwind-responsive.md +382 -0
  137. package/assets/skills/ui-styling/references/tailwind-utilities.md +455 -0
  138. package/assets/skills/ui-styling/scripts/requirements.txt +17 -0
  139. package/assets/skills/ui-styling/scripts/shadcn_add.py +308 -0
  140. package/assets/skills/ui-styling/scripts/tailwind_config_gen.py +473 -0
  141. package/assets/skills/ui-styling/scripts/tests/coverage-ui.json +1 -0
  142. package/assets/skills/ui-styling/scripts/tests/requirements.txt +3 -0
  143. package/assets/skills/ui-styling/scripts/tests/test_shadcn_add.py +266 -0
  144. package/assets/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py +394 -0
  145. package/assets/templates/base/quick-reference.md +297 -0
  146. package/assets/templates/base/skill-content.md +384 -0
  147. package/assets/templates/platforms/agent.json +21 -0
  148. package/assets/templates/platforms/augment.json +18 -0
  149. package/assets/templates/platforms/claude.json +21 -0
  150. package/assets/templates/platforms/codebuddy.json +21 -0
  151. package/assets/templates/platforms/codewhale.json +21 -0
  152. package/assets/templates/platforms/codex.json +21 -0
  153. package/assets/templates/platforms/continue.json +21 -0
  154. package/assets/templates/platforms/copilot.json +21 -0
  155. package/assets/templates/platforms/cursor.json +21 -0
  156. package/assets/templates/platforms/droid.json +21 -0
  157. package/assets/templates/platforms/gemini.json +21 -0
  158. package/assets/templates/platforms/kilocode.json +21 -0
  159. package/assets/templates/platforms/kiro.json +21 -0
  160. package/assets/templates/platforms/opencode.json +21 -0
  161. package/assets/templates/platforms/qoder.json +21 -0
  162. package/assets/templates/platforms/roocode.json +21 -0
  163. package/assets/templates/platforms/trae.json +21 -0
  164. package/assets/templates/platforms/warp.json +18 -0
  165. package/assets/templates/platforms/windsurf.json +21 -0
  166. package/dist/commands/init.d.ts +11 -0
  167. package/dist/commands/init.js +165 -0
  168. package/dist/commands/uninstall.d.ts +7 -0
  169. package/dist/commands/uninstall.js +131 -0
  170. package/dist/commands/update.d.ts +7 -0
  171. package/dist/commands/update.js +73 -0
  172. package/dist/commands/versions.d.ts +5 -0
  173. package/dist/commands/versions.js +36 -0
  174. package/dist/index.d.ts +2 -0
  175. package/dist/index.js +78 -0
  176. package/dist/types/index.d.ts +40 -0
  177. package/dist/types/index.js +25 -0
  178. package/dist/utils/detect.d.ts +8 -0
  179. package/dist/utils/detect.js +115 -0
  180. package/dist/utils/extract.d.ts +15 -0
  181. package/dist/utils/extract.js +125 -0
  182. package/dist/utils/github.d.ts +12 -0
  183. package/dist/utils/github.js +97 -0
  184. package/dist/utils/logger.d.ts +8 -0
  185. package/dist/utils/logger.js +9 -0
  186. package/dist/utils/template.d.ts +50 -0
  187. package/dist/utils/template.js +249 -0
  188. package/package.json +65 -0
@@ -0,0 +1,84 @@
1
+ # CIP Mockup Prompt Engineering
2
+
3
+ ## Base Prompt Structure
4
+
5
+ ```
6
+ Professional corporate identity mockup photograph showing [DELIVERABLE] for brand '[BRAND_NAME]', [STYLE] design style, using colors [COLORS], [TYPOGRAPHY] typography, logo placement: [PLACEMENT], [MATERIALS] materials with [FINISHES] finish, [CONTEXT] setting, [MOOD] mood, photorealistic product photography, soft natural lighting, high quality professional shot, 8k resolution detailed
7
+ ```
8
+
9
+ ## Deliverable-Specific Modifiers
10
+
11
+ ### Business Card
12
+ ```
13
+ business card on marble surface, stack of cards, premium paper texture, soft shadows, 45 degree angle
14
+ ```
15
+
16
+ ### Letterhead
17
+ ```
18
+ letterhead flat lay with envelope and pen, velvet fabric background, brand stationery set, overhead view
19
+ ```
20
+
21
+ ### Office Signage
22
+ ```
23
+ 3D logo signage on office wall, modern lobby interior, backlit LED, brushed metal finish, architectural photography
24
+ ```
25
+
26
+ ### Vehicle Branding
27
+ ```
28
+ branded vehicle on urban street, 3/4 front angle view, professional car wrap, motion blur background optional
29
+ ```
30
+
31
+ ### Apparel (Polo/T-Shirt)
32
+ ```
33
+ folded polo shirt on clean background, embroidered logo on chest, premium fabric texture, product photography
34
+ ```
35
+
36
+ ## Style Modifiers
37
+
38
+ ### Corporate Minimal
39
+ ```
40
+ clean minimal aesthetic, white space, subtle shadows, matte finish, professional
41
+ ```
42
+
43
+ ### Luxury Premium
44
+ ```
45
+ dark background, dramatic rim lighting, gold accents, premium materials, sophisticated
46
+ ```
47
+
48
+ ### Modern Tech
49
+ ```
50
+ gradient colors, geometric elements, clean surfaces, futuristic, innovative
51
+ ```
52
+
53
+ ### Warm Organic
54
+ ```
55
+ natural materials, kraft paper texture, warm lighting, authentic, artisan
56
+ ```
57
+
58
+ ## Lighting Modifiers
59
+
60
+ - **Studio:** `professional studio lighting, even illumination`
61
+ - **Natural:** `soft natural daylight, window light`
62
+ - **Dramatic:** `dramatic rim light, dark background, high contrast`
63
+ - **Warm:** `warm golden hour lighting, cozy atmosphere`
64
+
65
+ ## Context Modifiers
66
+
67
+ - **Marble desk:** `white marble surface, soft shadows, luxury`
68
+ - **Wooden table:** `warm wood grain, natural, artisan`
69
+ - **Office interior:** `modern office environment, architectural`
70
+ - **Flat lay:** `overhead view, organized arrangement`
71
+ - **Lifestyle:** `in-use context, human element`
72
+
73
+ ## Quality Modifiers
74
+
75
+ Always include:
76
+ ```
77
+ photorealistic, professional photography, high quality, 8k resolution, detailed, sharp focus
78
+ ```
79
+
80
+ ## Negative Prompts (what to avoid)
81
+
82
+ ```
83
+ blurry, low quality, distorted text, misspelled, amateur, clipart, cartoon, illustration, watermark
84
+ ```
@@ -0,0 +1,68 @@
1
+ # CIP Design Style Guide
2
+
3
+ ## Corporate Minimal
4
+ **Industries:** Finance, Legal, Consulting, Tech
5
+ **Colors:** Navy (#0F172A), White (#FFFFFF), Blue accents
6
+ **Typography:** Clean sans-serif (Inter, Helvetica)
7
+ **Materials:** Premium matte paper, subtle textures
8
+ **Finishes:** Matte, spot UV on logo
9
+
10
+ ## Modern Tech
11
+ **Industries:** Tech, SaaS, Startups, AI
12
+ **Colors:** Purple (#6366F1), Cyan (#0EA5E9), Green (#10B981)
13
+ **Typography:** Geometric sans (Outfit, Poppins)
14
+ **Materials:** Smooth surfaces, gradient prints
15
+ **Finishes:** Gloss, metallic accents
16
+
17
+ ## Luxury Premium
18
+ **Industries:** Fashion, Jewelry, Hotels, Fine Dining
19
+ **Colors:** Black (#1C1917), Gold (#D4AF37), White
20
+ **Typography:** Elegant serif (Playfair), thin sans
21
+ **Materials:** Heavy cotton paper, leather, metal
22
+ **Finishes:** Gold foil, emboss, deboss, soft-touch
23
+
24
+ ## Classic Traditional
25
+ **Industries:** Law Firms, Heritage Brands, Finance
26
+ **Colors:** Navy, Burgundy, Gold
27
+ **Typography:** Traditional serif (Times, Garamond)
28
+ **Materials:** Quality laid paper, wood
29
+ **Finishes:** Letterpress, gold emboss
30
+
31
+ ## Warm Organic
32
+ **Industries:** Food, Organic, Wellness, Craft
33
+ **Colors:** Brown (#8B4513), Green (#228B22), Cream
34
+ **Typography:** Friendly serif, organic script
35
+ **Materials:** Kraft paper, recycled materials
36
+ **Finishes:** Uncoated, natural textures
37
+
38
+ ## Bold Dynamic
39
+ **Industries:** Sports, Entertainment, Gaming
40
+ **Colors:** Red (#DC2626), Orange (#F97316), Black
41
+ **Typography:** Bold condensed sans
42
+ **Materials:** High-contrast, metallic
43
+ **Finishes:** Gloss, vibrant colors
44
+
45
+ ## Fresh Modern
46
+ **Industries:** Healthcare, Wellness, Fintech
47
+ **Colors:** Mint (#10B981), Sky (#0EA5E9), White
48
+ **Typography:** Modern rounded sans
49
+ **Materials:** Light, clean surfaces
50
+ **Finishes:** Matte, clean minimal
51
+
52
+ ## Soft Elegant
53
+ **Industries:** Beauty, Wedding, Spa, Fashion
54
+ **Colors:** Pink (#F472B6), Gold, White
55
+ **Typography:** Elegant script, thin sans
56
+ **Materials:** Soft-touch, quality paper
57
+ **Finishes:** Rose gold foil, emboss
58
+
59
+ ## Color Psychology
60
+
61
+ | Color | Meaning | Best Use |
62
+ |-------|---------|----------|
63
+ | Blue | Trust, stability | Finance, Tech, Healthcare |
64
+ | Green | Growth, nature | Eco, Wellness, Organic |
65
+ | Gold | Luxury, prestige | Premium, Jewelry |
66
+ | Red | Energy, passion | Food, Sports |
67
+ | Black | Sophistication | Luxury, Fashion |
68
+ | White | Clean, minimal | Tech, Healthcare |
@@ -0,0 +1,207 @@
1
+ # Design Routing Guide
2
+
3
+ When to use each design sub-skill.
4
+
5
+ ## Skill Overview
6
+
7
+ | Skill | Purpose | Key Files |
8
+ |-------|---------|-----------|
9
+ | brand | Brand identity, voice, assets | SKILL.md + 10 references + 3 scripts |
10
+ | design-system | Token architecture, specs | SKILL.md + 7 references + 2 scripts |
11
+ | ui-styling | Component implementation | SKILL.md + 7 references + 2 scripts |
12
+ | logo-design | AI logo generation (55 styles, 30 palettes) | SKILL.md + 4 references + 2 scripts |
13
+ | cip-design | Corporate Identity Program (50 deliverables) | SKILL.md + 3 references + 3 scripts |
14
+ | slides | HTML presentations with Chart.js | SKILL.md + 4 references |
15
+ | banner-design | Banners for social, ads, web, print (22 styles) | SKILL.md + 1 reference |
16
+ | icon-design | SVG icon generation (15 styles, Gemini 3.1 Pro) | SKILL.md + 1 reference + 1 script |
17
+
18
+ ## Routing by Task Type
19
+
20
+ ### Brand Identity Tasks
21
+ **→ brand**
22
+
23
+ - Define brand colors and typography
24
+ - Create logo usage guidelines
25
+ - Establish brand voice and tone
26
+ - Organize and validate assets
27
+ - Create messaging frameworks
28
+ - Audit brand consistency
29
+
30
+ ### Token System Tasks
31
+ **→ design-system**
32
+
33
+ - Create design tokens JSON
34
+ - Generate CSS variables
35
+ - Define component specifications
36
+ - Map tokens to Tailwind config
37
+ - Validate token usage in code
38
+ - Document state and variants
39
+
40
+ ### Implementation Tasks
41
+ **→ ui-styling**
42
+
43
+ - Add shadcn/ui components
44
+ - Style with Tailwind classes
45
+ - Implement dark mode
46
+ - Create responsive layouts
47
+ - Build accessible components
48
+
49
+ ### Logo Design Tasks
50
+ **→ logo-design**
51
+
52
+ - Create logos with AI (Gemini Nano Banana)
53
+ - Search logo styles, color palettes, industry guidelines
54
+ - Generate design briefs
55
+ - Explore 55+ styles (minimalist, vintage, luxury, geometric, etc.)
56
+
57
+ ### Corporate Identity Program Tasks
58
+ **→ cip-design**
59
+
60
+ - Generate CIP deliverables (business cards, letterheads, signage, vehicles, apparel)
61
+ - Create CIP briefs with industry/style analysis
62
+ - Generate mockups with/without logo (Gemini Flash/Pro)
63
+ - Render HTML presentations from CIP mockups
64
+
65
+ ### Presentation Tasks
66
+ **→ slides**
67
+
68
+ - Create strategic HTML presentations
69
+ - Data visualization with Chart.js
70
+ - Apply copywriting formulas to slide content
71
+ - Use layout patterns and design tokens
72
+
73
+ ### Banner Design Tasks
74
+ **→ banner-design**
75
+
76
+ - Design banners for social media (Facebook, Twitter, LinkedIn, YouTube, Instagram)
77
+ - Create ad banners (Google Ads, Meta Ads)
78
+ - Website hero banners and headers
79
+ - Print banners and covers
80
+ - 22 art direction styles (minimalist, bold typography, gradient, glassmorphism, etc.)
81
+
82
+ ### Icon Design Tasks
83
+ **→ icon-design**
84
+
85
+ - Generate SVG icons with AI (Gemini 3.1 Pro Preview)
86
+ - Batch icon variations in multiple styles
87
+ - Multi-size export (16px, 24px, 32px, 48px)
88
+ - 15 styles: outlined, filled, duotone, rounded, sharp, gradient, etc.
89
+ - 12 categories: navigation, action, communication, media, commerce, data
90
+
91
+ ## Routing by Question Type
92
+
93
+ | Question | Skill |
94
+ |----------|-------|
95
+ | "What color should this be?" | brand |
96
+ | "How do I create a token for X?" | design-system |
97
+ | "How do I build a button component?" | ui-styling |
98
+ | "Is this on-brand?" | brand |
99
+ | "Should I use a CSS variable here?" | design-system |
100
+ | "How do I add dark mode?" | ui-styling |
101
+ | "Create a logo for my brand" | logo-design |
102
+ | "Generate business card mockups" | cip-design |
103
+ | "Create a pitch deck" | slides |
104
+ | "Design brand identity package" | cip-design |
105
+ | "What logo style fits my industry?" | logo-design |
106
+ | "Design a Facebook cover" | banner-design |
107
+ | "Create ad banners for Google" | banner-design |
108
+ | "Make a website hero banner" | banner-design |
109
+ | "Generate a settings icon" | icon-design |
110
+ | "Create SVG icons for my app" | icon-design |
111
+ | "Design an icon set" | icon-design |
112
+
113
+ ## Multi-Skill Workflows
114
+
115
+ ### New Project Setup
116
+
117
+ ```
118
+ 1. brand → Define identity
119
+ - Colors, typography, voice
120
+
121
+ 2. design-system → Create tokens
122
+ - Primitive, semantic, component
123
+
124
+ 3. ui-styling → Implement
125
+ - Configure Tailwind, add components
126
+ ```
127
+
128
+ ### Design System Migration
129
+
130
+ ```
131
+ 1. brand → Audit existing
132
+ - Extract brand colors, fonts
133
+
134
+ 2. design-system → Formalize tokens
135
+ - Create three-layer architecture
136
+
137
+ 3. ui-styling → Update code
138
+ - Replace hardcoded values
139
+ ```
140
+
141
+ ### Component Creation
142
+
143
+ ```
144
+ 1. design-system → Reference specs
145
+ - Button states, sizes, variants
146
+
147
+ 2. ui-styling → Implement
148
+ - Build with shadcn/ui + Tailwind
149
+ ```
150
+
151
+ ## Skill Dependencies
152
+
153
+ ```
154
+ brand
155
+ ↓ (colors, typography)
156
+ design-system
157
+ ↓ (tokens, specs)
158
+ ui-styling
159
+ ↓ (components)
160
+ Application Code
161
+ ```
162
+
163
+ ## Quick Commands
164
+
165
+ **Brand:**
166
+ ```bash
167
+ node .claude/skills/brand/scripts/inject-brand-context.cjs
168
+ node .claude/skills/brand/scripts/validate-asset.cjs <path>
169
+ ```
170
+
171
+ **Tokens:**
172
+ ```bash
173
+ node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
174
+ node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/
175
+ ```
176
+
177
+ **Components:**
178
+ ```bash
179
+ npx shadcn@latest add button card input
180
+ ```
181
+
182
+ ## When to Use Multiple Skills
183
+
184
+ Use **all eight** when:
185
+ - Complete brand package from scratch (logo → CIP → presentation)
186
+
187
+ Use **brand + design-system + ui-styling** when:
188
+ - Design system setup and implementation
189
+
190
+ Use **logo-design + cip-design** when:
191
+ - Complete brand identity package with deliverable mockups
192
+
193
+ Use **logo-design + cip-design + slides** when:
194
+ - Brand pitch: generate logo, create CIP mockups, build pitch deck
195
+
196
+ Use **banner-design + brand** when:
197
+ - Social media presence: branded banners across all platforms
198
+
199
+ Use **icon-design + design-system** when:
200
+ - Custom icon set matching design tokens and component specs
201
+
202
+ Use **brand + design-system** when:
203
+ - Defining design language without implementation
204
+
205
+ Use **design-system + ui-styling** when:
206
+ - Implementing existing brand in code
207
+ - Building component library
@@ -0,0 +1,122 @@
1
+ # Icon Design Reference
2
+
3
+ AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.
4
+
5
+ ## Scripts
6
+
7
+ | Script | Purpose |
8
+ |--------|---------|
9
+ | `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro Preview |
10
+
11
+ ## Commands
12
+
13
+ ### Generate Single Icon
14
+
15
+ ```bash
16
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
17
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
18
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
19
+ ```
20
+
21
+ ### Generate Batch Variations
22
+
23
+ ```bash
24
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
25
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
26
+ ```
27
+
28
+ ### Generate Multiple Sizes
29
+
30
+ ```bash
31
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
32
+ ```
33
+
34
+ ### List Styles/Categories
35
+
36
+ ```bash
37
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
38
+ python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories
39
+ ```
40
+
41
+ ## CLI Options
42
+
43
+ | Option | Description | Default |
44
+ |--------|-------------|---------|
45
+ | `--prompt, -p` | Icon description | required |
46
+ | `--name, -n` | Icon name (for filename) | - |
47
+ | `--style, -s` | Icon style (15 options) | - |
48
+ | `--category, -c` | Icon category for context | - |
49
+ | `--color` | Primary hex color | currentColor |
50
+ | `--size` | Display size in px | 24 |
51
+ | `--viewbox` | SVG viewBox size | 24 |
52
+ | `--output, -o` | Output file path | auto |
53
+ | `--output-dir` | Output directory (batch) | ./icons |
54
+ | `--batch` | Number of variations | - |
55
+ | `--sizes` | Comma-separated sizes | - |
56
+
57
+ ## Available Styles
58
+
59
+ | Style | Stroke | Fill | Best For |
60
+ |-------|--------|------|----------|
61
+ | outlined | 2px | none | UI interfaces, web apps |
62
+ | filled | 0 | solid | Mobile apps, nav bars |
63
+ | duotone | 0 | dual | Marketing, landing pages |
64
+ | thin | 1-1.5px | none | Luxury brands, editorial |
65
+ | bold | 3px | none | Headers, hero sections |
66
+ | rounded | 2px | none | Friendly apps, health |
67
+ | sharp | 2px | none | Tech, fintech, enterprise |
68
+ | flat | 0 | solid | Material design, Google-style |
69
+ | gradient | 0 | gradient | Modern brands, SaaS |
70
+ | glassmorphism | 1px | semi | Modern UI, overlays |
71
+ | pixel | 0 | solid | Gaming, retro |
72
+ | hand-drawn | varies | none | Artisan, creative |
73
+ | isometric | 1-2px | partial | Tech docs, infographics |
74
+ | glyph | 0 | solid | System UI, compact |
75
+ | animated-ready | 2px | varies | Interactive UI, onboarding |
76
+
77
+ ## Icon Categories
78
+
79
+ | Category | Icons |
80
+ |----------|-------|
81
+ | navigation | arrows, menus, home, chevrons |
82
+ | action | edit, delete, save, download, upload |
83
+ | communication | email, chat, phone, notification |
84
+ | media | play, pause, volume, camera |
85
+ | file | document, folder, archive, cloud |
86
+ | user | person, group, profile, settings |
87
+ | commerce | cart, bag, wallet, credit card |
88
+ | data | chart, graph, analytics, dashboard |
89
+ | development | code, terminal, bug, git, API |
90
+ | social | heart, star, bookmark, trophy |
91
+ | weather | sun, moon, cloud, rain |
92
+ | map | pin, location, compass, globe |
93
+
94
+ ## SVG Best Practices
95
+
96
+ - **ViewBox**: Use `0 0 24 24` (standard) or `0 0 16 16` (compact)
97
+ - **Colors**: Use `currentColor` for CSS inheritance, avoid hardcoded colors
98
+ - **Accessibility**: Always include `<title>` element
99
+ - **Optimization**: Minimal path nodes, no embedded fonts or raster images
100
+ - **Sizing**: Design at 24px, test at 16px and 48px for clarity
101
+ - **Stroke**: Use `stroke-linecap="round"` and `stroke-linejoin="round"` for outlined styles
102
+
103
+ ## Model
104
+
105
+ - **gemini-3.1-pro-preview**: Best thinking, token efficiency, factual consistency
106
+ - Text-only output (SVG is XML text) — no image generation API needed
107
+ - Supports structured output for consistent SVG formatting
108
+
109
+ ## Workflow
110
+
111
+ 1. Describe icon → `--prompt "settings gear"`
112
+ 2. Choose style → `--style outlined`
113
+ 3. Generate → script outputs .svg file
114
+ 4. Optionally batch → `--batch 4` for variations
115
+ 5. Multi-size export → `--sizes "16,24,32,48"`
116
+
117
+ ## Setup
118
+
119
+ ```bash
120
+ export GEMINI_API_KEY="your-key"
121
+ pip install google-genai
122
+ ```
@@ -0,0 +1,101 @@
1
+ # Logo Color Psychology
2
+
3
+ ## Primary Color Meanings
4
+
5
+ ### Blue
6
+ - **Psychology:** Trust, stability, professionalism, calm
7
+ - **Industries:** Finance, healthcare, tech, corporate
8
+ - **Hex Examples:** Navy #003366, Royal #0055A4, Sky #0EA5E9
9
+ - **Pairings:** White, gold, light gray
10
+
11
+ ### Red
12
+ - **Psychology:** Energy, passion, urgency, excitement
13
+ - **Industries:** Food, sports, entertainment, sales
14
+ - **Hex Examples:** Crimson #DC2626, Scarlet #EF4444, Burgundy #9F1239
15
+ - **Pairings:** White, black, gold
16
+ - **Caution:** Avoid for healthcare (blood connotation)
17
+
18
+ ### Green
19
+ - **Psychology:** Growth, nature, health, sustainability
20
+ - **Industries:** Eco, wellness, organic, finance (growth)
21
+ - **Hex Examples:** Forest #228B22, Sage #2E8B57, Mint #10B981
22
+ - **Pairings:** White, brown, blue
23
+
24
+ ### Yellow/Gold
25
+ - **Psychology:** Optimism, warmth, luxury, attention
26
+ - **Industries:** Food, children, luxury (gold), energy
27
+ - **Hex Examples:** Gold #D4AF37, Amber #F59E0B, Lemon #FACC15
28
+ - **Pairings:** Black, navy, dark brown
29
+
30
+ ### Purple
31
+ - **Psychology:** Creativity, wisdom, luxury, mystery
32
+ - **Industries:** Beauty, creative, spiritual, premium
33
+ - **Hex Examples:** Royal #7C3AED, Lavender #A78BFA, Deep #581C87
34
+ - **Pairings:** Gold, white, pink
35
+
36
+ ### Orange
37
+ - **Psychology:** Friendly, energetic, confident, youthful
38
+ - **Industries:** Food, sports, entertainment, retail
39
+ - **Hex Examples:** Tangerine #F97316, Coral #FB923C, Burnt #EA580C
40
+ - **Pairings:** White, navy, dark gray
41
+
42
+ ### Black
43
+ - **Psychology:** Sophistication, power, elegance, authority
44
+ - **Industries:** Luxury, fashion, tech, premium
45
+ - **Pairings:** White, gold, silver
46
+ - **Note:** Use for high-end positioning
47
+
48
+ ### White
49
+ - **Psychology:** Purity, simplicity, cleanliness, modern
50
+ - **Use:** Backgrounds, negative space, contrast
51
+ - **Pairings:** Any color (universal neutral)
52
+
53
+ ## Color Combinations by Industry
54
+
55
+ | Industry | Primary | Secondary | Accent | Avoid |
56
+ |----------|---------|-----------|--------|-------|
57
+ | Tech | Blue, Purple | Gray, White | Teal, Green | Brown, Beige |
58
+ | Healthcare | Blue, Green | Teal, White | Light Purple | Red, Black |
59
+ | Finance | Navy, Blue | Gold, Gray | Green | Bright colors |
60
+ | Food | Red, Orange | Yellow, Brown | Green | Blue (appetite suppressant) |
61
+ | Fashion | Black, White | Gold, Blush | Navy | Neon (unless intentional) |
62
+ | Eco | Green, Brown | Beige, Blue | Yellow | Neon, Black |
63
+ | Children | Multi-color | Pastels | Bright accents | Dark, muted |
64
+
65
+ ## Color Harmony Types
66
+
67
+ ### Monochromatic
68
+ Single color with tints/shades. Safe, cohesive.
69
+
70
+ ### Complementary
71
+ Opposite colors (blue-orange). High contrast, vibrant.
72
+
73
+ ### Analogous
74
+ Adjacent colors (blue-teal-green). Harmonious, natural.
75
+
76
+ ### Triadic
77
+ Three evenly spaced colors. Balanced, dynamic.
78
+
79
+ ## Accessibility Considerations
80
+
81
+ - Minimum contrast ratio: 4.5:1 (WCAG AA)
82
+ - Avoid red-green only indicators
83
+ - Test in grayscale for clarity
84
+ - Consider colorblind users (~8% of males)
85
+
86
+ ## Quick Reference Palettes
87
+
88
+ **Tech Professional:**
89
+ Primary: #6366F1 | Secondary: #8B5CF6 | Accent: #06B6D4
90
+
91
+ **Eco Sustainable:**
92
+ Primary: #228B22 | Secondary: #2E8B57 | Accent: #DEB887
93
+
94
+ **Luxury Premium:**
95
+ Primary: #1C1917 | Secondary: #D4AF37 | Accent: #FFFFFF
96
+
97
+ **Healthcare Trust:**
98
+ Primary: #0077B6 | Secondary: #00A896 | Accent: #FFFFFF
99
+
100
+ **Food Warm:**
101
+ Primary: #DC2626 | Secondary: #F97316 | Accent: #CA8A04
@@ -0,0 +1,92 @@
1
+ # Logo Design Reference
2
+
3
+ AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. Uses Gemini Nano Banana models.
4
+
5
+ ## Scripts
6
+
7
+ | Script | Purpose |
8
+ |--------|---------|
9
+ | `scripts/logo/search.py` | Search styles, colors, industries; generate design briefs |
10
+ | `scripts/logo/generate.py` | Generate logos with Gemini Nano Banana |
11
+ | `scripts/logo/core.py` | BM25 search engine for logo data |
12
+
13
+ ## Commands
14
+
15
+ ### Design Brief (Start Here)
16
+
17
+ ```bash
18
+ python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
19
+ ```
20
+
21
+ ### Search Domains
22
+
23
+ ```bash
24
+ # Styles
25
+ python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
26
+
27
+ # Color palettes
28
+ python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
29
+
30
+ # Industry guidelines
31
+ python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
32
+ ```
33
+
34
+ ### Generate Logo
35
+
36
+ **ALWAYS** use white background for output logos.
37
+
38
+ ```bash
39
+ python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
40
+ python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
41
+ ```
42
+
43
+ Options: `--style`, `--industry`, `--prompt`
44
+
45
+ ## Available Styles
46
+
47
+ | Category | Styles |
48
+ |----------|--------|
49
+ | General | Minimalist, Wordmark, Lettermark, Pictorial Mark, Abstract Mark, Mascot, Emblem, Combination Mark |
50
+ | Aesthetic | Vintage/Retro, Art Deco, Luxury, Playful, Corporate, Organic, Neon, Grunge, Watercolor |
51
+ | Modern | Gradient, Flat Design, 3D/Isometric, Geometric, Line Art, Duotone, Motion-Ready |
52
+ | Clever | Negative Space, Monoline, Split/Fragmented, Responsive/Adaptive |
53
+
54
+ ## Color Psychology
55
+
56
+ | Color | Psychology | Best For |
57
+ |-------|------------|----------|
58
+ | Blue | Trust, stability | Finance, tech, healthcare |
59
+ | Green | Growth, natural | Eco, wellness, organic |
60
+ | Red | Energy, passion | Food, sports, entertainment |
61
+ | Gold | Luxury, premium | Fashion, jewelry, hotels |
62
+ | Purple | Creative, innovative | Beauty, creative, tech |
63
+
64
+ ## Industry Defaults
65
+
66
+ | Industry | Style | Colors | Typography |
67
+ |----------|-------|--------|------------|
68
+ | Tech | Minimalist, Abstract | Blues, purples, gradients | Geometric sans |
69
+ | Healthcare | Professional, Line Art | Blues, greens, teals | Clean sans |
70
+ | Finance | Corporate, Emblem | Navy, gold | Serif or clean sans |
71
+ | Food | Vintage Badge, Mascot | Warm reds, oranges | Friendly, script |
72
+ | Fashion | Wordmark, Luxury | Black, gold, white | Elegant serif |
73
+
74
+ ## Workflow
75
+
76
+ 1. Generate design brief → `scripts/logo/search.py --design-brief`
77
+ 2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
78
+ 3. Ask user about HTML preview → `AskUserQuestion` tool
79
+ 4. If yes, invoke `/ui-pro-forge` for HTML gallery
80
+
81
+ ## Detailed References
82
+
83
+ - `references/logo-style-guide.md` - Detailed style descriptions
84
+ - `references/logo-color-psychology.md` - Color meanings and combinations
85
+ - `references/logo-prompt-engineering.md` - AI generation prompts
86
+
87
+ ## Setup
88
+
89
+ ```bash
90
+ export GEMINI_API_KEY="your-key"
91
+ pip install google-genai
92
+ ```