@ia-ccun/code-agent-cli 0.0.3 → 0.0.4-8.beta.1

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 (189) hide show
  1. package/README.md +92 -11
  2. package/bin/cli.js +212 -59
  3. package/config/agent/APPEND_SYSTEM.md +46 -5
  4. package/config/agent/bin/fd +0 -0
  5. package/config/agent/bin/rg +0 -0
  6. package/config/agent/dangerous-patterns.json +106 -0
  7. package/config/agent/extensions/aicode-tips.ts +191 -0
  8. package/config/agent/extensions/bash-check.ts +227 -0
  9. package/config/agent/extensions/context-monitor.ts +275 -0
  10. package/config/agent/extensions/context.ts +1 -0
  11. package/config/agent/extensions/custom-footer.ts +33 -2
  12. package/config/agent/extensions/custom.ts +24 -91
  13. package/config/agent/extensions/error-monitor.ts +142 -0
  14. package/config/agent/extensions/msg-debug.ts +185 -0
  15. package/config/agent/extensions/review.ts +4 -0
  16. package/config/agent/extensions/working-msg.ts +39 -20
  17. package/config/agent/mcp.json +4 -0
  18. package/config/agent/models.json +16 -43
  19. package/config/agent/prompts/code-simplifier.md +51 -0
  20. package/config/agent/prompts/feat.md +2 -2
  21. package/config/agent/prompts/git-commit.md +9 -15
  22. package/config/agent/prompts/init-project.md +2 -1
  23. package/config/agent/prompts/workflow.md +3 -2
  24. package/config/agent/settings.json +17 -5
  25. package/config/agent/skills/brainstorming/SKILL.md +167 -0
  26. package/config/agent/skills/brainstorming/scripts/frame-template.html +214 -0
  27. package/config/agent/skills/brainstorming/scripts/helper.js +88 -0
  28. package/config/agent/skills/brainstorming/scripts/server.cjs +338 -0
  29. package/config/agent/skills/brainstorming/scripts/start-server.sh +153 -0
  30. package/config/agent/skills/brainstorming/scripts/stop-server.sh +55 -0
  31. package/config/agent/skills/brainstorming/spec-document-reviewer-prompt.md +49 -0
  32. package/config/agent/skills/brainstorming/visual-companion.md +286 -0
  33. package/config/agent/skills/code-review/SKILL.md +4 -2
  34. package/config/agent/skills/commit/SKILL.md +10 -5
  35. package/config/agent/skills/csv-data-summarizer/SKILL.md +2 -1
  36. package/config/agent/skills/design-md/README.md +34 -0
  37. package/config/agent/skills/design-md/SKILL.md +172 -0
  38. package/config/agent/skills/design-md/examples/DESIGN.md +154 -0
  39. package/config/agent/skills/dispatching-parallel-agents/SKILL.md +185 -0
  40. package/config/agent/skills/executing-plans/SKILL.md +73 -0
  41. package/config/agent/skills/find-skills/SKILL.md +5 -1
  42. package/config/agent/skills/finishing-a-development-branch/SKILL.md +204 -0
  43. package/config/agent/skills/fireworks-tech-graph/LICENSE +21 -0
  44. package/config/agent/skills/fireworks-tech-graph/README.md +528 -0
  45. package/config/agent/skills/fireworks-tech-graph/README.zh.md +499 -0
  46. package/config/agent/skills/fireworks-tech-graph/SKILL.md +537 -0
  47. package/config/agent/skills/fireworks-tech-graph/agentloop-core.svg +101 -0
  48. package/config/agent/skills/fireworks-tech-graph/agents/openai.yaml +4 -0
  49. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style1-flat.png +0 -0
  50. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style2-dark.png +0 -0
  51. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style3-blueprint.png +0 -0
  52. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style4-notion.png +0 -0
  53. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style5-glass.png +0 -0
  54. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style6-claude.png +0 -0
  55. package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style7-openai.png +0 -0
  56. package/config/agent/skills/fireworks-tech-graph/fixtures/agent-memory-types-style4.json +181 -0
  57. package/config/agent/skills/fireworks-tech-graph/fixtures/api-flow-style7.json +40 -0
  58. package/config/agent/skills/fireworks-tech-graph/fixtures/mem0-style1.json +297 -0
  59. package/config/agent/skills/fireworks-tech-graph/fixtures/microservices-style3.json +64 -0
  60. package/config/agent/skills/fireworks-tech-graph/fixtures/multi-agent-style5.json +45 -0
  61. package/config/agent/skills/fireworks-tech-graph/fixtures/system-architecture-style6.json +48 -0
  62. package/config/agent/skills/fireworks-tech-graph/fixtures/tool-call-style2.json +182 -0
  63. package/config/agent/skills/fireworks-tech-graph/package.json +42 -0
  64. package/config/agent/skills/fireworks-tech-graph/references/icons.md +406 -0
  65. package/config/agent/skills/fireworks-tech-graph/references/style-1-flat-icon.md +108 -0
  66. package/config/agent/skills/fireworks-tech-graph/references/style-2-dark-terminal.md +107 -0
  67. package/config/agent/skills/fireworks-tech-graph/references/style-3-blueprint.md +113 -0
  68. package/config/agent/skills/fireworks-tech-graph/references/style-4-notion-clean.md +94 -0
  69. package/config/agent/skills/fireworks-tech-graph/references/style-5-glassmorphism.md +125 -0
  70. package/config/agent/skills/fireworks-tech-graph/references/style-6-claude-official.md +209 -0
  71. package/config/agent/skills/fireworks-tech-graph/references/style-7-openai.md +215 -0
  72. package/config/agent/skills/fireworks-tech-graph/references/style-diagram-matrix.md +135 -0
  73. package/config/agent/skills/fireworks-tech-graph/references/svg-layout-best-practices.md +100 -0
  74. package/config/agent/skills/fireworks-tech-graph/scripts/README.md +244 -0
  75. package/config/agent/skills/fireworks-tech-graph/scripts/generate-diagram.sh +157 -0
  76. package/config/agent/skills/fireworks-tech-graph/scripts/generate-from-template.py +1556 -0
  77. package/config/agent/skills/fireworks-tech-graph/scripts/test-all-styles.sh +135 -0
  78. package/config/agent/skills/fireworks-tech-graph/scripts/validate-svg.sh +292 -0
  79. package/config/agent/skills/fireworks-tech-graph/templates/agent-architecture.svg +28 -0
  80. package/config/agent/skills/fireworks-tech-graph/templates/architecture.svg +23 -0
  81. package/config/agent/skills/fireworks-tech-graph/templates/comparison-matrix.svg +14 -0
  82. package/config/agent/skills/fireworks-tech-graph/templates/data-flow.svg +28 -0
  83. package/config/agent/skills/fireworks-tech-graph/templates/er-diagram.svg +21 -0
  84. package/config/agent/skills/fireworks-tech-graph/templates/flowchart.svg +21 -0
  85. package/config/agent/skills/fireworks-tech-graph/templates/sequence.svg +20 -0
  86. package/config/agent/skills/fireworks-tech-graph/templates/state-machine.svg +20 -0
  87. package/config/agent/skills/fireworks-tech-graph/templates/timeline.svg +19 -0
  88. package/config/agent/skills/fireworks-tech-graph/templates/use-case.svg +21 -0
  89. package/config/agent/skills/frontend-design/SKILL.md +4 -1
  90. package/config/agent/skills/hello/SKILL.md +5 -2
  91. package/config/agent/skills/impeccable/adapt/SKILL.md +204 -0
  92. package/config/agent/skills/impeccable/animate/SKILL.md +177 -0
  93. package/config/agent/skills/impeccable/arrange/SKILL.md +127 -0
  94. package/config/agent/skills/impeccable/audit/SKILL.md +128 -0
  95. package/config/agent/skills/impeccable/bolder/SKILL.md +119 -0
  96. package/config/agent/skills/impeccable/clarify/SKILL.md +185 -0
  97. package/config/agent/skills/impeccable/colorize/SKILL.md +145 -0
  98. package/config/agent/skills/impeccable/critique/SKILL.md +122 -0
  99. package/config/agent/skills/impeccable/delight/SKILL.md +306 -0
  100. package/config/agent/skills/impeccable/distill/SKILL.md +124 -0
  101. package/config/agent/skills/impeccable/extract/SKILL.md +94 -0
  102. package/config/agent/skills/impeccable/frontend-design/reference/color-and-contrast.md +132 -0
  103. package/config/agent/skills/impeccable/frontend-design/reference/interaction-design.md +123 -0
  104. package/config/agent/skills/impeccable/frontend-design/reference/motion-design.md +99 -0
  105. package/config/agent/skills/impeccable/frontend-design/reference/responsive-design.md +114 -0
  106. package/config/agent/skills/impeccable/frontend-design/reference/spatial-design.md +100 -0
  107. package/config/agent/skills/impeccable/frontend-design/reference/typography.md +133 -0
  108. package/config/agent/skills/impeccable/frontend-design/reference/ux-writing.md +107 -0
  109. package/config/agent/skills/impeccable/harden/SKILL.md +357 -0
  110. package/config/agent/skills/impeccable/normalize/SKILL.md +73 -0
  111. package/config/agent/skills/impeccable/onboard/SKILL.md +248 -0
  112. package/config/agent/skills/impeccable/optimize/SKILL.md +268 -0
  113. package/config/agent/skills/impeccable/overdrive/SKILL.md +144 -0
  114. package/config/agent/skills/impeccable/polish/SKILL.md +205 -0
  115. package/config/agent/skills/impeccable/quieter/SKILL.md +105 -0
  116. package/config/agent/skills/impeccable/teach-impeccable/SKILL.md +71 -0
  117. package/config/agent/skills/impeccable/typeset/SKILL.md +118 -0
  118. package/config/agent/skills/librarian/SKILL.md +5 -1
  119. package/config/agent/skills/markdown-to-html/SKILL.md +5 -2
  120. package/config/agent/skills/owasp-security/SKILL.md +539 -0
  121. package/config/agent/skills/pr/SKILL.md +5 -2
  122. package/config/agent/skills/receiving-code-review/SKILL.md +216 -0
  123. package/config/agent/skills/refactor/SKILL.md +5 -2
  124. package/config/agent/skills/requesting-code-review/SKILL.md +108 -0
  125. package/config/agent/skills/requesting-code-review/code-reviewer.md +146 -0
  126. package/config/agent/skills/session-learning/SKILL.md +185 -0
  127. package/config/agent/skills/skill-creator/SKILL.md +339 -213
  128. package/config/agent/skills/skill-creator/agents/analyzer.md +274 -0
  129. package/config/agent/skills/skill-creator/agents/comparator.md +202 -0
  130. package/config/agent/skills/skill-creator/agents/grader.md +223 -0
  131. package/config/agent/skills/skill-creator/assets/eval_review.html +146 -0
  132. package/config/agent/skills/skill-creator/eval-viewer/generate_review.py +471 -0
  133. package/config/agent/skills/skill-creator/eval-viewer/viewer.html +1325 -0
  134. package/config/agent/skills/skill-creator/references/schemas.md +430 -0
  135. package/config/agent/skills/skill-creator/scripts/__init__.py +0 -0
  136. package/config/agent/skills/skill-creator/scripts/aggregate_benchmark.py +401 -0
  137. package/config/agent/skills/skill-creator/scripts/generate_report.py +326 -0
  138. package/config/agent/skills/skill-creator/scripts/improve_description.py +248 -0
  139. package/config/agent/skills/skill-creator/scripts/package_skill.py +33 -7
  140. package/config/agent/skills/skill-creator/scripts/quick_validate.py +11 -3
  141. package/config/agent/skills/skill-creator/scripts/run_eval.py +310 -0
  142. package/config/agent/skills/skill-creator/scripts/run_loop.py +332 -0
  143. package/config/agent/skills/skill-creator/scripts/utils.py +47 -0
  144. package/config/agent/skills/subagent-driven-development/SKILL.md +280 -0
  145. package/config/agent/skills/subagent-driven-development/code-quality-reviewer-prompt.md +26 -0
  146. package/config/agent/skills/subagent-driven-development/implementer-prompt.md +113 -0
  147. package/config/agent/skills/subagent-driven-development/spec-reviewer-prompt.md +61 -0
  148. package/config/agent/skills/systematic-debugging/CREATION-LOG.md +119 -0
  149. package/config/agent/skills/systematic-debugging/SKILL.md +300 -0
  150. package/config/agent/skills/systematic-debugging/condition-based-waiting-example.ts +158 -0
  151. package/config/agent/skills/systematic-debugging/condition-based-waiting.md +115 -0
  152. package/config/agent/skills/systematic-debugging/defense-in-depth.md +122 -0
  153. package/config/agent/skills/systematic-debugging/find-polluter.sh +63 -0
  154. package/config/agent/skills/systematic-debugging/root-cause-tracing.md +169 -0
  155. package/config/agent/skills/systematic-debugging/test-academic.md +14 -0
  156. package/config/agent/skills/systematic-debugging/test-pressure-1.md +58 -0
  157. package/config/agent/skills/systematic-debugging/test-pressure-2.md +68 -0
  158. package/config/agent/skills/systematic-debugging/test-pressure-3.md +69 -0
  159. package/config/agent/skills/test-driven-development/SKILL.md +375 -0
  160. package/config/agent/skills/test-driven-development/testing-anti-patterns.md +299 -0
  161. package/config/agent/skills/ui-ux-pro-max/SKILL.md +4 -1
  162. package/config/agent/skills/unit-test/SKILL.md +4 -2
  163. package/config/agent/skills/using-git-worktrees/SKILL.md +222 -0
  164. package/config/agent/skills/using-superpowers/SKILL.md +118 -0
  165. package/config/agent/skills/using-superpowers/references/codex-tools.md +25 -0
  166. package/config/agent/skills/using-superpowers/references/gemini-tools.md +33 -0
  167. package/config/agent/skills/verification-before-completion/SKILL.md +142 -0
  168. package/config/agent/skills/writing-plans/SKILL.md +148 -0
  169. package/config/agent/skills/writing-plans/plan-document-reviewer-prompt.md +49 -0
  170. package/config/agent/skills/writing-skills/SKILL.md +669 -0
  171. package/config/agent/skills/writing-skills/anthropic-best-practices.md +1150 -0
  172. package/config/agent/skills/writing-skills/examples/CLAUDE_MD_TESTING.md +189 -0
  173. package/config/agent/skills/writing-skills/graphviz-conventions.dot +172 -0
  174. package/config/agent/skills/writing-skills/persuasion-principles.md +187 -0
  175. package/config/agent/skills/writing-skills/render-graphs.js +168 -0
  176. package/config/agent/skills/writing-skills/testing-skills-with-subagents.md +384 -0
  177. package/config.json +23 -2
  178. package/dist/banner.js +3 -3
  179. package/dist/banner.js.map +1 -1
  180. package/package.json +21 -16
  181. package/scripts/banner.txt +4 -3
  182. package/scripts/postinstall.js +203 -11
  183. package/config/agent/prompts/git-rollback.md +0 -91
  184. package/config/agent/prompts/git-worktree.md +0 -277
  185. package/config/agent/prompts/help.md +0 -10
  186. package/config/agent/skills/github/SKILL.md +0 -47
  187. package/config/agent/skills/skill-creator/references/output-patterns.md +0 -82
  188. package/config/agent/skills/skill-creator/references/workflows.md +0 -28
  189. package/config/agent/skills/skill-creator/scripts/init_skill.py +0 -303
@@ -0,0 +1,119 @@
1
+ ---
2
+ name: bolder
3
+ description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
4
+ user-invocable: true
5
+ args:
6
+ - name: target
7
+ description: The feature or component to make bolder (optional)
8
+ required: false
9
+ ---
10
+
11
+ Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
12
+
13
+ ## MANDATORY PREPARATION
14
+
15
+ Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first.
16
+
17
+ ---
18
+
19
+ ## Assess Current State
20
+
21
+ Analyze what makes the design feel too safe or boring:
22
+
23
+ 1. **Identify weakness sources**:
24
+ - **Generic choices**: System fonts, basic colors, standard layouts
25
+ - **Timid scale**: Everything is medium-sized with no drama
26
+ - **Low contrast**: Everything has similar visual weight
27
+ - **Static**: No motion, no energy, no life
28
+ - **Predictable**: Standard patterns with no surprises
29
+ - **Flat hierarchy**: Nothing stands out or commands attention
30
+
31
+ 2. **Understand the context**:
32
+ - What's the brand personality? (How far can we push?)
33
+ - What's the purpose? (Marketing can be bolder than financial dashboards)
34
+ - Who's the audience? (What will resonate?)
35
+ - What are the constraints? (Brand guidelines, accessibility, performance)
36
+
37
+ If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.
38
+
39
+ **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
40
+
41
+ **WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects."
42
+
43
+ ## Plan Amplification
44
+
45
+ Create a strategy to increase impact while maintaining coherence:
46
+
47
+ - **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
48
+ - **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
49
+ - **Risk budget**: How experimental can we be? Push boundaries within constraints.
50
+ - **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
51
+
52
+ **IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
53
+
54
+ ## Amplify the Design
55
+
56
+ Systematically increase impact across these dimensions:
57
+
58
+ ### Typography Amplification
59
+ - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
60
+ - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
61
+ - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
62
+ - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
63
+
64
+ ### Color Intensification
65
+ - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
66
+ - **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
67
+ - **Dominant color strategy**: Let one bold color own 60% of the design
68
+ - **Sharp accents**: High-contrast accent colors that pop
69
+ - **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
70
+ - **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
71
+
72
+ ### Spatial Drama
73
+ - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
74
+ - **Break the grid**: Let hero elements escape containers and cross boundaries
75
+ - **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
76
+ - **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
77
+ - **Overlap**: Layer elements intentionally for depth
78
+
79
+ ### Visual Effects
80
+ - **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles)
81
+ - **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue)
82
+ - **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop)
83
+ - **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side)
84
+ - **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand
85
+
86
+ ### Motion & Animation
87
+ - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
88
+ - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
89
+ - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
90
+ - **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
91
+
92
+ ### Composition Boldness
93
+ - **Hero moments**: Create clear focal points with dramatic treatment
94
+ - **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
95
+ - **Full-bleed elements**: Use full viewport width/height for impact
96
+ - **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
97
+
98
+ **NEVER**:
99
+ - Add effects randomly without purpose (chaos ≠ bold)
100
+ - Sacrifice readability for aesthetics (body text must be readable)
101
+ - Make everything bold (then nothing is bold - need contrast)
102
+ - Ignore accessibility (bold design must still meet WCAG standards)
103
+ - Overwhelm with motion (animation fatigue is real)
104
+ - Copy trendy aesthetics blindly (bold means distinctive, not derivative)
105
+
106
+ ## Verify Quality
107
+
108
+ Ensure amplification maintains usability and coherence:
109
+
110
+ - **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over.
111
+ - **Still functional**: Can users accomplish tasks without distraction?
112
+ - **Coherent**: Does everything feel intentional and unified?
113
+ - **Memorable**: Will users remember this experience?
114
+ - **Performant**: Do all these effects run smoothly?
115
+ - **Accessible**: Does it still meet accessibility standards?
116
+
117
+ **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."
118
+
119
+ Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
@@ -0,0 +1,185 @@
1
+ ---
2
+ name: clarify
3
+ description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
4
+ user-invocable: true
5
+ args:
6
+ - name: target
7
+ description: The feature or component with unclear copy (optional)
8
+ required: false
9
+ ---
10
+
11
+ Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
12
+
13
+ ## MANDATORY PREPARATION
14
+
15
+ Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: audience technical level and users' mental state in context.
16
+
17
+ ---
18
+
19
+ ## Assess Current Copy
20
+
21
+ Identify what makes the text unclear or ineffective:
22
+
23
+ 1. **Find clarity problems**:
24
+ - **Jargon**: Technical terms users won't understand
25
+ - **Ambiguity**: Multiple interpretations possible
26
+ - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
27
+ - **Length**: Too wordy or too terse
28
+ - **Assumptions**: Assuming user knowledge they don't have
29
+ - **Missing context**: Users don't know what to do or why
30
+ - **Tone mismatch**: Too formal, too casual, or inappropriate for situation
31
+
32
+ 2. **Understand the context**:
33
+ - Who's the audience? (Technical? General? First-time users?)
34
+ - What's the user's mental state? (Stressed during error? Confident during success?)
35
+ - What's the action? (What do we want users to do?)
36
+ - What's the constraint? (Character limits? Space limitations?)
37
+
38
+ **CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
39
+
40
+ ## Plan Copy Improvements
41
+
42
+ Create a strategy for clearer communication:
43
+
44
+ - **Primary message**: What's the ONE thing users need to know?
45
+ - **Action needed**: What should users do next (if anything)?
46
+ - **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
47
+ - **Constraints**: Length limits, brand voice, localization considerations
48
+
49
+ **IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
50
+
51
+ ## Improve Copy Systematically
52
+
53
+ Refine text across these common areas:
54
+
55
+ ### Error Messages
56
+ **Bad**: "Error 403: Forbidden"
57
+ **Good**: "You don't have permission to view this page. Contact your admin for access."
58
+
59
+ **Bad**: "Invalid input"
60
+ **Good**: "Email addresses need an @ symbol. Try: name@example.com"
61
+
62
+ **Principles**:
63
+ - Explain what went wrong in plain language
64
+ - Suggest how to fix it
65
+ - Don't blame the user
66
+ - Include examples when helpful
67
+ - Link to help/support if applicable
68
+
69
+ ### Form Labels & Instructions
70
+ **Bad**: "DOB (MM/DD/YYYY)"
71
+ **Good**: "Date of birth" (with placeholder showing format)
72
+
73
+ **Bad**: "Enter value here"
74
+ **Good**: "Your email address" or "Company name"
75
+
76
+ **Principles**:
77
+ - Use clear, specific labels (not generic placeholders)
78
+ - Show format expectations with examples
79
+ - Explain why you're asking (when not obvious)
80
+ - Put instructions before the field, not after
81
+ - Keep required field indicators clear
82
+
83
+ ### Button & CTA Text
84
+ **Bad**: "Click here" | "Submit" | "OK"
85
+ **Good**: "Create account" | "Save changes" | "Got it, thanks"
86
+
87
+ **Principles**:
88
+ - Describe the action specifically
89
+ - Use active voice (verb + noun)
90
+ - Match user's mental model
91
+ - Be specific ("Save" is better than "OK")
92
+
93
+ ### Help Text & Tooltips
94
+ **Bad**: "This is the username field"
95
+ **Good**: "Choose a username. You can change this later in Settings."
96
+
97
+ **Principles**:
98
+ - Add value (don't just repeat the label)
99
+ - Answer the implicit question ("What is this?" or "Why do you need this?")
100
+ - Keep it brief but complete
101
+ - Link to detailed docs if needed
102
+
103
+ ### Empty States
104
+ **Bad**: "No items"
105
+ **Good**: "No projects yet. Create your first project to get started."
106
+
107
+ **Principles**:
108
+ - Explain why it's empty (if not obvious)
109
+ - Show next action clearly
110
+ - Make it welcoming, not dead-end
111
+
112
+ ### Success Messages
113
+ **Bad**: "Success"
114
+ **Good**: "Settings saved! Your changes will take effect immediately."
115
+
116
+ **Principles**:
117
+ - Confirm what happened
118
+ - Explain what happens next (if relevant)
119
+ - Be brief but complete
120
+ - Match the user's emotional moment (celebrate big wins)
121
+
122
+ ### Loading States
123
+ **Bad**: "Loading..." (for 30+ seconds)
124
+ **Good**: "Analyzing your data... this usually takes 30-60 seconds"
125
+
126
+ **Principles**:
127
+ - Set expectations (how long?)
128
+ - Explain what's happening (when it's not obvious)
129
+ - Show progress when possible
130
+ - Offer escape hatch if appropriate ("Cancel")
131
+
132
+ ### Confirmation Dialogs
133
+ **Bad**: "Are you sure?"
134
+ **Good**: "Delete 'Project Alpha'? This can't be undone."
135
+
136
+ **Principles**:
137
+ - State the specific action
138
+ - Explain consequences (especially for destructive actions)
139
+ - Use clear button labels ("Delete project" not "Yes")
140
+ - Don't overuse confirmations (only for risky actions)
141
+
142
+ ### Navigation & Wayfinding
143
+ **Bad**: Generic labels like "Items" | "Things" | "Stuff"
144
+ **Good**: Specific labels like "Your projects" | "Team members" | "Settings"
145
+
146
+ **Principles**:
147
+ - Be specific and descriptive
148
+ - Use language users understand (not internal jargon)
149
+ - Make hierarchy clear
150
+ - Consider information scent (breadcrumbs, current location)
151
+
152
+ ## Apply Clarity Principles
153
+
154
+ Every piece of copy should follow these rules:
155
+
156
+ 1. **Be specific**: "Enter email" not "Enter value"
157
+ 2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
158
+ 3. **Be active**: "Save changes" not "Changes will be saved"
159
+ 4. **Be human**: "Oops, something went wrong" not "System error encountered"
160
+ 5. **Be helpful**: Tell users what to do, not just what happened
161
+ 6. **Be consistent**: Use same terms throughout (don't vary for variety)
162
+
163
+ **NEVER**:
164
+ - Use jargon without explanation
165
+ - Blame users ("You made an error" → "This field is required")
166
+ - Be vague ("Something went wrong" without explanation)
167
+ - Use passive voice unnecessarily
168
+ - Write overly long explanations (be concise)
169
+ - Use humor for errors (be empathetic instead)
170
+ - Assume technical knowledge
171
+ - Vary terminology (pick one term and stick with it)
172
+ - Repeat information (headers restating intros, redundant explanations)
173
+ - Use placeholders as the only labels (they disappear when users type)
174
+
175
+ ## Verify Improvements
176
+
177
+ Test that copy improvements work:
178
+
179
+ - **Comprehension**: Can users understand without context?
180
+ - **Actionability**: Do users know what to do next?
181
+ - **Brevity**: Is it as short as possible while remaining clear?
182
+ - **Consistency**: Does it match terminology elsewhere?
183
+ - **Tone**: Is it appropriate for the situation?
184
+
185
+ Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
@@ -0,0 +1,145 @@
1
+ ---
2
+ name: colorize
3
+ description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
4
+ user-invocable: true
5
+ args:
6
+ - name: target
7
+ description: The feature or component to colorize (optional)
8
+ required: false
9
+ ---
10
+
11
+ Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
12
+
13
+ ## MANDATORY PREPARATION
14
+
15
+ Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: existing brand colors.
16
+
17
+ ---
18
+
19
+ ## Assess Color Opportunity
20
+
21
+ Analyze the current state and identify opportunities:
22
+
23
+ 1. **Understand current state**:
24
+ - **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
25
+ - **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
26
+ - **Context**: What's appropriate for this domain and audience?
27
+ - **Brand**: Are there existing brand colors we should use?
28
+
29
+ 2. **Identify where color adds value**:
30
+ - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
31
+ - **Hierarchy**: Drawing attention to important elements
32
+ - **Categorization**: Different sections, types, or states
33
+ - **Emotional tone**: Warmth, energy, trust, creativity
34
+ - **Wayfinding**: Helping users navigate and understand structure
35
+ - **Delight**: Moments of visual interest and personality
36
+
37
+ If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.
38
+
39
+ **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
40
+
41
+ ## Plan Color Strategy
42
+
43
+ Create a purposeful color introduction plan:
44
+
45
+ - **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
46
+ - **Dominant color**: Which color owns 60% of colored elements?
47
+ - **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
48
+ - **Application strategy**: Where does each color appear and why?
49
+
50
+ **IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
51
+
52
+ ## Introduce Color Strategically
53
+
54
+ Add color systematically across these dimensions:
55
+
56
+ ### Semantic Color
57
+ - **State indicators**:
58
+ - Success: Green tones (emerald, forest, mint)
59
+ - Error: Red/pink tones (rose, crimson, coral)
60
+ - Warning: Orange/amber tones
61
+ - Info: Blue tones (sky, ocean, indigo)
62
+ - Neutral: Gray/slate for inactive states
63
+
64
+ - **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
65
+ - **Progress indicators**: Colored bars, rings, or charts showing completion or health
66
+
67
+ ### Accent Color Application
68
+ - **Primary actions**: Color the most important buttons/CTAs
69
+ - **Links**: Add color to clickable text (maintain accessibility)
70
+ - **Icons**: Colorize key icons for recognition and personality
71
+ - **Headers/titles**: Add color to section headers or key labels
72
+ - **Hover states**: Introduce color on interaction
73
+
74
+ ### Background & Surfaces
75
+ - **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
76
+ - **Colored sections**: Use subtle background colors to separate areas
77
+ - **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
78
+ - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
79
+
80
+ **Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
81
+
82
+ ### Data Visualization
83
+ - **Charts & graphs**: Use color to encode categories or values
84
+ - **Heatmaps**: Color intensity shows density or importance
85
+ - **Comparison**: Color coding for different datasets or timeframes
86
+
87
+ ### Borders & Accents
88
+ - **Accent borders**: Add colored left/top borders to cards or sections
89
+ - **Underlines**: Color underlines for emphasis or active states
90
+ - **Dividers**: Subtle colored dividers instead of gray lines
91
+ - **Focus rings**: Colored focus indicators matching brand
92
+
93
+ ### Typography Color
94
+ - **Colored headings**: Use brand colors for section headings (maintain contrast)
95
+ - **Highlight text**: Color for emphasis or categories
96
+ - **Labels & tags**: Small colored labels for metadata or categories
97
+
98
+ ### Decorative Elements
99
+ - **Illustrations**: Add colored illustrations or icons
100
+ - **Shapes**: Geometric shapes in brand colors as background elements
101
+ - **Gradients**: Colorful gradient overlays or mesh backgrounds
102
+ - **Blobs/organic shapes**: Soft colored shapes for visual interest
103
+
104
+ ## Balance & Refinement
105
+
106
+ Ensure color addition improves rather than overwhelms:
107
+
108
+ ### Maintain Hierarchy
109
+ - **Dominant color** (60%): Primary brand color or most used accent
110
+ - **Secondary color** (30%): Supporting color for variety
111
+ - **Accent color** (10%): High contrast for key moments
112
+ - **Neutrals** (remaining): Gray/black/white for structure
113
+
114
+ ### Accessibility
115
+ - **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
116
+ - **Don't rely on color alone**: Use icons, labels, or patterns alongside color
117
+ - **Test for color blindness**: Verify red/green combinations work for all users
118
+
119
+ ### Cohesion
120
+ - **Consistent palette**: Use colors from defined palette, not arbitrary choices
121
+ - **Systematic application**: Same color meanings throughout (green always = success)
122
+ - **Temperature consistency**: Warm palette stays warm, cool stays cool
123
+
124
+ **NEVER**:
125
+ - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
126
+ - Apply color randomly without semantic meaning
127
+ - Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
128
+ - Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
129
+ - Use pure black (`#000`) or pure white (`#fff`) for large areas
130
+ - Violate WCAG contrast requirements
131
+ - Use color as the only indicator (accessibility issue)
132
+ - Make everything colorful (defeats the purpose)
133
+ - Default to purple-blue gradients (AI slop aesthetic)
134
+
135
+ ## Verify Color Addition
136
+
137
+ Test that colorization improves the experience:
138
+
139
+ - **Better hierarchy**: Does color guide attention appropriately?
140
+ - **Clearer meaning**: Does color help users understand states/categories?
141
+ - **More engaging**: Does the interface feel warmer and more inviting?
142
+ - **Still accessible**: Do all color combinations meet WCAG standards?
143
+ - **Not overwhelming**: Is color balanced and purposeful?
144
+
145
+ Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
@@ -0,0 +1,122 @@
1
+ ---
2
+ name: critique
3
+ description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
4
+ user-invocable: true
5
+ args:
6
+ - name: area
7
+ description: The feature or area to critique (optional)
8
+ required: false
9
+ ---
10
+
11
+ ## MANDATORY PREPARATION
12
+
13
+ Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: what the interface is trying to accomplish.
14
+
15
+ ---
16
+
17
+ Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
18
+
19
+ ## Design Critique
20
+
21
+ Evaluate the interface across these dimensions:
22
+
23
+ ### 1. AI Slop Detection (CRITICAL)
24
+
25
+ **This is the most important check.** Does this look like every other AI-generated interface from 2024-2025?
26
+
27
+ Review the design against ALL the **DON'T** guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.
28
+
29
+ **The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
30
+
31
+ ### 2. Visual Hierarchy
32
+ - Does the eye flow to the most important element first?
33
+ - Is there a clear primary action? Can you spot it in 2 seconds?
34
+ - Do size, color, and position communicate importance correctly?
35
+ - Is there visual competition between elements that should have different weights?
36
+
37
+ ### 3. Information Architecture
38
+ - Is the structure intuitive? Would a new user understand the organization?
39
+ - Is related content grouped logically?
40
+ - Are there too many choices at once? (cognitive overload)
41
+ - Is the navigation clear and predictable?
42
+
43
+ ### 4. Emotional Resonance
44
+ - What emotion does this interface evoke? Is that intentional?
45
+ - Does it match the brand personality?
46
+ - Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
47
+ - Would the target user feel "this is for me"?
48
+
49
+ ### 5. Discoverability & Affordance
50
+ - Are interactive elements obviously interactive?
51
+ - Would a user know what to do without instructions?
52
+ - Are hover/focus states providing useful feedback?
53
+ - Are there hidden features that should be more visible?
54
+
55
+ ### 6. Composition & Balance
56
+ - Does the layout feel balanced or uncomfortably weighted?
57
+ - Is whitespace used intentionally or just leftover?
58
+ - Is there visual rhythm in spacing and repetition?
59
+ - Does asymmetry feel designed or accidental?
60
+
61
+ ### 7. Typography as Communication
62
+ - Does the type hierarchy clearly signal what to read first, second, third?
63
+ - Is body text comfortable to read? (line length, spacing, size)
64
+ - Do font choices reinforce the brand/tone?
65
+ - Is there enough contrast between heading levels?
66
+
67
+ ### 8. Color with Purpose
68
+ - Is color used to communicate, not just decorate?
69
+ - Does the palette feel cohesive?
70
+ - Are accent colors drawing attention to the right things?
71
+ - Does it work for colorblind users? (not just technically—does meaning still come through?)
72
+
73
+ ### 9. States & Edge Cases
74
+ - Empty states: Do they guide users toward action, or just say "nothing here"?
75
+ - Loading states: Do they reduce perceived wait time?
76
+ - Error states: Are they helpful and non-blaming?
77
+ - Success states: Do they confirm and guide next steps?
78
+
79
+ ### 10. Microcopy & Voice
80
+ - Is the writing clear and concise?
81
+ - Does it sound like a human (the right human for this brand)?
82
+ - Are labels and buttons unambiguous?
83
+ - Does error copy help users fix the problem?
84
+
85
+ ## Generate Critique Report
86
+
87
+ Structure your feedback as a design director would:
88
+
89
+ ### Anti-Patterns Verdict
90
+ **Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
91
+
92
+ ### Overall Impression
93
+ A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
94
+
95
+ ### What's Working
96
+ Highlight 2-3 things done well. Be specific about why they work.
97
+
98
+ ### Priority Issues
99
+ The 3-5 most impactful design problems, ordered by importance:
100
+
101
+ For each issue:
102
+ - **What**: Name the problem clearly
103
+ - **Why it matters**: How this hurts users or undermines goals
104
+ - **Fix**: What to do about it (be concrete)
105
+ - **Command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive — or other installed skills you're sure exist)
106
+
107
+ ### Minor Observations
108
+ Quick notes on smaller issues worth addressing.
109
+
110
+ ### Questions to Consider
111
+ Provocative questions that might unlock better solutions:
112
+ - "What if the primary action were more prominent?"
113
+ - "Does this need to feel this complex?"
114
+ - "What would a confident version of this look like?"
115
+
116
+ **Remember**:
117
+ - Be direct—vague feedback wastes everyone's time
118
+ - Be specific—"the submit button" not "some elements"
119
+ - Say what's wrong AND why it matters to users
120
+ - Give concrete suggestions, not just "consider exploring..."
121
+ - Prioritize ruthlessly—if everything is important, nothing is
122
+ - Don't soften criticism—developers need honest feedback to ship great design