@haposoft/cafekit 0.13.4 → 0.14.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 (119) hide show
  1. package/README.md +2 -23
  2. package/bin/lib/i18n.js +2 -2
  3. package/bin/lib/manifest.js +15 -0
  4. package/bin/lib/opencode-install.js +0 -14
  5. package/bin/phases/claude-runtime.js +4 -1
  6. package/bin/phases/claude-settings.js +38 -7
  7. package/bin/phases/root-config.js +5 -24
  8. package/package.json +1 -1
  9. package/src/claude/agents/ui-ux-designer.md +4 -4
  10. package/src/claude/gitignore +4 -11
  11. package/src/claude/hooks/__tests__/privacy-block.test.js +79 -0
  12. package/src/claude/hooks/__tests__/session-writeenv.test.js +68 -0
  13. package/src/claude/hooks/__tests__/spec-gate.test.js +270 -0
  14. package/src/claude/hooks/privacy-block.cjs +22 -2
  15. package/src/claude/hooks/session.cjs +5 -1
  16. package/src/claude/hooks/spec-gate.cjs +173 -0
  17. package/src/claude/hooks/spec-state.cjs +10 -17
  18. package/src/claude/hooks/task-scaffold-guard.cjs +4 -2
  19. package/src/claude/migration-manifest.json +5 -5
  20. package/src/claude/rules/skill-domain-routing.md +2 -3
  21. package/src/claude/rules/skill-workflow-routing.md +2 -11
  22. package/src/claude/rules/state-sync.md +4 -0
  23. package/src/claude/runtime.json +4 -0
  24. package/src/claude/scripts/validate-docs.cjs +4 -7
  25. package/src/claude/scripts/validate-spec-output.cjs +29 -9
  26. package/src/claude/settings/settings.json +4 -0
  27. package/src/claude/skills/ai-multimodal/.env.example +11 -13
  28. package/src/claude/skills/ai-multimodal/SKILL.md +1 -1
  29. package/src/claude/skills/ai-multimodal/references/audio-processing.md +25 -27
  30. package/src/claude/skills/ai-multimodal/references/video-analysis.md +23 -27
  31. package/src/claude/skills/ai-multimodal/references/vision-understanding.md +26 -26
  32. package/src/claude/skills/ai-multimodal/scripts/check_setup.py +1 -1
  33. package/src/claude/skills/ai-multimodal/scripts/gemini_batch_process.py +7 -9
  34. package/src/claude/skills/brainstorm/SKILL.md +1 -2
  35. package/src/claude/skills/docx/SKILL.md +1 -1
  36. package/src/claude/skills/frontend-design/SKILL.md +1 -1
  37. package/src/claude/skills/frontend-design/references/ai-multimodal-overview.md +4 -4
  38. package/src/claude/skills/frontend-design/references/analysis-techniques.md +3 -3
  39. package/src/claude/skills/frontend-design/references/asset-generation.md +2 -2
  40. package/src/claude/skills/frontend-design/references/design-extraction-overview.md +4 -4
  41. package/src/claude/skills/frontend-design/references/extraction-best-practices.md +3 -3
  42. package/src/claude/skills/frontend-design/references/technical-accessibility.md +1 -1
  43. package/src/claude/skills/frontend-design/references/technical-optimization.md +1 -1
  44. package/src/claude/skills/frontend-design/references/technical-overview.md +2 -2
  45. package/src/claude/skills/frontend-design/references/technical-workflows.md +6 -6
  46. package/src/claude/skills/frontend-design/references/visual-analysis-overview.md +3 -3
  47. package/src/claude/skills/inspect/SKILL.md +3 -3
  48. package/src/claude/skills/inspect/references/external-gemini-inspection.md +9 -9
  49. package/src/claude/skills/pdf/SKILL.md +1 -1
  50. package/src/claude/skills/pptx/SKILL.md +1 -1
  51. package/src/claude/skills/specs/SKILL.md +1 -1
  52. package/src/claude/skills/xlsx/SKILL.md +1 -1
  53. package/src/opencode/AGENTS.md +1 -2
  54. package/src/opencode/plugins/session.ts +2 -2
  55. package/src/opencode/plugins/spec-state.ts +244 -0
  56. package/src/opencode/plugins/task-scaffold-guard.ts +161 -0
  57. package/src/claude/scripts/browser-tool.cjs +0 -138
  58. package/src/claude/skills/delegate/SKILL.md +0 -124
  59. package/src/claude/skills/delegate/references/codex-delegation.md +0 -71
  60. package/src/claude/skills/delegate/references/grok-delegation.md +0 -84
  61. package/src/claude/skills/generate-graph/LICENSE +0 -21
  62. package/src/claude/skills/generate-graph/README.md +0 -523
  63. package/src/claude/skills/generate-graph/SKILL.md +0 -429
  64. package/src/claude/skills/generate-graph/agentloop-core.svg +0 -101
  65. package/src/claude/skills/generate-graph/agents/openai.yaml +0 -4
  66. package/src/claude/skills/generate-graph/assets/samples/sample-style1-flat.png +0 -0
  67. package/src/claude/skills/generate-graph/assets/samples/sample-style2-dark.png +0 -0
  68. package/src/claude/skills/generate-graph/assets/samples/sample-style3-blueprint.png +0 -0
  69. package/src/claude/skills/generate-graph/assets/samples/sample-style4-notion.png +0 -0
  70. package/src/claude/skills/generate-graph/assets/samples/sample-style5-glass.png +0 -0
  71. package/src/claude/skills/generate-graph/assets/samples/sample-style6-claude.png +0 -0
  72. package/src/claude/skills/generate-graph/assets/samples/sample-style7-openai.png +0 -0
  73. package/src/claude/skills/generate-graph/fixtures/agent-memory-types-style4.json +0 -181
  74. package/src/claude/skills/generate-graph/fixtures/api-flow-style7.json +0 -40
  75. package/src/claude/skills/generate-graph/fixtures/mem0-style1.json +0 -297
  76. package/src/claude/skills/generate-graph/fixtures/microservices-style3.json +0 -64
  77. package/src/claude/skills/generate-graph/fixtures/multi-agent-style5.json +0 -45
  78. package/src/claude/skills/generate-graph/fixtures/system-architecture-style6.json +0 -48
  79. package/src/claude/skills/generate-graph/fixtures/tool-call-style2.json +0 -182
  80. package/src/claude/skills/generate-graph/package.json +0 -42
  81. package/src/claude/skills/generate-graph/references/icons.md +0 -281
  82. package/src/claude/skills/generate-graph/references/style-1-flat-icon.md +0 -108
  83. package/src/claude/skills/generate-graph/references/style-2-dark-terminal.md +0 -107
  84. package/src/claude/skills/generate-graph/references/style-3-blueprint.md +0 -113
  85. package/src/claude/skills/generate-graph/references/style-4-notion-clean.md +0 -94
  86. package/src/claude/skills/generate-graph/references/style-5-glassmorphism.md +0 -125
  87. package/src/claude/skills/generate-graph/references/style-6-claude-official.md +0 -209
  88. package/src/claude/skills/generate-graph/references/style-7-openai.md +0 -215
  89. package/src/claude/skills/generate-graph/references/style-diagram-matrix.md +0 -135
  90. package/src/claude/skills/generate-graph/references/svg-layout-best-practices.md +0 -100
  91. package/src/claude/skills/generate-graph/scripts/generate-diagram.sh +0 -157
  92. package/src/claude/skills/generate-graph/scripts/generate-from-template.py +0 -1556
  93. package/src/claude/skills/generate-graph/scripts/test-all-styles.sh +0 -135
  94. package/src/claude/skills/generate-graph/scripts/validate-svg.sh +0 -292
  95. package/src/claude/skills/generate-graph/templates/agent-architecture.svg +0 -28
  96. package/src/claude/skills/generate-graph/templates/architecture.svg +0 -23
  97. package/src/claude/skills/generate-graph/templates/comparison-matrix.svg +0 -14
  98. package/src/claude/skills/generate-graph/templates/data-flow.svg +0 -28
  99. package/src/claude/skills/generate-graph/templates/er-diagram.svg +0 -21
  100. package/src/claude/skills/generate-graph/templates/flowchart.svg +0 -21
  101. package/src/claude/skills/generate-graph/templates/sequence.svg +0 -20
  102. package/src/claude/skills/generate-graph/templates/state-machine.svg +0 -20
  103. package/src/claude/skills/generate-graph/templates/timeline.svg +0 -19
  104. package/src/claude/skills/generate-graph/templates/use-case.svg +0 -21
  105. package/src/claude/skills/impact-analysis/SKILL.md +0 -276
  106. package/src/claude/skills/impact-analysis/references/change-detection.md +0 -270
  107. package/src/claude/skills/impact-analysis/references/dependency-scouting.md +0 -338
  108. package/src/claude/skills/impact-analysis/references/edge-case-identification.md +0 -439
  109. package/src/claude/skills/impact-analysis/references/industry-techniques.md +0 -695
  110. package/src/claude/skills/impact-analysis/references/practical-techniques-guide.md +0 -753
  111. package/src/claude/skills/impact-analysis/references/project-detection.md +0 -704
  112. package/src/claude/skills/impact-analysis/references/react-native-customization.md +0 -508
  113. package/src/claude/skills/impact-analysis/references/report-template.md +0 -604
  114. package/src/claude/skills/impact-analysis/references/test-scenario-generation.md +0 -459
  115. package/src/claude/skills/impact-analysis/scripts/README.md +0 -476
  116. package/src/claude/skills/impact-analysis/scripts/ast-analyze.js +0 -403
  117. package/src/claude/skills/impact-analysis/scripts/calculate-risk.js +0 -475
  118. package/src/claude/skills/impact-analysis/scripts/find-dependencies.sh +0 -202
  119. package/src/claude/skills/impact-analysis/scripts/run-analysis.sh +0 -312
@@ -25,9 +25,9 @@ Comprehensive guide for image analysis, object detection, and visual understandi
25
25
  ## Model Selection
26
26
 
27
27
  ### Gemini 2.5 Series
28
- - **gemini-2.5-pro**: Best quality, segmentation + detection
29
- - **gemini-2.5-flash**: Fast, efficient, all features
30
- - **gemini-2.5-flash-lite**: Lightweight, all features
28
+ - **gemma-4-31b-it**: Best quality, segmentation + detection
29
+ - **gemma-4-31b-it**: Fast, efficient, all features
30
+ - **gemma-4-31b-it-lite**: Lightweight, all features
31
31
 
32
32
  ### Feature Requirements
33
33
  - **Segmentation**: Requires 2.5+ models
@@ -49,7 +49,7 @@ with open('image.jpg', 'rb') as f:
49
49
  img_bytes = f.read()
50
50
 
51
51
  response = client.models.generate_content(
52
- model='gemini-2.5-flash',
52
+ model='gemma-4-31b-it',
53
53
  contents=[
54
54
  'Describe this image in detail',
55
55
  genai.types.Part.from_bytes(data=img_bytes, mime_type='image/jpeg')
@@ -62,7 +62,7 @@ print(response.text)
62
62
 
63
63
  ```python
64
64
  response = client.models.generate_content(
65
- model='gemini-2.5-flash',
65
+ model='gemma-4-31b-it',
66
66
  contents=[
67
67
  'Classify this image. Provide category and confidence level.',
68
68
  img_part
@@ -74,7 +74,7 @@ response = client.models.generate_content(
74
74
 
75
75
  ```python
76
76
  response = client.models.generate_content(
77
- model='gemini-2.5-flash',
77
+ model='gemma-4-31b-it',
78
78
  contents=[
79
79
  'How many people are in this image and what are they doing?',
80
80
  img_part
@@ -88,7 +88,7 @@ response = client.models.generate_content(
88
88
 
89
89
  ```python
90
90
  response = client.models.generate_content(
91
- model='gemini-2.5-flash',
91
+ model='gemma-4-31b-it',
92
92
  contents=[
93
93
  'Detect all objects in this image and provide bounding boxes',
94
94
  img_part
@@ -103,7 +103,7 @@ response = client.models.generate_content(
103
103
 
104
104
  ```python
105
105
  response = client.models.generate_content(
106
- model='gemini-2.5-flash',
106
+ model='gemma-4-31b-it',
107
107
  contents=[
108
108
  'Create a segmentation mask for all people in this image',
109
109
  img_part
@@ -122,7 +122,7 @@ img1 = PIL.Image.open('photo1.jpg')
122
122
  img2 = PIL.Image.open('photo2.jpg')
123
123
 
124
124
  response = client.models.generate_content(
125
- model='gemini-2.5-flash',
125
+ model='gemma-4-31b-it',
126
126
  contents=[
127
127
  'Compare these two images. What are the differences?',
128
128
  img1,
@@ -135,7 +135,7 @@ response = client.models.generate_content(
135
135
 
136
136
  ```python
137
137
  response = client.models.generate_content(
138
- model='gemini-2.5-flash',
138
+ model='gemma-4-31b-it',
139
139
  contents=[
140
140
  'Extract all visible text from this image',
141
141
  img_part
@@ -155,7 +155,7 @@ with open('image.jpg', 'rb') as f:
155
155
  img_bytes = f.read()
156
156
 
157
157
  response = client.models.generate_content(
158
- model='gemini-2.5-flash',
158
+ model='gemma-4-31b-it',
159
159
  contents=[
160
160
  'Analyze this image',
161
161
  types.Part.from_bytes(data=img_bytes, mime_type='image/jpeg')
@@ -171,7 +171,7 @@ import PIL.Image
171
171
  img = PIL.Image.open('photo.jpg')
172
172
 
173
173
  response = client.models.generate_content(
174
- model='gemini-2.5-flash',
174
+ model='gemma-4-31b-it',
175
175
  contents=['What is in this image?', img]
176
176
  )
177
177
  ```
@@ -184,12 +184,12 @@ myfile = client.files.upload(file='large-image.jpg')
184
184
 
185
185
  # Use multiple times
186
186
  response1 = client.models.generate_content(
187
- model='gemini-2.5-flash',
187
+ model='gemma-4-31b-it',
188
188
  contents=['Describe this image', myfile]
189
189
  )
190
190
 
191
191
  response2 = client.models.generate_content(
192
- model='gemini-2.5-flash',
192
+ model='gemma-4-31b-it',
193
193
  contents=['What colors dominate this image?', myfile]
194
194
  )
195
195
  ```
@@ -198,7 +198,7 @@ response2 = client.models.generate_content(
198
198
 
199
199
  ```python
200
200
  response = client.models.generate_content(
201
- model='gemini-2.5-flash',
201
+ model='gemma-4-31b-it',
202
202
  contents=[
203
203
  'Analyze this image',
204
204
  types.Part.from_uri(
@@ -250,7 +250,7 @@ class ImageAnalysis(BaseModel):
250
250
  scene_type: str
251
251
 
252
252
  response = client.models.generate_content(
253
- model='gemini-2.5-flash',
253
+ model='gemma-4-31b-it',
254
254
  contents=['Analyze this image', img_part],
255
255
  config=genai.types.GenerateContentConfig(
256
256
  response_mime_type='application/json',
@@ -272,7 +272,7 @@ images = [
272
272
  ]
273
273
 
274
274
  response = client.models.generate_content(
275
- model='gemini-2.5-flash',
275
+ model='gemma-4-31b-it',
276
276
  contents=['Analyze these images and find common themes'] + images
277
277
  )
278
278
  ```
@@ -284,7 +284,7 @@ before = PIL.Image.open('before.jpg')
284
284
  after = PIL.Image.open('after.jpg')
285
285
 
286
286
  response = client.models.generate_content(
287
- model='gemini-2.5-flash',
287
+ model='gemma-4-31b-it',
288
288
  contents=[
289
289
  'Compare before and after. List all visible changes.',
290
290
  before,
@@ -300,7 +300,7 @@ reference = PIL.Image.open('target.jpg')
300
300
  candidates = [PIL.Image.open(f'option{i}.jpg') for i in range(5)]
301
301
 
302
302
  response = client.models.generate_content(
303
- model='gemini-2.5-flash',
303
+ model='gemma-4-31b-it',
304
304
  contents=[
305
305
  'Find which candidate images contain objects similar to the reference',
306
306
  reference
@@ -333,7 +333,7 @@ response = client.models.generate_content(
333
333
  **Few-shot examples**:
334
334
  ```python
335
335
  response = client.models.generate_content(
336
- model='gemini-2.5-flash',
336
+ model='gemma-4-31b-it',
337
337
  contents=[
338
338
  'Example: For an image of a cat on a sofa, respond: "Object: cat, Location: sofa"',
339
339
  'Now analyze this image:',
@@ -371,7 +371,7 @@ response = client.models.generate_content(
371
371
 
372
372
  ```python
373
373
  response = client.models.generate_content(
374
- model='gemini-2.5-flash',
374
+ model='gemma-4-31b-it',
375
375
  contents=[
376
376
  '''Analyze this product image:
377
377
  1. Identify the product
@@ -388,7 +388,7 @@ response = client.models.generate_content(
388
388
 
389
389
  ```python
390
390
  response = client.models.generate_content(
391
- model='gemini-2.5-flash',
391
+ model='gemma-4-31b-it',
392
392
  contents=[
393
393
  'Extract all text and UI elements from this screenshot',
394
394
  img_part
@@ -400,7 +400,7 @@ response = client.models.generate_content(
400
400
 
401
401
  ```python
402
402
  response = client.models.generate_content(
403
- model='gemini-2.5-pro',
403
+ model='gemma-4-31b-it',
404
404
  contents=[
405
405
  'Describe visible features in this medical image. Note: This is for informational purposes only.',
406
406
  img_part
@@ -412,7 +412,7 @@ response = client.models.generate_content(
412
412
 
413
413
  ```python
414
414
  response = client.models.generate_content(
415
- model='gemini-2.5-flash',
415
+ model='gemma-4-31b-it',
416
416
  contents=[
417
417
  'Extract data from this chart and format as JSON',
418
418
  img_part
@@ -424,7 +424,7 @@ response = client.models.generate_content(
424
424
 
425
425
  ```python
426
426
  response = client.models.generate_content(
427
- model='gemini-2.5-flash',
427
+ model='gemma-4-31b-it',
428
428
  contents=[
429
429
  '''Analyze this scene:
430
430
  1. Location type
@@ -451,7 +451,7 @@ def analyze_image_with_retry(image_path, prompt, max_retries=3):
451
451
  img_bytes = f.read()
452
452
 
453
453
  response = client.models.generate_content(
454
- model='gemini-2.5-flash',
454
+ model='gemma-4-31b-it',
455
455
  contents=[
456
456
  prompt,
457
457
  genai.types.Part.from_bytes(
@@ -302,7 +302,7 @@ def main():
302
302
  print("\nImage generation models:")
303
303
  print(" • gemma-4-31b-it-image - Nano Banana Flash (DEFAULT - fast)")
304
304
  print(" • imagen-4.0-generate-001 - Imagen 4 (alternative - production)")
305
- print(" • gemini-3-pro-image-preview - Nano Banana Pro (4K text, reasoning)")
305
+ print(" • gemma-4-31b-it-image-preview - Nano Banana Pro (4K text, reasoning)")
306
306
  print("\nExample (uses default model):")
307
307
  print(" python scripts/gemini_batch_process.py --task generate \\")
308
308
  print(" --prompt 'A sunset over mountains' --aspect-ratio 16:9 --size 2K")
@@ -8,8 +8,8 @@ Supports all Gemini modalities:
8
8
  - Video: Summarization, Q&A, scene detection
9
9
  - Document: PDF extraction, structured output
10
10
  - Generation: Image creation via Imagen 4 or Nano Banana (Gemini native)
11
- - Nano Banana 2 (gemini-3.1-flash-image-preview): Fastest, 95% Pro quality (default)
12
- - Nano Banana Pro (gemini-3-pro-image-preview): Quality/4K text/reasoning
11
+ - Nano Banana 2 (gemma-4-31b-it-image): Fastest, 95% Pro quality (default)
12
+ - Nano Banana Pro (gemma-4-31b-it-image-preview): Quality/4K text/reasoning
13
13
  - Imagen 4 (imagen-4.0-*): Production-grade generation
14
14
  """
15
15
 
@@ -60,10 +60,10 @@ except ImportError:
60
60
 
61
61
 
62
62
  # Image generation model configuration
63
- # Default: gemini-3.1-flash-image-preview (Nano Banana 2 - 3-5x faster, 95% Pro quality)
63
+ # Default: gemma-4-31b-it-image (Nano Banana 2 - 3-5x faster, 95% Pro quality)
64
64
  # Alternative: imagen-4.0-generate-001 (production quality)
65
65
  # All image generation requires billing - no completely free option exists
66
- IMAGE_MODEL_DEFAULT = 'gemini-3.1-flash-image-preview' # Nano Banana 2 (fastest, near-Pro quality)
66
+ IMAGE_MODEL_DEFAULT = 'gemma-4-31b-it-image' # Nano Banana 2 (fastest, near-Pro quality)
67
67
  IMAGE_MODEL_FALLBACK = 'gemma-4-31b-it-image' # Fallback if Nano Banana 2 fails
68
68
  IMAGEN_MODELS = {
69
69
  'imagen-4.0-generate-001',
@@ -138,7 +138,7 @@ def get_default_model(task: str) -> str:
138
138
  return model
139
139
  # Default to Nano Banana 2 (fastest, near-Pro quality)
140
140
  # Alternative: imagen-4.0-generate-001 for production quality
141
- return 'gemini-3.1-flash-image-preview'
141
+ return 'gemma-4-31b-it-image'
142
142
 
143
143
  elif task == 'generate-video':
144
144
  model = os.getenv('VIDEO_GEN_MODEL')
@@ -180,8 +180,6 @@ def validate_model_task_combination(model: str, task: str) -> None:
180
180
  'imagen-4.0-generate-001',
181
181
  'imagen-4.0-ultra-generate-001',
182
182
  'imagen-4.0-fast-generate-001',
183
- 'gemini-3.1-flash-image-preview',
184
- 'gemini-3-pro-image-preview',
185
183
  'gemma-4-31b-it-image',
186
184
  'gemma-4-31b-it-image-preview',
187
185
  ]
@@ -1093,7 +1091,7 @@ Examples:
1093
1091
 
1094
1092
  # Generate images with Nano Banana Pro (4K text, reasoning)
1095
1093
  %(prog)s --task generate --prompt "Travel poster with text 'EXPLORE'" \\
1096
- --model gemini-3-pro-image-preview --aspect-ratio 3:4 --size 4K
1094
+ --model gemma-4-31b-it-image-preview --aspect-ratio 3:4 --size 4K
1097
1095
 
1098
1096
  # Generate images with Imagen 4 (production quality)
1099
1097
  %(prog)s --task generate --prompt "Product photo of coffee mug" \\
@@ -1119,7 +1117,7 @@ Examples:
1119
1117
  help='Aspect ratio for image/video generation')
1120
1118
  parser.add_argument('--num-images', type=int, default=1,
1121
1119
  help='Number of images to generate (1-4, default: 1)')
1122
- # 4K available for Nano Banana Pro (gemini-3-pro-image-preview)
1120
+ # 4K available for Nano Banana Pro (gemma-4-31b-it-image-preview)
1123
1121
  # Note: Not all models support --size, only use when needed
1124
1122
  parser.add_argument('--size', choices=['1K', '2K', '4K'], default=None,
1125
1123
  help='Image size - 1K/2K for Imagen 4, 1K/2K/4K for Nano Banana (optional)')
@@ -68,7 +68,6 @@ Leverage these specific tools or sub-agents to execute the workflow effectively:
68
68
  - `AskUserQuestion`: Use this to enforce the "One Question at a Time" rule and to present multiple choices.
69
69
  - `hapo:inspect`: Mandatory first pass for repo-aware brainstorming.
70
70
  - `hapo:ai-multimodal`: Use this when analyzing visual materials and mockups.
71
- - `hapo:generate-graph`: Use when a diagram would make architecture, flows, or trade-offs easier to validate.
72
71
  - `repomix --remote`: Use this bash command to summarize external Github repositories if a URL is provided.
73
72
  - `psql`: Query database schemas to understand existing data structures.
74
73
  - `brainstormer`: Call only for medium/high-complexity architecture trade-offs.
@@ -155,7 +154,7 @@ Always name the simplest viable option and explain the trade-off that makes it p
155
154
 
156
155
  If the topic involves UI layouts, interactive elements, visual styling, architecture diagrams, or spatial flows:
157
156
  - Use `hapo:ai-multimodal` for supplied images, videos, PDFs, or mockups.
158
- - Use `hapo:generate-graph` when a diagram would make trade-offs clearer.
157
+ - Use a Mermaid diagram in the design doc when it would make trade-offs clearer.
159
158
  - Do not force text-only guesswork for visual choices.
160
159
  - Visual aids support the brainstorm; they do not bypass user approval.
161
160
 
@@ -7,7 +7,7 @@ when_to_use: "Invoke to read, create, or edit Word .docx documents."
7
7
  category: document-skills
8
8
  keywords: [docx, word, document, office]
9
9
  metadata:
10
- author: haposoft
10
+ author: "Anthropic, PBC — adapted by Haposoft"
11
11
  version: "1.0.0"
12
12
  ---
13
13
  # DOCX creation, editing, and analysis
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  name: hapo:frontend-design
3
3
  description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
4
- license: Complete terms in LICENSE.txt
4
+ license: MIT
5
5
  user-invocable: true
6
6
  when_to_use: "Invoke to translate mockups or screenshots into UI implementation."
7
7
  category: frontend
@@ -79,7 +79,7 @@ Extract design systems systematically from high-quality references:
79
79
  4. Extract color palettes with hex codes
80
80
  5. Test integration with UI elements
81
81
 
82
- **Model**: gemini-2.5-flash (vision understanding)
82
+ **Model**: gemma-4-31b-it (vision understanding)
83
83
 
84
84
  ### For Design Extraction
85
85
  **See**: `design-extraction.md`
@@ -90,7 +90,7 @@ Extract design systems systematically from high-quality references:
90
90
  4. Extract motion guidelines from videos (if applicable)
91
91
  5. Document actionably with CSS-ready specifications
92
92
 
93
- **Model**: gemini-2.5-flash (vision understanding)
93
+ **Model**: gemma-4-31b-it (vision understanding)
94
94
 
95
95
  ## Integration with Other Skills
96
96
 
@@ -139,7 +139,7 @@ python scripts/gemini_batch_process.py \
139
139
  --task analyze \
140
140
  --prompt "[evaluation criteria]" \
141
141
  --output docs/assets/analysis.md \
142
- --model gemini-2.5-flash
142
+ --model gemma-4-31b-it
143
143
  ```
144
144
 
145
145
  **Extract design guidelines**:
@@ -149,7 +149,7 @@ python scripts/gemini_batch_process.py \
149
149
  --task analyze \
150
150
  --prompt "[extraction criteria from design-extraction.md]" \
151
151
  --output docs/design-guidelines/extracted.md \
152
- --model gemini-2.5-flash
152
+ --model gemma-4-31b-it
153
153
  ```
154
154
 
155
155
  ## Remember
@@ -23,7 +23,7 @@ python scripts/gemini_batch_process.py \
23
23
  --task analyze \
24
24
  --prompt "Rank these variations 1-3 with scores. Identify winner." \
25
25
  --output docs/assets/batch-analysis.md \
26
- --model gemini-2.5-flash
26
+ --model gemma-4-31b-it
27
27
  ```
28
28
 
29
29
  ## Contextual Testing
@@ -46,7 +46,7 @@ python scripts/gemini_batch_process.py \
46
46
  4. Overall visual hierarchy effectiveness
47
47
  Provide WCAG contrast ratio estimates." \
48
48
  --output docs/assets/ui-integration-test.md \
49
- --model gemini-2.5-flash
49
+ --model gemma-4-31b-it
50
50
  ```
51
51
 
52
52
  ## A/B Testing Analysis
@@ -71,7 +71,7 @@ Compare for:
71
71
 
72
72
  Recommend which to A/B test in production and why." \
73
73
  --output docs/assets/ab-test-analysis.md \
74
- --model gemini-2.5-flash
74
+ --model gemma-4-31b-it
75
75
  ```
76
76
 
77
77
  ## Iteration Strategy
@@ -95,7 +95,7 @@ python scripts/gemini_batch_process.py \
95
95
  5. Professional quality (rate 1-10)
96
96
  6. Specific weaknesses or improvements needed" \
97
97
  --output docs/assets/hero-evaluation.md \
98
- --model gemini-2.5-flash
98
+ --model gemma-4-31b-it
99
99
  ```
100
100
 
101
101
  ### Step 5: Iterate or Integrate
@@ -311,7 +311,7 @@ python scripts/gemini_batch_process.py \
311
311
  --task analyze \
312
312
  --prompt "Rate 1-10 for aesthetic quality, color harmony, text overlay suitability" \
313
313
  --output docs/assets/analysis-1.md \
314
- --model gemini-2.5-flash
314
+ --model gemma-4-31b-it
315
315
 
316
316
  # 3. If score ≥ 7/10, generate production version
317
317
  python scripts/gemini_batch_process.py \
@@ -27,7 +27,7 @@ python scripts/gemini_batch_process.py \
27
27
  --task analyze \
28
28
  --prompt "[see extraction-prompts.md for detailed prompt]" \
29
29
  --output docs/design-guidelines/extracted-design-system.md \
30
- --model gemini-2.5-flash
30
+ --model gemma-4-31b-it
31
31
  ```
32
32
 
33
33
  ### Multi-Screen System Extraction
@@ -37,7 +37,7 @@ python scripts/gemini_batch_process.py \
37
37
  --task analyze \
38
38
  --prompt "[see extraction-prompts.md for multi-screen prompt]" \
39
39
  --output docs/design-guidelines/complete-design-system.md \
40
- --model gemini-2.5-flash
40
+ --model gemma-4-31b-it
41
41
  ```
42
42
 
43
43
  ### Video Motion Analysis
@@ -47,7 +47,7 @@ python scripts/gemini_batch_process.py \
47
47
  --task analyze \
48
48
  --prompt "[see extraction-prompts.md for motion prompt]" \
49
49
  --output docs/design-guidelines/motion-system.md \
50
- --model gemini-2.5-flash
50
+ --model gemma-4-31b-it
51
51
  ```
52
52
 
53
53
  ### Competitive Analysis
@@ -57,7 +57,7 @@ python scripts/gemini_batch_process.py \
57
57
  --task analyze \
58
58
  --prompt "[see extraction-prompts.md for competitive prompt]" \
59
59
  --output docs/design-guidelines/competitive-analysis.md \
60
- --model gemini-2.5-flash
60
+ --model gemma-4-31b-it
61
61
  ```
62
62
 
63
63
  ## Detailed References
@@ -85,7 +85,7 @@ python scripts/gemini_batch_process.py \
85
85
  - All animation timings
86
86
  Output as CSS variables ready for implementation." \
87
87
  --output docs/design-guidelines/brand-design-system.md \
88
- --model gemini-2.5-flash
88
+ --model gemma-4-31b-it
89
89
  ```
90
90
 
91
91
  ### Trend Analysis
@@ -103,7 +103,7 @@ python scripts/gemini_batch_process.py \
103
103
  5. Animation patterns
104
104
  Identify what's trending in 2024 web design." \
105
105
  --output docs/design-guidelines/trend-analysis.md \
106
- --model gemini-2.5-flash
106
+ --model gemma-4-31b-it
107
107
  ```
108
108
 
109
109
  ### Historical Evolution
@@ -119,7 +119,7 @@ python scripts/gemini_batch_process.py \
119
119
  3. How trends influenced changes
120
120
  4. Lessons for our design evolution" \
121
121
  --output docs/design-guidelines/evolution-analysis.md \
122
- --model gemini-2.5-flash
122
+ --model gemma-4-31b-it
123
123
  ```
124
124
 
125
125
  ## Common Pitfalls
@@ -71,7 +71,7 @@ python scripts/gemini_batch_process.py \
71
71
 
72
72
  Provide specific recommendations for adjustments." \
73
73
  --output docs/assets/integration-analysis.md \
74
- --model gemini-2.5-flash
74
+ --model gemma-4-31b-it
75
75
  ```
76
76
 
77
77
  ## Next.js Integration Example
@@ -24,7 +24,7 @@ Use ultra model (1 generation):
24
24
 
25
25
  ## Analysis Model Strategy
26
26
 
27
- - Use gemini-2.5-flash for all analysis (vision understanding)
27
+ - Use gemma-4-31b-it for all analysis (vision understanding)
28
28
  - **Cost**: ~$0.001 per analysis
29
29
  - **Speed**: ~2-5 seconds per analysis
30
30
  - **Token-efficient**: Images count as ~258-1548 tokens
@@ -52,7 +52,7 @@ python scripts/gemini_batch_process.py --files docs/assets/[image].png \
52
52
  --task analyze \
53
53
  --prompt "[evaluation criteria]" \
54
54
  --output docs/assets/analysis.md \
55
- --model gemini-2.5-flash
55
+ --model gemma-4-31b-it
56
56
 
57
57
  # Optimize
58
58
  python scripts/media_optimizer.py \
@@ -65,7 +65,7 @@ python scripts/gemini_batch_process.py --files docs/assets/[image].png \
65
65
  --task analyze \
66
66
  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral." \
67
67
  --output docs/assets/color-palette.md \
68
- --model gemini-2.5-flash
68
+ --model gemma-4-31b-it
69
69
  ```
70
70
 
71
71
  ## Responsive Image Strategies
@@ -24,7 +24,7 @@ python scripts/gemini_batch_process.py \
24
24
  suitability for overlaying white text, professional quality.
25
25
  List any improvements needed." \
26
26
  --output docs/assets/hero-evaluation.md \
27
- --model gemini-2.5-flash
27
+ --model gemma-4-31b-it
28
28
 
29
29
  # 3. If score ≥ 7/10, optimize for web
30
30
  python scripts/media_optimizer.py \
@@ -59,7 +59,7 @@ python scripts/gemini_batch_process.py \
59
59
  --task analyze \
60
60
  --prompt "[use extraction prompt from extraction-prompts.md]" \
61
61
  --output docs/design-guidelines/competitor-analysis.md \
62
- --model gemini-2.5-flash
62
+ --model gemma-4-31b-it
63
63
 
64
64
  # 2. Generate asset based on extracted guidelines
65
65
  # (Review competitor-analysis.md for color palette, aesthetic)
@@ -77,7 +77,7 @@ python scripts/gemini_batch_process.py \
77
77
  --prompt "Compare to competitor design. Rate differentiation (1-10).
78
78
  Are we too similar or successfully distinct?" \
79
79
  --output docs/assets/differentiation-analysis.md \
80
- --model gemini-2.5-flash
80
+ --model gemma-4-31b-it
81
81
 
82
82
  # 4. Extract colors from our final asset for CSS
83
83
  python scripts/gemini_batch_process.py \
@@ -85,7 +85,7 @@ python scripts/gemini_batch_process.py \
85
85
  --task analyze \
86
86
  --prompt "[use color extraction prompt from visual-analysis-overview.md]" \
87
87
  --output docs/assets/color-palette.md \
88
- --model gemini-2.5-flash
88
+ --model gemma-4-31b-it
89
89
  ```
90
90
 
91
91
  ## Example 3: A/B Test Assets
@@ -116,7 +116,7 @@ python scripts/gemini_batch_process.py \
116
116
  3. Conversion potential
117
117
  Recommend which to test." \
118
118
  --output docs/assets/ab-comparison.md \
119
- --model gemini-2.5-flash
119
+ --model gemma-4-31b-it
120
120
 
121
121
  # Generate production version of winner
122
122
  python scripts/gemini_batch_process.py \
@@ -146,5 +146,5 @@ python scripts/gemini_batch_process.py \
146
146
  --task analyze \
147
147
  --prompt "Rank these variations 1-3 with scores. Identify winner." \
148
148
  --output docs/assets/batch-analysis.md \
149
- --model gemini-2.5-flash
149
+ --model gemma-4-31b-it
150
150
  ```
@@ -19,7 +19,7 @@ python scripts/gemini_batch_process.py \
19
19
  --task analyze \
20
20
  --prompt "[see analysis-prompts.md for detailed prompt]" \
21
21
  --output docs/assets/analysis-report.md \
22
- --model gemini-2.5-flash
22
+ --model gemma-4-31b-it
23
23
  ```
24
24
 
25
25
  ### Compare Multiple Variations
@@ -29,7 +29,7 @@ python scripts/gemini_batch_process.py \
29
29
  --task analyze \
30
30
  --prompt "[see analysis-prompts.md for comparison prompt]" \
31
31
  --output docs/assets/comparison-analysis.md \
32
- --model gemini-2.5-flash
32
+ --model gemma-4-31b-it
33
33
  ```
34
34
 
35
35
  ### Extract Color Palette
@@ -39,7 +39,7 @@ python scripts/gemini_batch_process.py \
39
39
  --task analyze \
40
40
  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral. Suggest CSS variable names." \
41
41
  --output docs/assets/color-palette.md \
42
- --model gemini-2.5-flash
42
+ --model gemma-4-31b-it
43
43
  ```
44
44
 
45
45
  ## Decision Framework
@@ -25,7 +25,7 @@ Fast, token-efficient codebase discovery using parallel agents to find files nee
25
25
  - Starting debugging session requiring file relationships understanding
26
26
  - User asks about project structure or where functionality lives
27
27
  - Before changes that might affect multiple codebase parts
28
- - Before review/debug/impact-analysis when affected files are unclear
28
+ - Before review/debug/impact analysis when affected files are unclear
29
29
 
30
30
  ## Preflight Scope Gate (MANDATORY - All Modes)
31
31
 
@@ -122,12 +122,12 @@ Read from `.claude/runtime.json`:
122
122
  ```json
123
123
  {
124
124
  "gemini": {
125
- "model": "gemini-3-flash-preview"
125
+ "model": "gemma-4-31b-it"
126
126
  }
127
127
  }
128
128
  ```
129
129
 
130
- Default model: `gemini-3-flash-preview`
130
+ Default model: `gemma-4-31b-it`
131
131
 
132
132
  **Note:** This file is automatically installed when you run `npx @haposoft/cafekit`.
133
133
 
@@ -15,12 +15,12 @@ Read from `.claude/runtime.json`:
15
15
  ```json
16
16
  {
17
17
  "gemini": {
18
- "model": "gemini-3-flash-preview"
18
+ "model": "gemma-4-31b-it"
19
19
  }
20
20
  }
21
21
  ```
22
22
 
23
- Default model: `gemini-3-flash-preview`
23
+ Default model: `gemma-4-31b-it`
24
24
 
25
25
  **Note:** This file is automatically installed when you run `npx @haposoft/cafekit`.
26
26
 
@@ -48,7 +48,7 @@ gemini -y -m <model> "[prompt]"
48
48
 
49
49
  ### Example
50
50
  ```bash
51
- gemini -y -m gemini-3-flash-preview "Search src/ for authentication files. List paths with brief descriptions."
51
+ gemini -y -m gemma-4-31b-it "Search src/ for authentication files. List paths with brief descriptions."
52
52
  ```
53
53
 
54
54
  ## Installation Check
@@ -67,9 +67,9 @@ If not installed, ask user:
67
67
  Use the `Bash` tool for each scoped Gemini command. Run them in the same tool turn when the runtime supports parallel tool calls; otherwise run them sequentially. Do not use `Agent` with `subagent_type: "Bash"` — `Bash` is a tool, not a subagent.
68
68
 
69
69
  ```
70
- Bash: gemini -y -m gemini-3-flash-preview '[prompt1]'
71
- Bash: gemini -y -m gemini-3-flash-preview '[prompt2]'
72
- Bash: gemini -y -m gemini-3-flash-preview '[prompt3]'
70
+ Bash: gemini -y -m gemma-4-31b-it '[prompt1]'
71
+ Bash: gemini -y -m gemma-4-31b-it '[prompt2]'
72
+ Bash: gemini -y -m gemma-4-31b-it '[prompt3]'
73
73
  ```
74
74
 
75
75
  Group by independent scopes so each command can return a focused report.
@@ -109,9 +109,9 @@ User: "Find database migration files" with `ext`
109
109
 
110
110
  Run 3 scoped Gemini CLI commands:
111
111
  ```
112
- Bash: gemini -y -m gemini-3-flash-preview 'Search db/, migrations/ for migration files'
113
- Bash: gemini -y -m gemini-3-flash-preview 'Search lib/, src/ for database schema files'
114
- Bash: gemini -y -m gemini-3-flash-preview 'Search config/ for database configuration'
112
+ Bash: gemini -y -m gemma-4-31b-it 'Search db/, migrations/ for migration files'
113
+ Bash: gemini -y -m gemma-4-31b-it 'Search lib/, src/ for database schema files'
114
+ Bash: gemini -y -m gemma-4-31b-it 'Search config/ for database configuration'
115
115
  ```
116
116
 
117
117
  ## Reading File Content