@jaimevalasek/aioson 1.5.1 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (341) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +729 -226
  3. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  4. package/docs/design-previews/aurora-command-ui.html +682 -0
  5. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  6. package/docs/design-previews/bold-editorial-ui.html +717 -0
  7. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  8. package/docs/design-previews/clean-saas-ui.html +549 -0
  9. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  10. package/docs/design-previews/cognitive-core-ui.html +463 -0
  11. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  12. package/docs/design-previews/glassmorphism-ui.html +886 -0
  13. package/docs/design-previews/index.html +699 -0
  14. package/docs/design-previews/interface-design-website.html +1187 -0
  15. package/docs/design-previews/interface-design.html +513 -0
  16. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  17. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  18. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  19. package/docs/design-previews/premium-command-center-ui.html +552 -0
  20. package/docs/design-previews/pt.squarespace.com-homepage.html +889 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/integrations/sdlc-genius-boundary.md +76 -0
  25. package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
  26. package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
  27. package/docs/integrations/sdlc-genius-review-samples.md +86 -0
  28. package/docs/pt/README.md +10 -0
  29. package/docs/pt/agent-sharding.md +132 -0
  30. package/docs/pt/agentes.md +9 -2
  31. package/docs/pt/busca-de-contexto.md +129 -0
  32. package/docs/pt/cache-de-contexto.md +156 -0
  33. package/docs/pt/comandos-cli.md +915 -1
  34. package/docs/pt/design-hybrid-forge.md +356 -0
  35. package/docs/pt/devlog-pipeline.md +270 -0
  36. package/docs/pt/fluxo-artefatos.md +178 -0
  37. package/docs/pt/hooks-session-guard.md +454 -0
  38. package/docs/pt/inicio-rapido.md +54 -3
  39. package/docs/pt/inteligencia-adaptativa.md +324 -0
  40. package/docs/pt/monitor-de-contexto.md +158 -0
  41. package/docs/pt/recuperacao-de-sessao.md +125 -0
  42. package/docs/pt/sandbox.md +125 -0
  43. package/docs/pt/sdd-automation-scripts.md +557 -0
  44. package/docs/pt/site-forge.md +309 -0
  45. package/docs/pt/skills.md +98 -6
  46. package/docs/pt/spec-learnings-pipeline.md +265 -0
  47. package/package.json +1 -1
  48. package/src/a2a/client.js +165 -0
  49. package/src/a2a/server.js +223 -0
  50. package/src/agent-loader.js +280 -0
  51. package/src/cli.js +329 -1
  52. package/src/commands/agent-audit.js +397 -0
  53. package/src/commands/agent-export-skill.js +229 -0
  54. package/src/commands/agent-loader.js +85 -0
  55. package/src/commands/artifact-validate.js +189 -0
  56. package/src/commands/brief-gen.js +405 -0
  57. package/src/commands/brief-validate.js +65 -0
  58. package/src/commands/classify.js +256 -0
  59. package/src/commands/context-cache.js +90 -0
  60. package/src/commands/context-compact.js +49 -0
  61. package/src/commands/context-health.js +175 -0
  62. package/src/commands/context-monitor.js +163 -0
  63. package/src/commands/context-search.js +66 -0
  64. package/src/commands/context-trim.js +177 -0
  65. package/src/commands/design-hybrid-options.js +385 -0
  66. package/src/commands/detect-test-runner.js +55 -0
  67. package/src/commands/devlog-export-brains.js +27 -0
  68. package/src/commands/devlog-process.js +292 -0
  69. package/src/commands/devlog-watch.js +131 -0
  70. package/src/commands/feature-close.js +165 -0
  71. package/src/commands/gate-check.js +228 -0
  72. package/src/commands/health.js +214 -0
  73. package/src/commands/hooks-emit.js +253 -0
  74. package/src/commands/hooks-install.js +347 -0
  75. package/src/commands/init.js +54 -13
  76. package/src/commands/install.js +52 -13
  77. package/src/commands/learning-auto-promote.js +195 -0
  78. package/src/commands/learning-evolve.js +364 -0
  79. package/src/commands/learning-export.js +103 -0
  80. package/src/commands/learning-rollback.js +164 -0
  81. package/src/commands/live.js +59 -1
  82. package/src/commands/pattern-detect.js +33 -0
  83. package/src/commands/preflight-context.js +30 -0
  84. package/src/commands/preflight.js +208 -0
  85. package/src/commands/pulse-update.js +130 -0
  86. package/src/commands/recovery.js +43 -0
  87. package/src/commands/runner-daemon.js +274 -0
  88. package/src/commands/runner-plan.js +70 -0
  89. package/src/commands/runner-queue-from-plan.js +166 -0
  90. package/src/commands/runner-queue.js +189 -0
  91. package/src/commands/runner-run.js +129 -0
  92. package/src/commands/runtime.js +47 -1
  93. package/src/commands/sandbox.js +37 -0
  94. package/src/commands/self-implement-loop.js +256 -0
  95. package/src/commands/session-guard.js +218 -0
  96. package/src/commands/setup-context.js +22 -2
  97. package/src/commands/setup.js +178 -0
  98. package/src/commands/sizing.js +165 -0
  99. package/src/commands/skill.js +144 -32
  100. package/src/commands/spec-checkpoint.js +177 -0
  101. package/src/commands/spec-status.js +79 -0
  102. package/src/commands/spec-sync.js +190 -0
  103. package/src/commands/spec-tasks.js +288 -0
  104. package/src/commands/squad-autorun.js +1220 -0
  105. package/src/commands/squad-bus.js +217 -0
  106. package/src/commands/squad-card.js +149 -0
  107. package/src/commands/squad-daemon.js +134 -0
  108. package/src/commands/squad-dependency-graph.js +164 -0
  109. package/src/commands/squad-review.js +106 -0
  110. package/src/commands/squad-scaffold.js +55 -0
  111. package/src/commands/squad-tool-register.js +157 -0
  112. package/src/commands/state-save.js +122 -0
  113. package/src/commands/tool-registry-cmd.js +232 -0
  114. package/src/commands/update.js +9 -0
  115. package/src/commands/verify-gate.js +572 -0
  116. package/src/commands/workflow-execute.js +241 -0
  117. package/src/constants.js +18 -0
  118. package/src/context-cache.js +159 -0
  119. package/src/context-search.js +326 -0
  120. package/src/design-variation-catalog.js +503 -0
  121. package/src/i18n/messages/en.js +32 -2
  122. package/src/i18n/messages/es.js +30 -2
  123. package/src/i18n/messages/fr.js +30 -2
  124. package/src/i18n/messages/pt-BR.js +32 -2
  125. package/src/install-animation.js +260 -0
  126. package/src/install-profile.js +143 -0
  127. package/src/install-wizard.js +475 -0
  128. package/src/installer.js +44 -10
  129. package/src/lib/health-check.js +158 -0
  130. package/src/lib/hook-protocol.js +76 -0
  131. package/src/mcp/apps/squad-dashboard/app.js +163 -0
  132. package/src/mcp/apps/squad-dashboard/index.html +261 -0
  133. package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
  134. package/src/mcp/resources/squad-state.js +130 -0
  135. package/src/parser.js +7 -1
  136. package/src/preflight-engine.js +443 -0
  137. package/src/recovery-context-session.js +154 -0
  138. package/src/runner/cascade.js +97 -0
  139. package/src/runner/cli-launcher.js +109 -0
  140. package/src/runner/plan-importer.js +63 -0
  141. package/src/runner/queue-store.js +159 -0
  142. package/src/runtime-store.js +158 -4
  143. package/src/sandbox.js +177 -0
  144. package/src/squad/agent-teams-adapter.js +264 -0
  145. package/src/squad/brief-validator.js +350 -0
  146. package/src/squad/bus-bridge.js +140 -0
  147. package/src/squad/context-compactor.js +265 -0
  148. package/src/squad/cross-ai-synthesizer.js +250 -0
  149. package/src/squad/hooks-generator.js +196 -0
  150. package/src/squad/inter-squad-events.js +175 -0
  151. package/src/squad/intra-bus.js +345 -0
  152. package/src/squad/learning-extractor.js +213 -0
  153. package/src/squad/pattern-detector.js +365 -0
  154. package/src/squad/preflight-context.js +296 -0
  155. package/src/squad/recovery-context.js +242 -71
  156. package/src/squad/reflection.js +365 -0
  157. package/src/squad/squad-scaffold.js +177 -0
  158. package/src/squad/state-manager.js +310 -0
  159. package/src/squad/task-decomposer.js +652 -0
  160. package/src/squad/verify-gate.js +303 -0
  161. package/src/tool-executor.js +94 -0
  162. package/src/updater.js +10 -3
  163. package/src/worker-runner.js +186 -1
  164. package/template/.aioson/agents/analyst.md +119 -3
  165. package/template/.aioson/agents/architect.md +98 -0
  166. package/template/.aioson/agents/design-hybrid-forge.md +141 -0
  167. package/template/.aioson/agents/dev.md +335 -14
  168. package/template/.aioson/agents/deyvin.md +117 -2
  169. package/template/.aioson/agents/discovery-design-doc.md +44 -0
  170. package/template/.aioson/agents/genome.md +14 -0
  171. package/template/.aioson/agents/neo.md +78 -1
  172. package/template/.aioson/agents/orache.md +50 -4
  173. package/template/.aioson/agents/orchestrator.md +197 -1
  174. package/template/.aioson/agents/pm.md +93 -0
  175. package/template/.aioson/agents/product.md +77 -4
  176. package/template/.aioson/agents/profiler-enricher.md +14 -0
  177. package/template/.aioson/agents/profiler-forge.md +14 -0
  178. package/template/.aioson/agents/profiler-researcher.md +14 -0
  179. package/template/.aioson/agents/qa.md +249 -19
  180. package/template/.aioson/agents/setup.md +144 -12
  181. package/template/.aioson/agents/sheldon.md +237 -11
  182. package/template/.aioson/agents/site-forge.md +1753 -0
  183. package/template/.aioson/agents/squad.md +162 -0
  184. package/template/.aioson/agents/tester.md +209 -0
  185. package/template/.aioson/agents/ux-ui.md +34 -1
  186. package/template/.aioson/brains/README.md +128 -0
  187. package/template/.aioson/brains/_index.json +16 -0
  188. package/template/.aioson/brains/scripts/query.js +103 -0
  189. package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
  190. package/template/.aioson/config.md +158 -13
  191. package/template/.aioson/constitution.md +33 -0
  192. package/template/.aioson/context/forensics/.gitkeep +0 -0
  193. package/template/.aioson/context/project-pulse.md +34 -0
  194. package/template/.aioson/context/seeds/seed-example.md +27 -0
  195. package/template/.aioson/context/user-profile.md +42 -0
  196. package/template/.aioson/docs/LAYERS.md +79 -0
  197. package/template/.aioson/docs/README.md +76 -0
  198. package/template/.aioson/docs/example-external-api-context.md +72 -0
  199. package/template/.aioson/locales/en/agents/architect.md +17 -0
  200. package/template/.aioson/locales/en/agents/dev.md +79 -13
  201. package/template/.aioson/locales/en/agents/orache.md +6 -0
  202. package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
  203. package/template/.aioson/locales/en/agents/product.md +50 -0
  204. package/template/.aioson/locales/en/agents/setup.md +33 -1
  205. package/template/.aioson/locales/en/agents/sheldon.md +115 -0
  206. package/template/.aioson/locales/en/agents/squad.md +14 -0
  207. package/template/.aioson/locales/en/agents/tester.md +6 -0
  208. package/template/.aioson/locales/es/agents/analyst.md +2 -0
  209. package/template/.aioson/locales/es/agents/architect.md +19 -0
  210. package/template/.aioson/locales/es/agents/dev.md +64 -4
  211. package/template/.aioson/locales/es/agents/deyvin.md +2 -0
  212. package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
  213. package/template/.aioson/locales/es/agents/genome.md +2 -0
  214. package/template/.aioson/locales/es/agents/neo.md +2 -0
  215. package/template/.aioson/locales/es/agents/orache.md +2 -0
  216. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  217. package/template/.aioson/locales/es/agents/pair.md +2 -0
  218. package/template/.aioson/locales/es/agents/pm.md +2 -0
  219. package/template/.aioson/locales/es/agents/product.md +52 -0
  220. package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
  221. package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
  222. package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
  223. package/template/.aioson/locales/es/agents/qa.md +2 -0
  224. package/template/.aioson/locales/es/agents/setup.md +35 -1
  225. package/template/.aioson/locales/es/agents/sheldon.md +117 -0
  226. package/template/.aioson/locales/es/agents/squad.md +16 -0
  227. package/template/.aioson/locales/es/agents/tester.md +9 -0
  228. package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
  229. package/template/.aioson/locales/fr/agents/analyst.md +2 -0
  230. package/template/.aioson/locales/fr/agents/architect.md +19 -0
  231. package/template/.aioson/locales/fr/agents/dev.md +64 -4
  232. package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
  233. package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
  234. package/template/.aioson/locales/fr/agents/genome.md +2 -0
  235. package/template/.aioson/locales/fr/agents/neo.md +2 -0
  236. package/template/.aioson/locales/fr/agents/orache.md +2 -0
  237. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  238. package/template/.aioson/locales/fr/agents/pair.md +2 -0
  239. package/template/.aioson/locales/fr/agents/pm.md +2 -0
  240. package/template/.aioson/locales/fr/agents/product.md +52 -0
  241. package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
  242. package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
  243. package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
  244. package/template/.aioson/locales/fr/agents/qa.md +2 -0
  245. package/template/.aioson/locales/fr/agents/setup.md +35 -1
  246. package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
  247. package/template/.aioson/locales/fr/agents/squad.md +16 -0
  248. package/template/.aioson/locales/fr/agents/tester.md +9 -0
  249. package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
  250. package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
  251. package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
  252. package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
  253. package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
  254. package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
  255. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
  256. package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
  257. package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
  258. package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
  259. package/template/.aioson/locales/pt-BR/agents/setup.md +134 -19
  260. package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
  261. package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
  262. package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
  263. package/template/.aioson/rules/README.md +69 -0
  264. package/template/.aioson/rules/data-format-convention.md +136 -0
  265. package/template/.aioson/rules/example-monetary-values.md +30 -0
  266. package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
  267. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  268. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  269. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  270. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  271. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  272. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  273. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  274. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  275. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  276. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  277. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  278. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  279. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  280. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  281. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  282. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  283. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  284. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  285. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  286. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  287. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  288. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  289. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  290. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  291. package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
  292. package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
  293. package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
  294. package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
  295. package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
  296. package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
  297. package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
  298. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +46 -0
  299. package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
  300. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  301. package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
  302. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  303. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  304. package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
  305. package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
  306. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  307. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +101 -0
  308. package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
  309. package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
  310. package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
  311. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  312. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +147 -0
  313. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  314. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  315. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +306 -0
  316. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +149 -0
  317. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +208 -0
  318. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  319. package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
  320. package/template/.aioson/skills/static/context-budget-guide.md +46 -0
  321. package/template/.aioson/skills/static/harness-sensors.md +74 -0
  322. package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
  323. package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
  324. package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
  325. package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
  326. package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
  327. package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
  328. package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
  329. package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
  330. package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
  331. package/template/.aioson/skills/static/threejs-patterns.md +929 -0
  332. package/template/.aioson/skills/static/web-research-cache.md +112 -0
  333. package/template/.aioson/tasks/implementation-plan.md +21 -1
  334. package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
  335. package/template/.claude/commands/aioson/agent/orache.md +5 -0
  336. package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
  337. package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
  338. package/template/AGENTS.md +75 -1
  339. package/template/CLAUDE.md +31 -0
  340. package/template/OPENCODE.md +4 -0
  341. package/template/researchs/.gitkeep +0 -0
package/template/.aioson/skills/static/static-html-patterns/structure.md ADDED
@@ -0,0 +1,209 @@
1
+ # Structure — HTML Production Shell
2
+
3
+ > Load when building any landing page. Contains the Hero Law and the complete semantic HTML skeleton.
4
+
5
+ ---
6
+
7
+ ## 0. THE HERO LAW (read this first, it overrides everything)
8
+
9
+ > **The hero section is NEVER a grid of cards.**
10
+ > The hero is: full viewport height — background (animated mesh OR full-bleed photograph) — ONE large headline — ONE or TWO supporting lines — TWO buttons — optional social proof strip below. That is it.
11
+ >
12
+ > Card grids belong in the Features or Tools section. A hero with cards looks like a dashboard, not a landing page.
13
+ >
14
+ > For Bold & Cinematic: the hero background must be ALIVE (animated mesh gradient or parallax image).
15
+ > For Clean & Luminous: the hero background must have generous whitespace and a large, confident headline.
16
+
17
+ ---
18
+
19
+ ## 1. HTML Structure — The Production Shell
20
+
21
+ Every landing page follows this semantic skeleton:
22
+
23
+ ```html
24
+ <!DOCTYPE html>
25
+ <html lang="pt-BR">
26
+ <head>
27
+ <meta charset="UTF-8">
28
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
29
+ <meta name="description" content="[real product description]">
30
+ <title>[Product Name] — [Value Proposition]</title>
31
+
32
+ <!-- Preload critical fonts (eliminate layout shift) -->
33
+ <link rel="preconnect" href="https://fonts.googleapis.com">
34
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35
+ <link href="https://fonts.googleapis.com/css2?family=[ChosenFont]:wght@400;500;600;700;800&display=swap" rel="stylesheet">
36
+
37
+ <!-- Inline critical CSS (above-the-fold only: reset, header, hero) -->
38
+ <style>
39
+ /* === CRITICAL CSS — inline here, rest in external file === */
40
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
41
+ html { font-size: 16px; scroll-behavior: smooth; }
42
+ body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
43
+ img { max-width: 100%; display: block; object-fit: cover; }
44
+ a { text-decoration: none; color: inherit; }
45
+ button { cursor: pointer; border: none; font: inherit; }
46
+ /* rest of CSS below */
47
+ </style>
48
+ </head>
49
+ <body>
50
+
51
+ <!-- HEADER: sticky, transparent → solid on scroll -->
52
+ <header class="header" id="header">
53
+ <div class="container header__inner">
54
+ <a href="/" class="header__logo" aria-label="Home">
55
+ <span class="logo-mark">●</span>
56
+ <span class="logo-text">ProductName</span>
57
+ </a>
58
+ <nav class="header__nav" aria-label="Main navigation">
59
+ <a href="#features">Features</a>
60
+ <a href="#how-it-works">How it works</a>
61
+ <a href="#pricing">Pricing</a>
62
+ </nav>
63
+ <a href="#cta" class="btn btn--primary btn--sm">Get started</a>
64
+ <button class="header__burger" aria-label="Open menu" aria-expanded="false">
65
+ <span></span><span></span><span></span>
66
+ </button>
67
+ </div>
68
+ </header>
69
+
70
+ <main>
71
+ <!-- HERO: full viewport, image/gradient + content -->
72
+ <section class="hero" aria-labelledby="hero-title">
73
+ <div class="hero__bg">
74
+ <img src="https://images.unsplash.com/photo-[id]?w=1920&q=80&fit=crop"
75
+ alt="" role="presentation" loading="eager" fetchpriority="high">
76
+ <div class="hero__overlay" aria-hidden="true"></div>
77
+ </div>
78
+ <div class="container hero__content">
79
+ <span class="hero__label reveal">Category / Tagline</span>
80
+ <h1 class="hero__title reveal reveal-delay-1" id="hero-title">
81
+ Bold Headline That <em class="gradient-text">Changes Everything</em>
82
+ </h1>
83
+ <p class="hero__subtitle reveal reveal-delay-2">
84
+ Supporting text that adds real context — who benefits, how fast, what outcome.
85
+ </p>
86
+ <div class="hero__actions reveal reveal-delay-3">
87
+ <a href="#signup" class="btn btn--primary btn--lg">Primary CTA</a>
88
+ <a href="#demo" class="btn btn--ghost btn--lg">
89
+ <span class="btn__icon" aria-hidden="true">▶</span>
90
+ Watch demo
91
+ </a>
92
+ </div>
93
+ <div class="hero__social-proof reveal reveal-delay-4">
94
+ <span>Trusted by 2,000+ teams</span>
95
+ <div class="avatar-group" aria-label="User avatars">
96
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
97
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
98
+ <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=40&h=40&fit=crop&crop=face" alt="User" width="40" height="40">
99
+ </div>
100
+ <div class="star-rating" aria-label="5 out of 5 stars">★★★★★ <span>4.9</span></div>
101
+ </div>
102
+ </div>
103
+ <!-- Decorative floating elements (aria-hidden) -->
104
+ <div class="hero__decor" aria-hidden="true">
105
+ <div class="orb orb--1"></div>
106
+ <div class="orb orb--2"></div>
107
+ <div class="orb orb--3"></div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- LOGOS: social proof bar -->
112
+ <section class="logos-bar" aria-label="Trusted by">
113
+ <div class="container">
114
+ <p class="logos-bar__label">Trusted by teams at</p>
115
+ <div class="logos-bar__track">
116
+ <!-- Logo images or text placeholders -->
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- FEATURES: 3 or 6 cards in grid -->
122
+ <section class="features" id="features" aria-labelledby="features-title">
123
+ <div class="container">
124
+ <div class="section-header">
125
+ <span class="section-label">Features</span>
126
+ <h2 class="section-title" id="features-title">Everything you need</h2>
127
+ <p class="section-subtitle">One sentence expanding on the value.</p>
128
+ </div>
129
+ <div class="features__grid">
130
+ <article class="feature-card reveal">
131
+ <div class="feature-card__icon" aria-hidden="true">⚡</div>
132
+ <h3 class="feature-card__title">Feature Name</h3>
133
+ <p class="feature-card__desc">What it does and why it matters to the user.</p>
134
+ </article>
135
+ <!-- repeat 5 more -->
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- HOW IT WORKS: numbered steps, alternating layout -->
141
+ <section class="how-it-works" id="how-it-works" aria-labelledby="hiw-title">
142
+ <div class="container">
143
+ <div class="section-header">
144
+ <span class="section-label">Process</span>
145
+ <h2 class="section-title" id="hiw-title">How it works</h2>
146
+ </div>
147
+ <ol class="steps" role="list">
148
+ <li class="step reveal">
149
+ <span class="step__number" aria-hidden="true">01</span>
150
+ <div class="step__content">
151
+ <h3>Step title</h3>
152
+ <p>Explanation focused on what the user does and gets.</p>
153
+ </div>
154
+ <div class="step__visual">
155
+ <img src="https://images.unsplash.com/photo-[id]?w=600&q=80" alt="[descriptive alt]" loading="lazy">
156
+ </div>
157
+ </li>
158
+ </ol>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- TESTIMONIALS -->
163
+ <section class="testimonials" aria-labelledby="testimonials-title">
164
+ <div class="container">
165
+ <h2 class="section-title" id="testimonials-title">What teams say</h2>
166
+ <div class="testimonials__grid">
167
+ <blockquote class="testimonial-card reveal">
168
+ <p class="testimonial-card__quote">"Specific outcome they achieved using the product."</p>
169
+ <footer class="testimonial-card__author">
170
+ <img src="https://images.unsplash.com/photo-[id]?w=48&h=48&fit=crop&crop=face"
171
+ alt="[Name]" width="48" height="48" loading="lazy">
172
+ <div>
173
+ <cite class="testimonial-card__name">Full Name</cite>
174
+ <span class="testimonial-card__role">Role, Company</span>
175
+ </div>
176
+ </footer>
177
+ </blockquote>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- FINAL CTA -->
183
+ <section class="cta-final" id="cta" aria-labelledby="cta-title">
184
+ <div class="container">
185
+ <h2 class="cta-final__title reveal" id="cta-title">Ready to get started?</h2>
186
+ <p class="cta-final__subtitle reveal reveal-delay-1">Join thousands of teams already using [Product].</p>
187
+ <a href="#signup" class="btn btn--primary btn--xl reveal reveal-delay-2">Start for free</a>
188
+ <p class="cta-final__note">No credit card required · Cancel anytime</p>
189
+ </div>
190
+ </section>
191
+ </main>
192
+
193
+ <footer class="footer" role="contentinfo">
194
+ <div class="container footer__inner">
195
+ <a href="/" class="footer__logo" aria-label="Home">ProductName</a>
196
+ <nav class="footer__nav" aria-label="Footer navigation">
197
+ <a href="/privacy">Privacy</a>
198
+ <a href="/terms">Terms</a>
199
+ <a href="/contact">Contact</a>
200
+ </nav>
201
+ <p class="footer__copy">© 2026 ProductName. All rights reserved.</p>
202
+ </div>
203
+ </footer>
204
+
205
+ <!-- Scripts: async, non-blocking -->
206
+ <script async src="main.js"></script>
207
+ </body>
208
+ </html>
209
+ ```
package/template/.aioson/skills/static/static-html-patterns/utilities.md ADDED
@@ -0,0 +1,190 @@
1
+ # Utilities — Performance, JS, BEM, Responsive, A11y, Images, SCSS
2
+
3
+ > Load when you need: performance rules, minimal JS patterns, naming conventions,
4
+ > responsive strategy, accessibility checklist, Unsplash image IDs, or SCSS architecture.
5
+ > These sections are short — all included in one file for convenience.
6
+
7
+ ---
8
+
9
+ ## 3. Performance Patterns (always apply)
10
+
11
+ ```html
12
+ <!-- Critical: preconnect fonts before CSS -->
13
+ <link rel="preconnect" href="https://fonts.googleapis.com">
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15
+
16
+ <!-- Hero image: eager + fetchpriority for LCP -->
17
+ <img src="hero.jpg" loading="eager" fetchpriority="high" alt="">
18
+
19
+ <!-- Below-fold images: lazy -->
20
+ <img src="feature.jpg" loading="lazy" alt="[descriptive]">
21
+
22
+ <!-- Non-critical CSS: preload then apply -->
23
+ <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
24
+ <noscript><link rel="stylesheet" href="styles.css"></noscript>
25
+
26
+ <!-- Scripts: always async or defer -->
27
+ <script async src="analytics.js"></script>
28
+ <script defer src="interactions.js"></script>
29
+ ```
30
+
31
+ **Critical CSS inline rule:** Only header + hero CSS in `<style>` tag. Everything else in external file.
32
+
33
+ ---
34
+
35
+ ## 4. Minimal JavaScript (interactions only)
36
+
37
+ ```js
38
+ // Header: add .scrolled class after scroll
39
+ window.addEventListener('scroll', () => {
40
+ document.getElementById('header')
41
+ .classList.toggle('scrolled', window.scrollY > 40);
42
+ }, { passive: true });
43
+
44
+ // Mobile menu toggle
45
+ document.querySelector('.header__burger')?.addEventListener('click', function() {
46
+ const expanded = this.getAttribute('aria-expanded') === 'true';
47
+ this.setAttribute('aria-expanded', String(!expanded));
48
+ document.querySelector('.header__nav').classList.toggle('open', !expanded);
49
+ });
50
+
51
+ // Scroll reveal with IntersectionObserver
52
+ const observer = new IntersectionObserver((entries) => {
53
+ entries.forEach(entry => {
54
+ if (entry.isIntersecting) {
55
+ entry.target.classList.add('revealed');
56
+ observer.unobserve(entry.target);
57
+ }
58
+ });
59
+ }, { threshold: 0.15 });
60
+ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
61
+
62
+ // Counter animation (for stats section)
63
+ function animateCounter(el) {
64
+ const target = +el.dataset.target;
65
+ const duration = 1500;
66
+ const start = performance.now();
67
+ requestAnimationFrame(function tick(now) {
68
+ const progress = Math.min((now - start) / duration, 1);
69
+ const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
70
+ el.textContent = Math.round(eased * target).toLocaleString();
71
+ if (progress < 1) requestAnimationFrame(tick);
72
+ });
73
+ }
74
+ ```
75
+
76
+ ---
77
+
78
+ ## 5. CSS Naming Convention (BEM-lite)
79
+
80
+ ```
81
+ component → .hero, .feature-card, .testimonial-card
82
+ component__element → .hero__title, .feature-card__icon
83
+ component--modifier → .btn--primary, .btn--lg, .card--glow-border
84
+ ```
85
+
86
+ Rules:
87
+ - Class names are lowercase, hyphenated
88
+ - No deep nesting in CSS (max 2 levels: `.hero .hero__content`)
89
+ - No `id` for styling — only for anchor links and `aria-labelledby`
90
+ - Utility classes for single-purpose overrides: `.sr-only`, `.reveal`, `.gradient-text`
91
+
92
+ ---
93
+
94
+ ## 6. Responsive Strategy
95
+
96
+ **Do NOT just reflow columns on mobile. Also:**
97
+ - Hide secondary navigation links → show only logo + CTA + burger
98
+ - Reduce heading sizes with `clamp()` instead of media queries for font-size
99
+ - Stack `.hero__actions` buttons vertically below 480px
100
+ - Remove decorative orbs/blobs on mobile (performance + layout stability)
101
+ - Simplify card grids: 3 → 2 → 1 columns
102
+ - Show testimonials as carousel or stacked, not 3-column grid
103
+
104
+ ```css
105
+ /* Prefer clamp() for fluid typography over breakpoint-heavy font-size */
106
+ .hero__title { font-size: clamp(2rem, 6vw, 4.5rem); }
107
+ .section-title { font-size: clamp(1.875rem, 4vw, 3rem); }
108
+
109
+ /* Hide decorative elements on mobile */
110
+ @media (max-width: 768px) {
111
+ .hero__decor { display: none; }
112
+ .header__nav { display: none; }
113
+ .header__nav.open { display: flex; flex-direction: column; }
114
+ .hero__actions { flex-direction: column; align-items: center; }
115
+ }
116
+ ```
117
+
118
+ ---
119
+
120
+ ## 7. Accessibility Checklist (non-negotiable)
121
+
122
+ - [ ] All `<img>` have `alt` — decorative images use `alt=""` + `role="presentation"`
123
+ - [ ] All interactive elements reachable by `Tab` and operable by `Enter`/`Space`
124
+ - [ ] `:focus-visible` styles visible and clear (2px outline, offset, accent color)
125
+ - [ ] All `<button>` have `type="button"` or `type="submit"`
126
+ - [ ] Icon-only buttons have `aria-label`
127
+ - [ ] Sections have `aria-labelledby` pointing to their heading `id`
128
+ - [ ] Color contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI controls
129
+ - [ ] `prefers-reduced-motion: reduce` disables all animations
130
+ - [ ] Mobile menu uses `aria-expanded` toggling
131
+ - [ ] Footer `<nav>` has `aria-label="Footer navigation"` distinct from header nav
132
+
133
+ ---
134
+
135
+ ## 8. Curated Unsplash Images by Domain
136
+
137
+ Format: `https://images.unsplash.com/photo-{ID}?w=1920&q=80&fit=crop`
138
+
139
+ | Domain | Hero | Feature/Section |
140
+ |---|---|---|
141
+ | Tech/AI/SaaS | `1518770660439-4636190af475` | `1551288049-bebda4e38f71` |
142
+ | Business/Corp | `1497366216548-37526070297c` | `1522071820081-009f0129c71c` |
143
+ | Creative/Agency | `1558618666-fcd25c85cd64` | `1504607798333-52a30db54a5d` |
144
+ | Wellness/Health | `1506905925346-21bda4d32df4` | `1571019613454-1cb2f99b2d8b` |
145
+ | Food/Restaurant | `1414235077428-338989a2e8c0` | `1555939594-58d7cb561ad1` |
146
+ | Architecture | `1486325212027-8081e485255e` | `1460317442991-0ec209397118` |
147
+ | Nature/Travel | `1441974231531-c6227db76b6e` | `1506197603052-3cc9c3a201bd` |
148
+ | People/Teams | `1522202176988-66273c2fd55f` | `1582213782179-e0d53f98f2ca` |
149
+ | Avatars (face) | `1535713875002-d1d0cf377fde` | `1494790108377-be9c29b29330` |
150
+
151
+ Face crops (for testimonials): append `&w=48&h=48&fit=crop&crop=face`
152
+
153
+ ---
154
+
155
+ ## 11. SCSS Architecture (for larger projects)
156
+
157
+ ```
158
+ assets/scss/
159
+ base/
160
+ _reset.scss ← minimal reset + box-model
161
+ _typography.scss ← font imports, type scale, body
162
+ _helpers.scss ← .sr-only, .reveal, .gradient-text, .container
163
+ tokens/
164
+ _colors.scss ← CSS custom properties :root block
165
+ _spacing.scss ← --space-* tokens
166
+ _typography.scss ← --font-*, --text-* tokens
167
+ _motion.scss ← --ease-*, --duration-* tokens
168
+ layout/
169
+ _header.scss
170
+ _footer.scss
171
+ _grid.scss
172
+ components/
173
+ _buttons.scss
174
+ _cards.scss
175
+ _forms.scss
176
+ _modal.scss
177
+ _accordion.scss
178
+ _slider.scss
179
+ sections/
180
+ _hero.scss
181
+ _features.scss
182
+ _how-it-works.scss
183
+ _testimonials.scss
184
+ _pricing.scss
185
+ _faq.scss
186
+ _cta-final.scss
187
+ main.scss ← @forward all partials in order
188
+ ```
189
+
190
+ **Compile:** `sass assets/scss/main.scss assets/css/main.min.css --style=compressed --watch`