@kinqs/brainrouter-mcp-server 0.3.4

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 (337) hide show
  1. package/.env.example +144 -0
  2. package/README.md +56 -0
  3. package/agents/README.md +120 -0
  4. package/agents/code-reviewer.md +97 -0
  5. package/agents/security-auditor.md +101 -0
  6. package/agents/test-engineer.md +95 -0
  7. package/dist/__tests__/agent_mode.test.d.ts +1 -0
  8. package/dist/__tests__/api-routes.test.d.ts +1 -0
  9. package/dist/__tests__/api-routes.test.js +170 -0
  10. package/dist/__tests__/crypto.test.d.ts +1 -0
  11. package/dist/__tests__/crypto.test.js +28 -0
  12. package/dist/__tests__/host-integrations.test.d.ts +1 -0
  13. package/dist/__tests__/host-integrations.test.js +82 -0
  14. package/dist/__tests__/integration.test.d.ts +1 -0
  15. package/dist/__tests__/integration.test.js +50 -0
  16. package/dist/__tests__/loader.test.d.ts +1 -0
  17. package/dist/__tests__/loader.test.js +89 -0
  18. package/dist/__tests__/neural-spark.test.d.ts +1 -0
  19. package/dist/__tests__/neural-spark.test.js +112 -0
  20. package/dist/__tests__/pagination.test.d.ts +1 -0
  21. package/dist/__tests__/pagination.test.js +23 -0
  22. package/dist/__tests__/redaction.test.d.ts +1 -0
  23. package/dist/__tests__/redaction.test.js +17 -0
  24. package/dist/__tests__/registry.test.d.ts +1 -0
  25. package/dist/__tests__/registry.test.js +56 -0
  26. package/dist/__tests__/retry.test.d.ts +1 -0
  27. package/dist/__tests__/retry.test.js +30 -0
  28. package/dist/__tests__/skill-activation.test.d.ts +1 -0
  29. package/dist/__tests__/skill-activation.test.js +112 -0
  30. package/dist/__tests__/working-memory.test.d.ts +1 -0
  31. package/dist/__tests__/working-memory.test.js +200 -0
  32. package/dist/__tests__/workspace-paths.test.d.ts +1 -0
  33. package/dist/__tests__/workspace-paths.test.js +56 -0
  34. package/dist/__tests__/writer.test.d.ts +1 -0
  35. package/dist/__tests__/writer.test.js +94 -0
  36. package/dist/api/auth/crypto.d.ts +4 -0
  37. package/dist/api/auth/crypto.js +54 -0
  38. package/dist/api/middleware/auth.d.ts +12 -0
  39. package/dist/api/middleware/auth.js +90 -0
  40. package/dist/api/pagination.d.ts +18 -0
  41. package/dist/api/pagination.js +32 -0
  42. package/dist/api/routes/auth.d.ts +1 -0
  43. package/dist/api/routes/auth.js +130 -0
  44. package/dist/api/routes/chat-completions.d.ts +7 -0
  45. package/dist/api/routes/chat-completions.js +474 -0
  46. package/dist/api/routes/contradictions.d.ts +1 -0
  47. package/dist/api/routes/contradictions.js +28 -0
  48. package/dist/api/routes/evidence.d.ts +1 -0
  49. package/dist/api/routes/evidence.js +59 -0
  50. package/dist/api/routes/governance.d.ts +1 -0
  51. package/dist/api/routes/governance.js +95 -0
  52. package/dist/api/routes/graph.d.ts +1 -0
  53. package/dist/api/routes/graph.js +25 -0
  54. package/dist/api/routes/hooks.d.ts +1 -0
  55. package/dist/api/routes/hooks.js +88 -0
  56. package/dist/api/routes/memories.d.ts +1 -0
  57. package/dist/api/routes/memories.js +92 -0
  58. package/dist/api/routes/persona.d.ts +1 -0
  59. package/dist/api/routes/persona.js +9 -0
  60. package/dist/api/routes/scenes.d.ts +1 -0
  61. package/dist/api/routes/scenes.js +35 -0
  62. package/dist/api/routes/skills.d.ts +1 -0
  63. package/dist/api/routes/skills.js +14 -0
  64. package/dist/api/routes/stats.d.ts +1 -0
  65. package/dist/api/routes/stats.js +8 -0
  66. package/dist/api/routes/users.d.ts +1 -0
  67. package/dist/api/routes/users.js +82 -0
  68. package/dist/api/routes/working.d.ts +1 -0
  69. package/dist/api/routes/working.js +88 -0
  70. package/dist/index.d.ts +2 -0
  71. package/dist/index.js +492 -0
  72. package/dist/integrations/claude-code.d.ts +12 -0
  73. package/dist/integrations/claude-code.js +35 -0
  74. package/dist/integrations/codex.d.ts +12 -0
  75. package/dist/integrations/codex.js +34 -0
  76. package/dist/integrations/generic-mcp.d.ts +52 -0
  77. package/dist/integrations/generic-mcp.js +118 -0
  78. package/dist/loader.d.ts +29 -0
  79. package/dist/loader.js +200 -0
  80. package/dist/memory/capture.d.ts +35 -0
  81. package/dist/memory/capture.js +230 -0
  82. package/dist/memory/config.d.ts +2 -0
  83. package/dist/memory/config.js +3 -0
  84. package/dist/memory/engine.d.ts +203 -0
  85. package/dist/memory/engine.js +626 -0
  86. package/dist/memory/llm-semaphore.d.ts +41 -0
  87. package/dist/memory/llm-semaphore.js +81 -0
  88. package/dist/memory/memory-type-config.d.ts +11 -0
  89. package/dist/memory/memory-type-config.js +65 -0
  90. package/dist/memory/pipeline/cognitive-contradiction.d.ts +7 -0
  91. package/dist/memory/pipeline/cognitive-contradiction.js +59 -0
  92. package/dist/memory/pipeline/cognitive-dedup.d.ts +23 -0
  93. package/dist/memory/pipeline/cognitive-dedup.js +38 -0
  94. package/dist/memory/pipeline/cognitive-extractor.d.ts +21 -0
  95. package/dist/memory/pipeline/cognitive-extractor.js +183 -0
  96. package/dist/memory/pipeline/contextual-focus-builder.d.ts +13 -0
  97. package/dist/memory/pipeline/contextual-focus-builder.js +135 -0
  98. package/dist/memory/pipeline/focus-direction-shift.d.ts +10 -0
  99. package/dist/memory/pipeline/focus-direction-shift.js +27 -0
  100. package/dist/memory/pipeline/graph-builder.d.ts +11 -0
  101. package/dist/memory/pipeline/graph-builder.js +88 -0
  102. package/dist/memory/pipeline/graph-recall.d.ts +13 -0
  103. package/dist/memory/pipeline/graph-recall.js +55 -0
  104. package/dist/memory/pipeline/identity-distiller.d.ts +15 -0
  105. package/dist/memory/pipeline/identity-distiller.js +40 -0
  106. package/dist/memory/pipeline/l1-contradiction.d.ts +7 -0
  107. package/dist/memory/pipeline/l1-contradiction.js +66 -0
  108. package/dist/memory/pipeline/l1-dedup.d.ts +23 -0
  109. package/dist/memory/pipeline/l1-dedup.js +39 -0
  110. package/dist/memory/pipeline/l1-extractor.d.ts +21 -0
  111. package/dist/memory/pipeline/l1-extractor.js +180 -0
  112. package/dist/memory/pipeline/l2-direction-shift.d.ts +10 -0
  113. package/dist/memory/pipeline/l2-direction-shift.js +27 -0
  114. package/dist/memory/pipeline/l2-scene.d.ts +15 -0
  115. package/dist/memory/pipeline/l2-scene.js +140 -0
  116. package/dist/memory/pipeline/l3-distiller.d.ts +15 -0
  117. package/dist/memory/pipeline/l3-distiller.js +40 -0
  118. package/dist/memory/pipeline/neural-spark.d.ts +27 -0
  119. package/dist/memory/pipeline/neural-spark.js +78 -0
  120. package/dist/memory/pipeline/skill-prewarm.d.ts +63 -0
  121. package/dist/memory/pipeline/skill-prewarm.js +127 -0
  122. package/dist/memory/pipeline/task-queue.d.ts +54 -0
  123. package/dist/memory/pipeline/task-queue.js +117 -0
  124. package/dist/memory/prompts/cognitive-contradiction.d.ts +1 -0
  125. package/dist/memory/prompts/cognitive-contradiction.js +25 -0
  126. package/dist/memory/prompts/cognitive-extraction.d.ts +10 -0
  127. package/dist/memory/prompts/cognitive-extraction.js +114 -0
  128. package/dist/memory/prompts/core-identity.d.ts +6 -0
  129. package/dist/memory/prompts/core-identity.js +60 -0
  130. package/dist/memory/prompts/focus-direction-shift.d.ts +5 -0
  131. package/dist/memory/prompts/focus-direction-shift.js +32 -0
  132. package/dist/memory/prompts/focus-scene-cluster.d.ts +2 -0
  133. package/dist/memory/prompts/focus-scene-cluster.js +33 -0
  134. package/dist/memory/prompts/focus-scene.d.ts +7 -0
  135. package/dist/memory/prompts/focus-scene.js +40 -0
  136. package/dist/memory/prompts/graph-extraction-batch.d.ts +14 -0
  137. package/dist/memory/prompts/graph-extraction-batch.js +54 -0
  138. package/dist/memory/prompts/graph-extraction.d.ts +2 -0
  139. package/dist/memory/prompts/graph-extraction.js +53 -0
  140. package/dist/memory/prompts/l1-contradiction-batch.d.ts +16 -0
  141. package/dist/memory/prompts/l1-contradiction-batch.js +47 -0
  142. package/dist/memory/prompts/l1-contradiction.d.ts +1 -0
  143. package/dist/memory/prompts/l1-contradiction.js +25 -0
  144. package/dist/memory/prompts/l1-extraction.d.ts +10 -0
  145. package/dist/memory/prompts/l1-extraction.js +114 -0
  146. package/dist/memory/prompts/l2-direction-shift.d.ts +5 -0
  147. package/dist/memory/prompts/l2-direction-shift.js +32 -0
  148. package/dist/memory/prompts/l2-scene-cluster.d.ts +2 -0
  149. package/dist/memory/prompts/l2-scene-cluster.js +33 -0
  150. package/dist/memory/prompts/l2-scene.d.ts +7 -0
  151. package/dist/memory/prompts/l2-scene.js +40 -0
  152. package/dist/memory/prompts/l3-persona.d.ts +6 -0
  153. package/dist/memory/prompts/l3-persona.js +60 -0
  154. package/dist/memory/recall.d.ts +47 -0
  155. package/dist/memory/recall.js +427 -0
  156. package/dist/memory/redaction.d.ts +1 -0
  157. package/dist/memory/redaction.js +24 -0
  158. package/dist/memory/retry.d.ts +13 -0
  159. package/dist/memory/retry.js +53 -0
  160. package/dist/memory/scheduler.d.ts +9 -0
  161. package/dist/memory/scheduler.js +16 -0
  162. package/dist/memory/skill-hints-loader.d.ts +30 -0
  163. package/dist/memory/skill-hints-loader.js +100 -0
  164. package/dist/memory/store/embedding.d.ts +16 -0
  165. package/dist/memory/store/embedding.js +68 -0
  166. package/dist/memory/store/reranker.d.ts +24 -0
  167. package/dist/memory/store/reranker.js +83 -0
  168. package/dist/memory/store/sqlite.d.ts +167 -0
  169. package/dist/memory/store/sqlite.js +1816 -0
  170. package/dist/memory/store/types.d.ts +101 -0
  171. package/dist/memory/store/types.js +1 -0
  172. package/dist/memory/types.d.ts +207 -0
  173. package/dist/memory/types.js +7 -0
  174. package/dist/memory/validation.d.ts +441 -0
  175. package/dist/memory/validation.js +129 -0
  176. package/dist/memory/working/canvas.d.ts +5 -0
  177. package/dist/memory/working/canvas.js +43 -0
  178. package/dist/memory/working/offload.d.ts +71 -0
  179. package/dist/memory/working/offload.js +211 -0
  180. package/dist/memory/working/step-log.d.ts +16 -0
  181. package/dist/memory/working/step-log.js +35 -0
  182. package/dist/registry.d.ts +34 -0
  183. package/dist/registry.js +305 -0
  184. package/dist/resolver.d.ts +17 -0
  185. package/dist/resolver.js +126 -0
  186. package/dist/scripts/validate-foreign-workspace-path.d.ts +1 -0
  187. package/dist/scripts/validate-foreign-workspace-path.js +39 -0
  188. package/dist/tools/agent_memory_tools.d.ts +485 -0
  189. package/dist/tools/agent_memory_tools.js +793 -0
  190. package/dist/tools/create_skill.d.ts +46 -0
  191. package/dist/tools/create_skill.js +46 -0
  192. package/dist/tools/get_doc.d.ts +21 -0
  193. package/dist/tools/get_doc.js +24 -0
  194. package/dist/tools/get_persona.d.ts +15 -0
  195. package/dist/tools/get_persona.js +20 -0
  196. package/dist/tools/get_reference.d.ts +15 -0
  197. package/dist/tools/get_reference.js +20 -0
  198. package/dist/tools/get_skill.d.ts +34 -0
  199. package/dist/tools/get_skill.js +65 -0
  200. package/dist/tools/get_template_doc.d.ts +21 -0
  201. package/dist/tools/get_template_doc.js +24 -0
  202. package/dist/tools/list_docs.d.ts +15 -0
  203. package/dist/tools/list_docs.js +16 -0
  204. package/dist/tools/list_skills.d.ts +18 -0
  205. package/dist/tools/list_skills.js +17 -0
  206. package/dist/tools/list_template_docs.d.ts +15 -0
  207. package/dist/tools/list_template_docs.js +16 -0
  208. package/dist/tools/memory-engineering.d.ts +225 -0
  209. package/dist/tools/memory-engineering.js +284 -0
  210. package/dist/tools/memory-explain.d.ts +34 -0
  211. package/dist/tools/memory-explain.js +109 -0
  212. package/dist/tools/memory-governance.d.ts +171 -0
  213. package/dist/tools/memory-governance.js +224 -0
  214. package/dist/tools/memory-hooks.d.ts +67 -0
  215. package/dist/tools/memory-hooks.js +102 -0
  216. package/dist/tools/memory-working.d.ts +98 -0
  217. package/dist/tools/memory-working.js +101 -0
  218. package/dist/tools/memory_capture_turn.d.ts +66 -0
  219. package/dist/tools/memory_capture_turn.js +85 -0
  220. package/dist/tools/memory_consolidate.d.ts +55 -0
  221. package/dist/tools/memory_consolidate.js +176 -0
  222. package/dist/tools/memory_contradictions.d.ts +53 -0
  223. package/dist/tools/memory_contradictions.js +52 -0
  224. package/dist/tools/memory_graph_query.d.ts +51 -0
  225. package/dist/tools/memory_graph_query.js +35 -0
  226. package/dist/tools/memory_mark_cited.d.ts +43 -0
  227. package/dist/tools/memory_mark_cited.js +63 -0
  228. package/dist/tools/memory_recall.d.ts +77 -0
  229. package/dist/tools/memory_recall.js +81 -0
  230. package/dist/tools/memory_register_skill_hints.d.ts +49 -0
  231. package/dist/tools/memory_register_skill_hints.js +55 -0
  232. package/dist/tools/memory_resolve_session.d.ts +24 -0
  233. package/dist/tools/memory_resolve_session.js +133 -0
  234. package/dist/tools/memory_search.d.ts +146 -0
  235. package/dist/tools/memory_search.js +84 -0
  236. package/dist/tools/search_skills.d.ts +18 -0
  237. package/dist/tools/search_skills.js +17 -0
  238. package/dist/tools/update_doc.d.ts +24 -0
  239. package/dist/tools/update_doc.js +35 -0
  240. package/dist/tools/update_skill.d.ts +30 -0
  241. package/dist/tools/update_skill.js +80 -0
  242. package/dist/types.d.ts +81 -0
  243. package/dist/types.js +4 -0
  244. package/dist/writer.d.ts +30 -0
  245. package/dist/writer.js +220 -0
  246. package/docs/TEMPLATE ONLY +1 -0
  247. package/docs/api/API.md +64 -0
  248. package/docs/api/security/SECURITY.md +58 -0
  249. package/docs/deployment/DockerDeployment.md +30 -0
  250. package/docs/design/Design.md +59 -0
  251. package/docs/design/themes/apple.md +101 -0
  252. package/docs/design/themes/dieter-grid.md +100 -0
  253. package/docs/design/themes/gallery-white.md +100 -0
  254. package/docs/design/themes/pinterest.md +101 -0
  255. package/docs/design/themes/realty-open-house.md +101 -0
  256. package/docs/design/themes/vodafone.md +101 -0
  257. package/docs/hooks/Hooks.md +30 -0
  258. package/docs/schema/Schema.md +35 -0
  259. package/docs/strategy/ScalingStrategy.md +19 -0
  260. package/package.json +88 -0
  261. package/references/accessibility-checklist.md +160 -0
  262. package/references/orchestration-patterns.md +370 -0
  263. package/references/performance-checklist.md +153 -0
  264. package/references/security-checklist.md +134 -0
  265. package/references/testing-patterns.md +236 -0
  266. package/skills/agent/adr-skill/SKILL.md +299 -0
  267. package/skills/agent/agentic-engineering-workflow/SKILL.md +95 -0
  268. package/skills/agent/bootstrap-skill/SKILL.md +103 -0
  269. package/skills/agent/context-engineering/SKILL.md +307 -0
  270. package/skills/agent/debugging-and-error-recovery/SKILL.md +308 -0
  271. package/skills/agent/developer-growth-analysis/SKILL.md +328 -0
  272. package/skills/agent/doubt-driven-skill/SKILL.md +249 -0
  273. package/skills/agent/handover-skill/SKILL.md +112 -0
  274. package/skills/agent/idea-refine-skill/SKILL.md +185 -0
  275. package/skills/agent/idea-refine-skill/examples.md +238 -0
  276. package/skills/agent/idea-refine-skill/frameworks.md +99 -0
  277. package/skills/agent/idea-refine-skill/refinement-criteria.md +113 -0
  278. package/skills/agent/interview-skill/SKILL.md +226 -0
  279. package/skills/agent/planning-skill/SKILL.md +270 -0
  280. package/skills/agent/skill-authoring/SKILL.md +189 -0
  281. package/skills/agent/source-driven-skill/SKILL.md +197 -0
  282. package/skills/agent/spec-driven-skill/SKILL.md +221 -0
  283. package/skills/agent/sync-skill/SKILL.md +92 -0
  284. package/skills/agent/using-agent-skills/SKILL.md +189 -0
  285. package/skills/api/a11y-skill/SKILL.md +88 -0
  286. package/skills/api/api-skill/SKILL.md +123 -0
  287. package/skills/api/auth-skill/SKILL.md +80 -0
  288. package/skills/api/debug-skill/SKILL.md +535 -0
  289. package/skills/api/performance-skill/SKILL.md +100 -0
  290. package/skills/api/testing-skill/SKILL.md +100 -0
  291. package/skills/codebase/code-review-and-quality/SKILL.md +228 -0
  292. package/skills/codebase/code-simplification/SKILL.md +352 -0
  293. package/skills/codebase/code-structure-cleanup/SKILL.md +142 -0
  294. package/skills/codebase/concerns-skill/SKILL.md +89 -0
  295. package/skills/codebase/conventions-skill/SKILL.md +95 -0
  296. package/skills/codebase/doc-management-skill/SKILL.md +47 -0
  297. package/skills/codebase/git-workflow-skill/SKILL.md +312 -0
  298. package/skills/communication/1-3-1-rule/SKILL.md +120 -0
  299. package/skills/design/brutalist-skill/SKILL.md +131 -0
  300. package/skills/design/concept-diagrams/SKILL.md +387 -0
  301. package/skills/design/concept-diagrams/examples/apartment-floor-plan-conversion.md +244 -0
  302. package/skills/design/concept-diagrams/examples/automated-password-reset-flow.md +276 -0
  303. package/skills/design/concept-diagrams/examples/autonomous-llm-research-agent-flow.md +240 -0
  304. package/skills/design/concept-diagrams/examples/banana-journey-tree-to-smoothie.md +161 -0
  305. package/skills/design/concept-diagrams/examples/commercial-aircraft-structure.md +209 -0
  306. package/skills/design/concept-diagrams/examples/cpu-ooo-microarchitecture.md +236 -0
  307. package/skills/design/concept-diagrams/examples/electricity-grid-flow.md +182 -0
  308. package/skills/design/concept-diagrams/examples/feature-film-production-pipeline.md +172 -0
  309. package/skills/design/concept-diagrams/examples/hospital-emergency-department-flow.md +165 -0
  310. package/skills/design/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md +114 -0
  311. package/skills/design/concept-diagrams/examples/place-order-uml-sequence.md +325 -0
  312. package/skills/design/concept-diagrams/examples/smart-city-infrastructure.md +173 -0
  313. package/skills/design/concept-diagrams/examples/smartphone-layer-anatomy.md +154 -0
  314. package/skills/design/concept-diagrams/examples/sn2-reaction-mechanism.md +247 -0
  315. package/skills/design/concept-diagrams/examples/wind-turbine-structure.md +338 -0
  316. package/skills/design/concept-diagrams/references/dashboard-patterns.md +43 -0
  317. package/skills/design/concept-diagrams/references/infrastructure-patterns.md +144 -0
  318. package/skills/design/concept-diagrams/references/physical-shape-cookbook.md +42 -0
  319. package/skills/design/concept-diagrams/templates/template.html +174 -0
  320. package/skills/design/gpt-tasteskill/SKILL.md +114 -0
  321. package/skills/design/minimalist-skill/SKILL.md +116 -0
  322. package/skills/design/output-skill/SKILL.md +87 -0
  323. package/skills/design/redesign-skill/SKILL.md +213 -0
  324. package/skills/design/soft-skill/SKILL.md +132 -0
  325. package/skills/design/stitch-skill/EXAMPLE.md +121 -0
  326. package/skills/design/stitch-skill/SKILL.md +222 -0
  327. package/skills/design/taste-skill/SKILL.md +269 -0
  328. package/skills/devops/ci-cd-skill/SKILL.md +402 -0
  329. package/skills/devops/docker-skill/SKILL.md +297 -0
  330. package/skills/devops/domain-skill/SKILL.md +234 -0
  331. package/skills/lifecycle/changelog-generator/SKILL.md +135 -0
  332. package/skills/lifecycle/incremental-skill/SKILL.md +257 -0
  333. package/skills/lifecycle/migration-skill/SKILL.md +218 -0
  334. package/skills/lifecycle/shipping-skill/SKILL.md +321 -0
  335. package/skills/memory/agent-memory/SKILL.md +122 -0
  336. package/skills/qa/browser-testing-skill/SKILL.md +314 -0
  337. package/skills/ux/adversarial-ux-skill/SKILL.md +168 -0
package/skills/design/concept-diagrams/templates/template.html ADDED
@@ -0,0 +1,174 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Concept Diagram</title>
7
+ <style>
8
+ :root {
9
+ --text-primary: #1a1a18;
10
+ --text-secondary: #5f5e5a;
11
+ --text-tertiary: #88877f;
12
+ --bg-primary: #ffffff;
13
+ --bg-secondary: #f6f5f0;
14
+ --bg-tertiary: #eeedeb;
15
+ --border: rgba(0,0,0,0.15);
16
+ --border-hover: rgba(0,0,0,0.3);
17
+ }
18
+ @media (prefers-color-scheme: dark) {
19
+ :root {
20
+ --text-primary: #e8e6de;
21
+ --text-secondary: #b4b2a9;
22
+ --text-tertiary: #888780;
23
+ --bg-primary: #1a1a18;
24
+ --bg-secondary: #2c2c2a;
25
+ --bg-tertiary: #3d3d3a;
26
+ --border: rgba(255,255,255,0.15);
27
+ --border-hover: rgba(255,255,255,0.3);
28
+ }
29
+ }
30
+ * { margin: 0; padding: 0; box-sizing: border-box; }
31
+ body {
32
+ font-family: system-ui, -apple-system, sans-serif;
33
+ background: var(--bg-tertiary);
34
+ display: flex;
35
+ justify-content: center;
36
+ align-items: flex-start;
37
+ min-height: 100vh;
38
+ padding: 40px 20px;
39
+ }
40
+ .card {
41
+ background: var(--bg-primary);
42
+ border-radius: 16px;
43
+ padding: 32px;
44
+ max-width: 780px;
45
+ width: 100%;
46
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
47
+ }
48
+ h1 {
49
+ font-size: 18px;
50
+ font-weight: 500;
51
+ color: var(--text-primary);
52
+ margin-bottom: 8px;
53
+ }
54
+ .subtitle {
55
+ font-size: 13px;
56
+ color: var(--text-tertiary);
57
+ margin-bottom: 24px;
58
+ }
59
+ svg { width: 100%; height: auto; }
60
+
61
+ /* === SVG Design System Classes === */
62
+
63
+ /* Text classes */
64
+ .t { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); }
65
+ .ts { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--text-secondary); }
66
+ .th { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); font-weight: 500; }
67
+
68
+ /* Neutral box */
69
+ .box { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5px; }
70
+
71
+ /* Arrow */
72
+ .arr { stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; }
73
+
74
+ /* Leader line */
75
+ .leader { stroke: var(--text-tertiary); stroke-width: 0.5px; stroke-dasharray: 4 3; fill: none; }
76
+
77
+ /* Clickable node */
78
+ .node { cursor: pointer; transition: opacity 0.15s; }
79
+ .node:hover { opacity: 0.82; }
80
+
81
+ /* === Color Ramp Classes (light mode) === */
82
+ .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }
83
+ .c-purple > .th, .c-purple > text.th { fill: #3C3489; }
84
+ .c-purple > .ts, .c-purple > text.ts { fill: #534AB7; }
85
+ .c-purple > .t, .c-purple > text.t { fill: #3C3489; }
86
+
87
+ .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }
88
+ .c-teal > .th, .c-teal > text.th { fill: #085041; }
89
+ .c-teal > .ts, .c-teal > text.ts { fill: #0F6E56; }
90
+ .c-teal > .t, .c-teal > text.t { fill: #085041; }
91
+
92
+ .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }
93
+ .c-coral > .th, .c-coral > text.th { fill: #712B13; }
94
+ .c-coral > .ts, .c-coral > text.ts { fill: #993C1D; }
95
+ .c-coral > .t, .c-coral > text.t { fill: #712B13; }
96
+
97
+ .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #FBEAF0; stroke: #993556; }
98
+ .c-pink > .th, .c-pink > text.th { fill: #72243E; }
99
+ .c-pink > .ts, .c-pink > text.ts { fill: #993556; }
100
+ .c-pink > .t, .c-pink > text.t { fill: #72243E; }
101
+
102
+ .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }
103
+ .c-gray > .th, .c-gray > text.th { fill: #444441; }
104
+ .c-gray > .ts, .c-gray > text.ts { fill: #5F5E5A; }
105
+ .c-gray > .t, .c-gray > text.t { fill: #444441; }
106
+
107
+ .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }
108
+ .c-blue > .th, .c-blue > text.th { fill: #0C447C; }
109
+ .c-blue > .ts, .c-blue > text.ts { fill: #185FA5; }
110
+ .c-blue > .t, .c-blue > text.t { fill: #0C447C; }
111
+
112
+ .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #EAF3DE; stroke: #3B6D11; }
113
+ .c-green > .th, .c-green > text.th { fill: #27500A; }
114
+ .c-green > .ts, .c-green > text.ts { fill: #3B6D11; }
115
+ .c-green > .t, .c-green > text.t { fill: #27500A; }
116
+
117
+ .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }
118
+ .c-amber > .th, .c-amber > text.th { fill: #633806; }
119
+ .c-amber > .ts, .c-amber > text.ts { fill: #854F0B; }
120
+ .c-amber > .t, .c-amber > text.t { fill: #633806; }
121
+
122
+ .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #FCEBEB; stroke: #A32D2D; }
123
+ .c-red > .th, .c-red > text.th { fill: #791F1F; }
124
+ .c-red > .ts, .c-red > text.ts { fill: #A32D2D; }
125
+ .c-red > .t, .c-red > text.t { fill: #791F1F; }
126
+
127
+ /* === Dark mode overrides === */
128
+ @media (prefers-color-scheme: dark) {
129
+ .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }
130
+ .c-purple > .th, .c-purple > text.th { fill: #CECBF6; }
131
+ .c-purple > .ts, .c-purple > text.ts { fill: #AFA9EC; }
132
+
133
+ .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }
134
+ .c-teal > .th, .c-teal > text.th { fill: #9FE1CB; }
135
+ .c-teal > .ts, .c-teal > text.ts { fill: #5DCAA5; }
136
+
137
+ .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }
138
+ .c-coral > .th, .c-coral > text.th { fill: #F5C4B3; }
139
+ .c-coral > .ts, .c-coral > text.ts { fill: #F0997B; }
140
+
141
+ .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #72243E; stroke: #ED93B1; }
142
+ .c-pink > .th, .c-pink > text.th { fill: #F4C0D1; }
143
+ .c-pink > .ts, .c-pink > text.ts { fill: #ED93B1; }
144
+
145
+ .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }
146
+ .c-gray > .th, .c-gray > text.th { fill: #D3D1C7; }
147
+ .c-gray > .ts, .c-gray > text.ts { fill: #B4B2A9; }
148
+
149
+ .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }
150
+ .c-blue > .th, .c-blue > text.th { fill: #B5D4F4; }
151
+ .c-blue > .ts, .c-blue > text.ts { fill: #85B7EB; }
152
+
153
+ .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #27500A; stroke: #97C459; }
154
+ .c-green > .th, .c-green > text.th { fill: #C0DD97; }
155
+ .c-green > .ts, .c-green > text.ts { fill: #97C459; }
156
+
157
+ .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }
158
+ .c-amber > .th, .c-amber > text.th { fill: #FAC775; }
159
+ .c-amber > .ts, .c-amber > text.ts { fill: #EF9F27; }
160
+
161
+ .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #791F1F; stroke: #F09595; }
162
+ .c-red > .th, .c-red > text.th { fill: #F7C1C1; }
163
+ .c-red > .ts, .c-red > text.ts { fill: #F09595; }
164
+ }
165
+ </style>
166
+ </head>
167
+ <body>
168
+ <div class="card">
169
+ <h1><!-- DIAGRAM TITLE HERE --></h1>
170
+ <p class="subtitle"><!-- OPTIONAL SUBTITLE HERE --></p>
171
+ <!-- PASTE SVG HERE -->
172
+ </div>
173
+ </body>
174
+ </html>
package/skills/design/gpt-tasteskill/SKILL.md ADDED
@@ -0,0 +1,114 @@
1
+ ---
2
+ name: gpt-tasteskill
3
+ description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
4
+ hints:
5
+ - "Run a simulated Python randomization check in a `<design_plan>` before writing any React/UI code."
6
+ - "Strictly enforce the 2-line maximum for display headlines by adjusting container widths and typography size."
7
+ - "Never allow empty voids or cells in Bento layouts; use `grid-flow-dense` and mathematically check grid coordinates."
8
+ - "Write actual, clean GSAP logic for scroll-triggered pinning, scrub reveals, and magnetic hover effects."
9
+ - "Cleanly avoid cheap meta-labels ('Section 01') and maintain high-contrast legibility for all button states."
10
+ ---
11
+
12
+ # CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING
13
+ You are an elite, award-winning frontend design engineer. Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts.
14
+
15
+ Your goal is to aggressively break these defaults. Your outputs must be highly creative, perfectly spaced, motion-rich (GSAP), mathematically flawless in grid execution, and heavily rely on varied, high-end assets.
16
+
17
+ DO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting.
18
+
19
+ ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)
20
+ LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code.
21
+ Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select:
22
+ - 1 Hero Architecture (from Section 3)
23
+ - 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter)
24
+ - 3 Unique Component Architectures (from Section 6)
25
+ - 2 Advanced GSAP Paradigms (from Section 5)
26
+ You are forbidden from defaulting to the same UI twice. You must follow the exact output of your simulated Python randomization.
27
+
28
+ ## 2. AIDA STRUCTURE & SPACING
29
+ Every page MUST begin with a highly creative, premium Navigation Bar (e.g., floating glass pill, or minimal split nav).
30
+ The rest of the page MUST follow the AIDA framework:
31
+ - **Attention (Hero):** Cinematic, clean, wide layout.
32
+ - **Interest (Features/Bento):** High-density, mathematically perfect grid or interactive typographic components.
33
+ - **Desire (GSAP Scroll/Media):** Pinned sections, horizontal scroll, or text-reveals.
34
+ - **Action (Footer/Pricing):** Massive, high-contrast CTA and clean footer links.
35
+ **SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections must feel like distinct, cinematic chapters. Do not cramp elements together.
36
+
37
+ ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE
38
+ The Hero must breathe. It must NOT be a narrow, 6-line text wall.
39
+ - **The Container Width Fix:** You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). Allow the words to flow horizontally.
40
+ - **The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.
41
+ - **Hero Layout Options (Randomly Assigned via Python):**
42
+ 1. *Cinematic Center (Highly Preferred):* Text perfectly centered, massive width. Below the text, exactly two high-contrast CTAs. Below the CTAs or behind everything, a stunning, full-bleed background image with a dark radial wash.
43
+ 2. *Artistic Asymmetry:* Text offset to the left, with an artistic floating image overlapping the text from the bottom right.
44
+ 3. *Editorial Split:* Text left, image right, but with massive negative space.
45
+ - **Button Contrast:** Buttons must be perfectly legible. Dark background = white text. Light background = dark text. Invisible text is a failure.
46
+ - **BANNED IN HERO:** Do NOT use arbitrary floating stamp/badge icons on the text. Do NOT use pill-tags under the hero. Do NOT place raw data/stats in the hero.
47
+
48
+ ## 4. THE GAPLESS BENTO GRID
49
+ - **Zero Empty Space in Grids:** LLMs notoriously leave blank, dead cells in CSS grids. You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid. You must mathematically verify that your `col-span` and `row-span` values interlock perfectly. No grid shall have a missing corner or empty void.
50
+ - **Card Restraint:** Do not use too many cards. 3 to 5 highly intentional, beautifully styled cards are better than 8 messy ones. Fill them with a mix of large imagery, dense typography, or CSS effects.
51
+
52
+ ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS
53
+ Static interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).
54
+ - **Hover Physics:** Every clickable card and image must react. Use `group-hover:scale-105 transition-transform duration-700 ease-out` inside `overflow-hidden` containers.
55
+ - **Scroll Pinning (GSAP Split):** Pin a section title on the left (`ScrollTrigger pin: true`) while a gallery of elements scrolls upwards on the right side.
56
+ - **Image Scale & Fade Scroll:** Images must start small (`scale: 0.8`). As they scroll into view, they grow to `scale: 1.0`. As they scroll out of view, they smoothly darken and fade out (`opacity: 0.2`).
57
+ - **Scrubbing Text Reveals:** Opacity of central paragraph words starts at 0.1 and scrubs to 1.0 sequentially as the user scrolls.
58
+ - **Card Stacking:** Cards overlap and stack on top of each other dynamically from the bottom as the user scrolls down.
59
+
60
+ ## 6. COMPONENT ARSENAL & CREATIVITY
61
+ Select components from this arsenal based on your randomization:
62
+ - **Inline Typography Images:** Embed small, pill-shaped images directly INSIDE massive headings. Example: `I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.`
63
+ - **Horizontal Accordions:** Vertical slices that expand horizontally on hover to reveal content and imagery.
64
+ - **Infinite Marquee (Trusted Partners):** Smooth, continuously scrolling rows of authentic `@phosphor-icons/react` or large typography.
65
+ - **Feedback/Testimonial Carousel:** Clean, overlapping portrait images next to minimalist typography quotes, controlled by subtle arrows.
66
+
67
+ ## 7. CONTENT, ASSETS & STRICT BANS
68
+ - **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. They look cheap and unprofessional.
69
+ - **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}/1920/1080` and match the keyword to the vibe. Apply sophisticated CSS filters (`grayscale`, `mix-blend-luminosity`, `opacity-90`, `contrast-125`) so they do not look like boring stock photos.
70
+ - **Creative Backgrounds:** Inject subtle, professional ambient design. Use deep radial blurs, grainy mesh gradients, or shifting dark overlays. Avoid flat, boring colors.
71
+ - **Horizontal Scroll Bug:** Wrap the entire page in `<main className="overflow-x-hidden w-full max-w-full">` to absolutely prevent horizontal scrollbars caused by off-screen animations.
72
+
73
+ ## 8. MANDATORY PRE-FLIGHT <design_plan>
74
+ Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
75
+ 1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.
76
+ 2. **AIDA Check:** Confirm the page contains Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), Action (Footer).
77
+ 3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines. Confirm NO stamp icons or spam tags exist.
78
+ 4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces and `grid-flow-dense` is applied.
79
+ 5. **Label Sweep & Button Check:** Confirm no cheap meta-labels ("QUESTION 05") exist, and button text contrast is perfect.
80
+ Only output the UI code after this rigorous verification is complete.
81
+
82
+ ## Overview
83
+ This skill implements high-end Awwwards-tier frontend engineering rules. It overrides default statistical LLM behaviors (such as standard center-aligned templates, poor spacing, and boring typography) by introducing strict design plan checks, mathematical layout verifications, and advanced GSAP motion paradigms.
84
+
85
+ ## When to Use
86
+ - **Use when:** Building highly immersive, interactive marketing sites, cinematic landing pages, portfolio galleries, and award-winning corporate presentations.
87
+ - **NOT for:** internal corporate admin tooling, data-heavy raw database views, or simple text-only documentation sites where heavy motion affects reader focus.
88
+
89
+ ## Workflow
90
+ 1. **Pre-flight Plan:** Draft a `<design_plan>` detailing the simulated seed, the AIDA flow, and the H1 width checks.
91
+ 2. **Setup Spacing & Containers:** Define extremely generous padding (`py-32` or `md:py-48`) and wide containers (`max-w-5xl` to `6xl`) to guarantee text flows as intended.
92
+ 3. **Draft Bento Coordinates:** Construct the bento grids ensuring no dead zones remain in the tracks.
93
+ 4. **Script GSAP ScrollTriggers:** Code high-performance scroll pinned columns, card stacking, and word opacity reveals.
94
+
95
+ ## Common Rationalizations
96
+ | Rationalization | Reality |
97
+ |---|---|
98
+ | A standard linear scroll transition is fine | Standard linear transitions look cheap. Real-world physical momentum requires custom cubic-beziers or GSAP scroll scrubbing. |
99
+ | Using 'SECTION 01' helps structure content | Cheap meta-labels look unprofessional and templated. Replace them with creative subtitles or omit them completely. |
100
+ | The header looks okay wrapping to 5 lines | Multi-line headers look cluttered and hard to scan. Restrict display headings to 2-3 lines max. |
101
+
102
+ ## Red Flags
103
+ - Headlines wrapping to 4, 5, or 6 lines on desktop views.
104
+ - Dead grid elements or uneven card spacing inside a Bento layout.
105
+ - Low-contrast text on primary buttons rendering them unreadable.
106
+ - Presence of generic AI placeholder badges ("ABOUT US", "SECTION 1").
107
+
108
+ ## Verification
109
+ After completing the skill, confirm:
110
+ - [ ] Pre-flight `<design_plan>` with Python seed simulation was generated.
111
+ - [ ] High-contrast, clean typography pairing (Satoshi/Geist/etc.) is implemented.
112
+ - [ ] No `Inter` or standard browser default font is in use.
113
+ - [ ] Every major page section contains significant spatial rhythm.
114
+ - [ ] Clicking and hover states feature premium transitions.
package/skills/design/minimalist-skill/SKILL.md ADDED
@@ -0,0 +1,116 @@
1
+ ---
2
+ name: minimalist-skill
3
+ description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
4
+ hints:
5
+ - "Enforce absolute negative constraints: zero emojis, zero Lucide default stroke-widths, and zero Inter."
6
+ - "Leverage typographic contrast with custom sans-serif fonts for body and variable editorial serif for headlines."
7
+ - "Maintain a warm monochrome palette (e.g. White, Off-white, Charcoal) with extremely desaturated pastels."
8
+ - "Build card features with thin 1px EAEAEA borders, crisp 8px-12px rounded corners, and zero drop shadows."
9
+ - "Implement clean scroll-entry animations using IntersectionObserver or cubic-bezier curves."
10
+ ---
11
+
12
+ # Protocol: Premium Utilitarian Minimalism UI Architect
13
+
14
+ ## Overview
15
+ Name: Premium Utilitarian Minimalism & Editorial UI
16
+ Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.
17
+
18
+ ## 2. Absolute Negative Constraints (Banned Elements)
19
+ The AI must strictly avoid the following generic web development defaults:
20
+ - DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
21
+ - DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
22
+ - DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
23
+ - DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
24
+ - DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
25
+ - DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
26
+ - DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
27
+ - DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
28
+ - DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.
29
+
30
+ ## 3. Typographic Architecture
31
+ The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
32
+ - Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`.
33
+ - Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`).
34
+ - Monospace (Code, Keystrokes, Meta-data): Target: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`.
35
+ - Text Colors: Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous `line-height` of `1.6` for legibility. Secondary text should be muted gray (`#787774`).
36
+
37
+ ## 4. Color Palette (Warm Monochrome + Spot Pastels)
38
+ Color is a scarce resource, utilized only for semantic meaning or subtle accents.
39
+ - Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
40
+ - Primary Surface (Cards): `#FFFFFF` or `#F9F9F8`.
41
+ - Structural Borders / Dividers: Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.
42
+ - Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.
43
+ - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)
44
+ - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)
45
+ - Pale Green: `#EDF3EC` (Text: `#346538`)
46
+ - Pale Yellow: `#FBF3DB` (Text: `#956400`)
47
+
48
+ ## 5. Component Specifications
49
+ - Bento Box Feature Grids:
50
+ - Utilize asymmetrical CSS Grid layouts.
51
+ - Cards must have exactly `border: 1px solid #EAEAEA`.
52
+ - Border-radius must be crisp: `8px` or `12px` maximum.
53
+ - Internal padding must be generous (e.g., `24px` to `40px`).
54
+ - Primary Call-To-Action (Buttons):
55
+ - Solid background `#111111`, text `#FFFFFF`.
56
+ - Slight border-radius (`4px` to `6px`). No box-shadow.
57
+ - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`.
58
+ - Tags & Status Badges:
59
+ - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`).
60
+ - Background must use the defined Muted Pastels.
61
+ - Accordions (FAQ):
62
+ - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`.
63
+ - Use a clean, sharp `+` and `-` icon for the toggle state.
64
+ - Keystroke Micro-UIs:
65
+ - Render shortcuts as physical keys using `<kbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font.
66
+ - Faux-OS Window Chrome:
67
+ - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).
68
+
69
+ ## 6. Iconography & Imagery Directives
70
+ - System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.
71
+ - Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.
72
+ - Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (`opacity: 0.04` warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like `https://picsum.photos/seed/{context}/1200/800` when real assets are unavailable.
73
+ - Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (`radial-gradient` with warm tones at `opacity: 0.03`), or minimal geometric line patterns to add depth without breaking the clean aesthetic.
74
+
75
+ ## 7. Subtle Motion & Micro-Animations
76
+ Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.
77
+ - Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
78
+ - Hover States: Cards lift with an ultra-subtle shadow shift (`box-shadow` transitioning from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`). Buttons respond with `scale(0.98)` on `:active`.
79
+ - Staggered Reveals: Lists and grid items enter with a cascade delay (`animation-delay: calc(var(--index) * 80ms)`). Never mount everything at once.
80
+ - Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (`animation-duration: 20s+`, `opacity: 0.02-0.04`) drifting behind hero sections. Must be applied to a `position: fixed; pointer-events: none` layer. Never on scrolling containers.
81
+ - Performance: Animate exclusively via `transform` and `opacity`. No layout-triggering properties (`top`, `left`, `width`, `height`). Use `will-change: transform` sparingly and only on actively animating elements.
82
+
83
+ ## Workflow
84
+ When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:
85
+ 1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., `py-24` or `py-32` in Tailwind).
86
+ 2. Constrain the main typography content width to `max-w-4xl` or `max-w-5xl`.
87
+ 3. Apply the custom typographic hierarchy and monochromatic color variables immediately.
88
+ 4. Ensure every card, divider, and border adheres strictly to the `1px solid #EAEAEA` rule.
89
+ 5. Add scroll-entry animations to all major content blocks.
90
+ 6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.
91
+ 7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
92
+
93
+ ## When to Use
94
+ - **Use when:** Designing minimal workspace pages, documentation sites, high-end agency portfolios, editorial layouts, or clean personal blogs.
95
+ - **NOT for:** Action-oriented game interfaces, data-heavy high-density financial dashboards (where card boxes are banned), or vibrantly colorful landing pages.
96
+
97
+ ## Common Rationalizations
98
+ | Rationalization | Reality |
99
+ |---|---|
100
+ | A basic drop-shadow makes the card stand out | Thick dropshadows break the flat paper-like aesthetic of premium utilitarian minimalism. Use thin borders or negative space instead. |
101
+ | Using 'Inter' is safe for typography | Inter is extremely generic and immediately signals a basic, uncurated UI. Swapping it for Geist or Satoshi provides instant differentiation. |
102
+ | Emojis make sections feel friendly | Emojis cheapen high-end designs. Use precise line-art icons or geometric SVG symbols. |
103
+
104
+ ## Red Flags
105
+ - Visible drop-shadows under main panels or layout cards.
106
+ - Sudden use of bright primary colors or multi-color gradients.
107
+ - Clashing grays (e.g. placing warm bone cards on a cold slate-gray background).
108
+ - Headline containers stretching edge-to-edge without a reasonable max-width layout constraint.
109
+
110
+ ## Verification
111
+ After completing the skill, confirm:
112
+ - [ ] No emojis are present in any content block or code comment.
113
+ - [ ] Borders are standardized to thin `1px solid` with light gray or subtle transparency.
114
+ - [ ] The font stack uses SF Pro, Geist, or Satoshi instead of standard Inter.
115
+ - [ ] Large sections are separated by significant, clean vertical padding.
116
+ - [ ] The page looks like a highly refined, premium magazine layout rather than a generic SaaS template.
package/skills/design/output-skill/SKILL.md ADDED
@@ -0,0 +1,87 @@
1
+ ---
2
+ name: output-skill
3
+ description: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
4
+ hints:
5
+ - "Never write placeholders or truncation comments like `// ...` or `// implement here`."
6
+ - "Explicitly count all required deliverables and verify that each is fully rendered in the final output."
7
+ - "When outputting extremely long files, pause at a clean logical breakpoint and provide a structured resume instruction."
8
+ - "Deliver actual, copy-pasteable production code rather than structural summaries or code sketches."
9
+ - "Cross-check the output files against the target specification to ensure no methods or blocks were accidentally omitted."
10
+ ---
11
+
12
+ # Full-Output Enforcement
13
+
14
+ ## Baseline
15
+
16
+ Treat every task as production-critical. A partial output is a broken output. Do not optimize for brevity — optimize for completeness. If the user asks for a full file, deliver the full file. If the user asks for 5 components, deliver 5 components. No exceptions.
17
+
18
+ ## Banned Output Patterns
19
+
20
+ The following patterns are hard failures. Never produce them:
21
+
22
+ **In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, bare `...` standing in for omitted code
23
+
24
+ **In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", "similarly for the remaining", "and so on" (when replacing actual content), "I'll leave that as an exercise"
25
+
26
+ **Structural shortcuts:** Outputting a skeleton when the request was for a full implementation. Showing the first and last section while skipping the middle. Replacing repeated logic with one example and a description. Describing what code should do instead of writing it.
27
+
28
+ ## Execution Process
29
+
30
+ 1. **Scope** — Read the full request. Count how many distinct deliverables are expected (files, functions, sections, answers). Lock that number.
31
+ 2. **Build** — Generate every deliverable completely. No partial drafts, no "you can extend this later."
32
+ 3. **Cross-check** — Before output, re-read the original request. Compare your deliverable count against the scope count. If anything is missing, add it before responding.
33
+
34
+ ## Handling Long Outputs
35
+
36
+ When a response approaches the token limit:
37
+
38
+ - Do not compress remaining sections to squeeze them in.
39
+ - Do not skip ahead to a conclusion.
40
+ - Write at full quality up to a clean breakpoint (end of a function, end of a file, end of a section).
41
+ - End with:
42
+
43
+ ```
44
+ [PAUSED — X of Y complete. Send "continue" to resume from: next section name]
45
+ ```
46
+
47
+ On "continue", pick up exactly where you stopped. No recap, no repetition.
48
+
49
+ ## Quick Check
50
+
51
+ Before finalizing any response, verify:
52
+ - No banned patterns from the list above appear anywhere in the output
53
+ - Every item the user requested is present and finished
54
+ - Code blocks contain actual runnable code, not descriptions of what code would do
55
+ - Nothing was shortened to save space
56
+
57
+ ## Overview
58
+ This skill enforces absolute completeness in code generation and textual output. It serves as a guardrail against AI-native shortcuts, placeholders, and truncation behaviors, guaranteeing that the delivered assets are fully realized, production-ready, and directly runnable.
59
+
60
+ ## When to Use
61
+ - **Use when:** The user requests full file creation or major system rewrites, when implementing complex multiple-file setups, or when writing comprehensive architectural designs.
62
+ - **NOT for:** Quick one-off terminal command suggestions, brief yes/no answers, or when explaining a high-level concept where full code isn't required.
63
+
64
+ ## Workflow
65
+ 1. **Identify Deliverables:** Audit the prompt and list exactly how many files, routines, or structural assets must be produced.
66
+ 2. **Implement Unabridged Code:** Write every single line of code without skipping boilerplate, repeated fields, or setup configurations.
67
+ 3. **Establish Token Checkpoints:** If output length nears limits, suspend generation at a clean boundary, and write the standard `[PAUSED — X of Y complete]` marker.
68
+ 4. **Final Content Sweep:** Scan the drafted response for any commented ellipsis (`// ...`) or filler text, replacing them with complete implementations before finalizing.
69
+
70
+ ## Common Rationalizations
71
+ | Rationalization | Reality |
72
+ |---|---|
73
+ | The user knows how to write the remaining handlers | The user expects complete, working code. Leaving stubs wastes their time and leads to integration bugs. |
74
+ | It saves space to show only the changed block | Swapping parts of a file often leads to copy-paste alignment errors. If a full file rewrite is requested, output the entire file. |
75
+ | I can write the imports and skip the details | Partial code blocks cannot be verified or compiled. Deliver full imports, variables, and logic. |
76
+
77
+ ## Red Flags
78
+ - Comments like `// rest of the code is unchanged` or `/* ... */` in any code segment.
79
+ - Outlines or lists of steps instead of complete file contents.
80
+ - Direct suggestions to "implement this function as an exercise."
81
+
82
+ ## Verification
83
+ After completing the skill, confirm:
84
+ - [ ] No placeholder stubs or ellipses exist in any code snippet.
85
+ - [ ] Every single file, component, and method listed in the scope has been fully output.
86
+ - [ ] The generated output compiles or runs with zero omitted dependencies.
87
+ - [ ] Large outputs have been correctly split and resumed with clear, clean instructions.