@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/docs/design-previews/index.html ADDED
@@ -0,0 +1,699 @@
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>AIOSON Design Skills — Preview Gallery</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
9
+ <style>
10
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
11
+
12
+ body {
13
+ font-family: 'Inter', system-ui, sans-serif;
14
+ background: #0A0A0F;
15
+ color: #E5E7EB;
16
+ min-height: 100vh;
17
+ padding: 0;
18
+ }
19
+
20
+ /* Header */
21
+ .header {
22
+ background: #111118;
23
+ border-bottom: 1px solid rgba(255,255,255,0.08);
24
+ padding: 0 48px;
25
+ height: 64px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ position: sticky;
30
+ top: 0;
31
+ z-index: 100;
32
+ }
33
+
34
+ .header-logo {
35
+ display: flex;
36
+ align-items: center;
37
+ gap: 12px;
38
+ }
39
+
40
+ .logo-mark {
41
+ width: 32px;
42
+ height: 32px;
43
+ background: linear-gradient(135deg, #7C3AED, #3B82F6);
44
+ border-radius: 8px;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ font-size: 14px;
49
+ font-weight: 800;
50
+ color: white;
51
+ letter-spacing: -0.03em;
52
+ }
53
+
54
+ .logo-text {
55
+ font-size: 16px;
56
+ font-weight: 700;
57
+ color: #F9FAFB;
58
+ letter-spacing: -0.02em;
59
+ }
60
+
61
+ .header-badge {
62
+ font-family: 'JetBrains Mono', monospace;
63
+ font-size: 11px;
64
+ color: #6B7280;
65
+ letter-spacing: 0.08em;
66
+ text-transform: uppercase;
67
+ }
68
+
69
+ /* Hero */
70
+ .hero {
71
+ padding: 80px 48px 64px;
72
+ max-width: 1200px;
73
+ margin: 0 auto;
74
+ text-align: center;
75
+ }
76
+
77
+ .hero-label {
78
+ font-family: 'JetBrains Mono', monospace;
79
+ font-size: 11px;
80
+ text-transform: uppercase;
81
+ letter-spacing: 0.12em;
82
+ color: #6B7280;
83
+ margin-bottom: 20px;
84
+ }
85
+
86
+ .hero h1 {
87
+ font-size: 48px;
88
+ font-weight: 800;
89
+ color: #F9FAFB;
90
+ letter-spacing: -0.03em;
91
+ line-height: 1.1;
92
+ margin-bottom: 20px;
93
+ }
94
+
95
+ .hero h1 span {
96
+ background: linear-gradient(135deg, #7C3AED, #3B82F6);
97
+ -webkit-background-clip: text;
98
+ -webkit-text-fill-color: transparent;
99
+ background-clip: text;
100
+ }
101
+
102
+ .hero p {
103
+ font-size: 18px;
104
+ color: #9CA3AF;
105
+ line-height: 1.6;
106
+ max-width: 600px;
107
+ margin: 0 auto 48px;
108
+ }
109
+
110
+ .hero-meta {
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+ gap: 32px;
115
+ font-family: 'JetBrains Mono', monospace;
116
+ font-size: 12px;
117
+ color: #4B5563;
118
+ }
119
+
120
+ .hero-meta span {
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 6px;
124
+ }
125
+
126
+ .hero-meta .dot {
127
+ width: 6px;
128
+ height: 6px;
129
+ border-radius: 50%;
130
+ background: #22D3EE;
131
+ display: inline-block;
132
+ }
133
+
134
+ /* Grid */
135
+ .gallery {
136
+ max-width: 1200px;
137
+ margin: 0 auto;
138
+ padding: 0 48px 80px;
139
+ display: grid;
140
+ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
141
+ gap: 24px;
142
+ }
143
+
144
+ /* Card */
145
+ .skill-card {
146
+ background: #111118;
147
+ border: 1px solid rgba(255,255,255,0.08);
148
+ border-radius: 16px;
149
+ overflow: hidden;
150
+ transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
151
+ cursor: pointer;
152
+ text-decoration: none;
153
+ display: block;
154
+ }
155
+
156
+ .skill-card:hover {
157
+ border-color: rgba(255,255,255,0.16);
158
+ transform: translateY(-2px);
159
+ box-shadow: 0 12px 40px rgba(0,0,0,0.4);
160
+ }
161
+
162
+ /* Preview thumbnail — colored top strip */
163
+ .preview-thumb {
164
+ height: 160px;
165
+ position: relative;
166
+ overflow: hidden;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ }
171
+
172
+ .preview-label {
173
+ position: relative;
174
+ z-index: 2;
175
+ font-size: 13px;
176
+ font-weight: 600;
177
+ letter-spacing: 0.01em;
178
+ opacity: 0.9;
179
+ }
180
+
181
+ /* Each skill thumb style */
182
+ .thumb-glassmorphism {
183
+ background: linear-gradient(135deg, #F0EEF6 0%, #E0DFF0 30%, #D8E0F0 70%, #EDE8F0 100%);
184
+ }
185
+ .thumb-glassmorphism .preview-label { color: #1A1A2E; }
186
+ .thumb-glassmorphism::before {
187
+ content: '';
188
+ position: absolute;
189
+ inset: 20px;
190
+ background: rgba(255,255,255,0.60);
191
+ backdrop-filter: blur(16px);
192
+ -webkit-backdrop-filter: blur(16px);
193
+ border: 1px solid rgba(255,255,255,0.40);
194
+ border-radius: 16px;
195
+ box-shadow: 0 8px 24px rgba(124,58,237,0.10);
196
+ }
197
+
198
+ .thumb-neo-brutalist {
199
+ background: #FFFDF5;
200
+ }
201
+ .thumb-neo-brutalist .preview-label { color: #1A1A1A; }
202
+ .thumb-neo-brutalist::before {
203
+ content: '';
204
+ position: absolute;
205
+ inset: 20px;
206
+ background: #FACC15;
207
+ border: 2px solid #1A1A1A;
208
+ box-shadow: 5px 5px 0 #1A1A1A;
209
+ border-radius: 0;
210
+ }
211
+
212
+ .thumb-warm-craft {
213
+ background: #F8F6F3;
214
+ }
215
+ .thumb-warm-craft .preview-label { color: #2D3436; }
216
+ .thumb-warm-craft::before {
217
+ content: '';
218
+ position: absolute;
219
+ inset: 20px;
220
+ background: #FFFFFF;
221
+ border-radius: 16px;
222
+ box-shadow: 0 4px 16px rgba(120,80,60,0.12);
223
+ border-left: 4px solid #E07A5F;
224
+ }
225
+
226
+ .thumb-bold-editorial {
227
+ background: #0A0A0A;
228
+ }
229
+ .thumb-bold-editorial .preview-label { color: #FFFFFF; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
230
+ .thumb-bold-editorial::after {
231
+ content: '';
232
+ position: absolute;
233
+ inset: 20px;
234
+ border: 1px solid rgba(255,255,255,0.08);
235
+ border-radius: 8px;
236
+ background: #141414;
237
+ box-shadow: 0 0 60px rgba(255,77,42,0.15);
238
+ }
239
+
240
+ .thumb-clean-saas {
241
+ background: #F9FAFB;
242
+ }
243
+ .thumb-clean-saas .preview-label { color: #111827; }
244
+ .thumb-clean-saas::before {
245
+ content: '';
246
+ position: absolute;
247
+ inset: 20px;
248
+ background: #FFFFFF;
249
+ border: 1px solid #E5E7EB;
250
+ border-radius: 8px;
251
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
252
+ border-left: 3px solid #2563EB;
253
+ }
254
+
255
+ .thumb-cognitive-core {
256
+ background: #0B0F15;
257
+ }
258
+ .thumb-cognitive-core .preview-label { color: #22D3EE; }
259
+ .thumb-cognitive-core::before {
260
+ content: '';
261
+ position: absolute;
262
+ inset: 20px;
263
+ background: #111827;
264
+ border: 1px solid rgba(255,255,255,0.06);
265
+ border-radius: 8px;
266
+ box-shadow: 0 0 20px rgba(34,211,238,0.12);
267
+ border-top: 2px solid #22D3EE;
268
+ }
269
+
270
+ .thumb-premium-command {
271
+ background: #0b1015;
272
+ }
273
+ .thumb-premium-command .preview-label { color: #63b3ed; }
274
+ .thumb-premium-command::before {
275
+ content: '';
276
+ position: absolute;
277
+ inset: 0;
278
+ background: radial-gradient(ellipse 400px 300px at 20% 20%, rgba(99,179,237,0.06), transparent 70%);
279
+ }
280
+ .thumb-premium-command::after {
281
+ content: '';
282
+ position: absolute;
283
+ inset: 20px;
284
+ background: #10161d;
285
+ border: 1px solid rgba(255,255,255,0.08);
286
+ border-radius: 8px;
287
+ display: grid;
288
+ grid-template-columns: 60px 1fr 80px;
289
+ }
290
+
291
+ .thumb-interface-design {
292
+ background: #F5F5F5;
293
+ }
294
+ .thumb-interface-design .preview-label { color: #0F172A; }
295
+ .thumb-interface-design::before {
296
+ content: '';
297
+ position: absolute;
298
+ inset: 20px;
299
+ background: #FFFFFF;
300
+ border: 1px solid #E2E2E2;
301
+ border-radius: 10px;
302
+ box-shadow: 0 2px 6px rgba(0,0,0,0.05);
303
+ border-top: 3px solid #6366F1;
304
+ }
305
+
306
+ /* Card body */
307
+ .card-body {
308
+ padding: 20px 24px 24px;
309
+ }
310
+
311
+ .card-header {
312
+ display: flex;
313
+ align-items: flex-start;
314
+ justify-content: space-between;
315
+ margin-bottom: 10px;
316
+ }
317
+
318
+ .card-name {
319
+ font-size: 16px;
320
+ font-weight: 700;
321
+ color: #F9FAFB;
322
+ letter-spacing: -0.02em;
323
+ }
324
+
325
+ .card-tag {
326
+ font-family: 'JetBrains Mono', monospace;
327
+ font-size: 10px;
328
+ text-transform: uppercase;
329
+ letter-spacing: 0.08em;
330
+ padding: 3px 8px;
331
+ border-radius: 9999px;
332
+ border: 1px solid rgba(255,255,255,0.12);
333
+ color: #6B7280;
334
+ white-space: nowrap;
335
+ }
336
+
337
+ .card-description {
338
+ font-size: 13px;
339
+ color: #6B7280;
340
+ line-height: 1.6;
341
+ margin-bottom: 16px;
342
+ }
343
+
344
+ .card-meta {
345
+ display: flex;
346
+ gap: 8px;
347
+ flex-wrap: wrap;
348
+ margin-bottom: 16px;
349
+ }
350
+
351
+ .meta-pill {
352
+ font-size: 11px;
353
+ font-weight: 500;
354
+ padding: 3px 10px;
355
+ border-radius: 9999px;
356
+ background: rgba(255,255,255,0.05);
357
+ color: #9CA3AF;
358
+ border: 1px solid rgba(255,255,255,0.07);
359
+ }
360
+
361
+ .card-links {
362
+ display: flex;
363
+ gap: 8px;
364
+ }
365
+
366
+ .card-link {
367
+ flex: 1;
368
+ display: flex;
369
+ align-items: center;
370
+ justify-content: space-between;
371
+ padding: 10px 14px;
372
+ background: rgba(255,255,255,0.04);
373
+ border: 1px solid rgba(255,255,255,0.08);
374
+ border-radius: 8px;
375
+ font-size: 12px;
376
+ font-weight: 500;
377
+ color: #9CA3AF;
378
+ transition: background 0.15s, color 0.15s;
379
+ text-decoration: none;
380
+ }
381
+
382
+ .card-link:hover {
383
+ background: rgba(255,255,255,0.07);
384
+ color: #E5E7EB;
385
+ }
386
+
387
+ .card-link-arrow {
388
+ font-size: 14px;
389
+ }
390
+
391
+ /* Footer */
392
+ .footer {
393
+ border-top: 1px solid rgba(255,255,255,0.06);
394
+ padding: 32px 48px;
395
+ text-align: center;
396
+ }
397
+
398
+ .footer p {
399
+ font-family: 'JetBrains Mono', monospace;
400
+ font-size: 11px;
401
+ color: #374151;
402
+ letter-spacing: 0.06em;
403
+ text-transform: uppercase;
404
+ }
405
+
406
+ /* Accent colors per skill for card-name */
407
+ .accent-glass { color: #7C3AED; }
408
+ .accent-neo { color: #FACC15; }
409
+ .accent-warm { color: #E07A5F; }
410
+ .accent-bold { color: #FF4D2A; }
411
+ .accent-clean { color: #2563EB; }
412
+ .accent-cognitive { color: #22D3EE; }
413
+ .accent-command { color: #63b3ed; }
414
+ .accent-interface { color: #6366F1; }
415
+ .accent-aurora { color: #00C8E8; }
416
+
417
+ .thumb-aurora-command {
418
+ background: linear-gradient(135deg, #060910 0%, #0A0818 30%, #060C1A 70%, #08060F 100%);
419
+ }
420
+ .thumb-aurora-command .preview-label { color: #00C8E8; letter-spacing: 0.02em; }
421
+ .thumb-aurora-command::before {
422
+ content: '';
423
+ position: absolute;
424
+ inset: 20px;
425
+ background: rgba(10,14,26,0.65);
426
+ backdrop-filter: blur(16px);
427
+ -webkit-backdrop-filter: blur(16px);
428
+ border: 1px solid rgba(255,255,255,0.09);
429
+ border-radius: 12px;
430
+ box-shadow: 0 0 30px rgba(0,200,232,0.14), 0 8px 24px rgba(0,0,0,0.50);
431
+ }
432
+ .thumb-aurora-command::after {
433
+ content: '';
434
+ position: absolute;
435
+ inset: 0;
436
+ background: radial-gradient(ellipse 280px 200px at 70% 20%, rgba(0,200,232,0.12), transparent 70%),
437
+ radial-gradient(ellipse 200px 160px at 20% 80%, rgba(124,58,237,0.12), transparent 70%);
438
+ border-radius: 0;
439
+ pointer-events: none;
440
+ }
441
+ .hybrid-badge {
442
+ display: inline-flex; align-items: center; gap: 6px;
443
+ font-family: 'JetBrains Mono', monospace;
444
+ font-size: 9.5px; font-weight: 600;
445
+ letter-spacing: 0.10em; text-transform: uppercase;
446
+ padding: 3px 10px; border-radius: 9999px;
447
+ background: linear-gradient(135deg, rgba(0,200,232,0.15), rgba(124,58,237,0.15));
448
+ border: 1px solid rgba(0,200,232,0.25);
449
+ color: #00C8E8;
450
+ }
451
+ </style>
452
+ </head>
453
+ <body>
454
+
455
+ <header class="header">
456
+ <div class="header-logo">
457
+ <div class="logo-mark">A</div>
458
+ <span class="logo-text">AIOSON</span>
459
+ </div>
460
+ <span class="header-badge">Design Skills — Preview Gallery</span>
461
+ </header>
462
+
463
+ <section class="hero">
464
+ <p class="hero-label">Visual Identity System</p>
465
+ <h1>Choose your <span>design skill</span></h1>
466
+ <p>Each skill is a complete visual system — colors, typography, components, and patterns. Pick one and your app gets a coherent, intentional identity from the start.</p>
467
+ <div class="hero-meta">
468
+ <span><span class="dot"></span> 9 design skills</span>
469
+ <span><span class="dot" style="background:#E07A5F"></span> App + landing page previews</span>
470
+ <span><span class="dot" style="background:#FF4D2A"></span> Stack-agnostic</span>
471
+ </div>
472
+ </section>
473
+
474
+ <div class="gallery">
475
+
476
+ <!-- Glassmorphism UI -->
477
+ <div class="skill-card">
478
+ <div class="preview-thumb thumb-glassmorphism">
479
+ <span class="preview-label">Glass · Depth · Blur</span>
480
+ </div>
481
+ <div class="card-body">
482
+ <div class="card-header">
483
+ <span class="card-name accent-glass">Glassmorphism UI</span>
484
+ <span class="card-tag">Light default</span>
485
+ </div>
486
+ <p class="card-description">Frosted glass surfaces floating over gradient backgrounds. Perceived depth through transparency, luminous borders, and violet-blue accents. Apple-like, iOS-grade.</p>
487
+ <div class="card-meta">
488
+ <span class="meta-pill">Fintech</span>
489
+ <span class="meta-pill">Crypto dashboards</span>
490
+ <span class="meta-pill">Mobile apps</span>
491
+ <span class="meta-pill">Portfolio</span>
492
+ </div>
493
+ <div class="card-links">
494
+ <a class="card-link" href="glassmorphism-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
495
+ <a class="card-link" href="glassmorphism-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Neo-Brutalist UI -->
501
+ <div class="skill-card">
502
+ <div class="preview-thumb thumb-neo-brutalist">
503
+ <span class="preview-label">Bold · Raw · Honest</span>
504
+ </div>
505
+ <div class="card-body">
506
+ <div class="card-header">
507
+ <span class="card-name accent-neo">Neo-Brutalist UI</span>
508
+ <span class="card-tag">Light default</span>
509
+ </div>
510
+ <p class="card-description">Thick borders, hard shadows with zero blur, and saturated yellow accent. Structural honesty — every component shows its construction. Anti-corporate by design.</p>
511
+ <div class="card-meta">
512
+ <span class="meta-pill">Indie products</span>
513
+ <span class="meta-pill">Devtools</span>
514
+ <span class="meta-pill">Creative tools</span>
515
+ <span class="meta-pill">Side projects</span>
516
+ </div>
517
+ <div class="card-links">
518
+ <a class="card-link" href="neo-brutalist-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
519
+ <a class="card-link" href="neo-brutalist-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Warm Craft UI -->
525
+ <div class="skill-card">
526
+ <div class="preview-thumb thumb-warm-craft">
527
+ <span class="preview-label">Human · Warm · Breathable</span>
528
+ </div>
529
+ <div class="card-body">
530
+ <div class="card-header">
531
+ <span class="card-name accent-warm">Warm Craft UI</span>
532
+ <span class="card-tag">Light default</span>
533
+ </div>
534
+ <p class="card-description">Serif headings, terracotta accents, generous whitespace. Feels handcrafted, trustworthy, and immediately approachable — like a well-designed physical notebook.</p>
535
+ <div class="card-meta">
536
+ <span class="meta-pill">Productivity</span>
537
+ <span class="meta-pill">SaaS B2C</span>
538
+ <span class="meta-pill">Health</span>
539
+ <span class="meta-pill">Education</span>
540
+ </div>
541
+ <div class="card-links">
542
+ <a class="card-link" href="warm-craft-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
543
+ <a class="card-link" href="warm-craft-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Bold Editorial UI -->
549
+ <div class="skill-card">
550
+ <div class="preview-thumb thumb-bold-editorial">
551
+ <span class="preview-label">IMPACT</span>
552
+ </div>
553
+ <div class="card-body">
554
+ <div class="card-header">
555
+ <span class="card-name accent-bold">Bold Editorial UI</span>
556
+ <span class="card-tag">Dark default</span>
557
+ </div>
558
+ <p class="card-description">Typography as architecture. Display fonts at 80–120px. Red-orange accent. Cinematic contrast, editorial rhythm — every scroll feels like turning a magazine page.</p>
559
+ <div class="card-meta">
560
+ <span class="meta-pill">Landing pages</span>
561
+ <span class="meta-pill">Marketing</span>
562
+ <span class="meta-pill">Portfolios</span>
563
+ <span class="meta-pill">SaaS marketing</span>
564
+ </div>
565
+ <div class="card-links">
566
+ <a class="card-link" href="bold-editorial-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
567
+ <a class="card-link" href="bold-editorial-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
568
+ </div>
569
+ </div>
570
+ </div>
571
+
572
+ <!-- Clean SaaS UI -->
573
+ <div class="skill-card">
574
+ <div class="preview-thumb thumb-clean-saas">
575
+ <span class="preview-label">Efficient · Precise · Invisible</span>
576
+ </div>
577
+ <div class="card-body">
578
+ <div class="card-header">
579
+ <span class="card-name accent-clean">Clean SaaS UI</span>
580
+ <span class="card-tag">Light default</span>
581
+ </div>
582
+ <p class="card-description">Professional neutrality with systematic precision. Blue accent, Inter-only, medium density. Optimized for the humans who live inside B2B software for 8 hours a day.</p>
583
+ <div class="card-meta">
584
+ <span class="meta-pill">B2B SaaS</span>
585
+ <span class="meta-pill">Admin panels</span>
586
+ <span class="meta-pill">CRM / ERP</span>
587
+ <span class="meta-pill">Internal tools</span>
588
+ </div>
589
+ <div class="card-links">
590
+ <a class="card-link" href="clean-saas-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
591
+ <a class="card-link" href="clean-saas-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <!-- Cognitive Core UI -->
597
+ <div class="skill-card">
598
+ <div class="preview-thumb thumb-cognitive-core">
599
+ <span class="preview-label">Dense · Tactical · Premium</span>
600
+ </div>
601
+ <div class="card-body">
602
+ <div class="card-header">
603
+ <span class="card-name accent-cognitive">Cognitive Core UI</span>
604
+ <span class="card-tag">Dark default</span>
605
+ </div>
606
+ <p class="card-description">Military-grade dashboard meets refined SaaS. Teal/cyan accent with glow, 3 depth levels, monospace metadata rails, large numeric stat readouts. Mission control feel.</p>
607
+ <div class="card-meta">
608
+ <span class="meta-pill">Command centers</span>
609
+ <span class="meta-pill">Analytics</span>
610
+ <span class="meta-pill">Dev tools</span>
611
+ <span class="meta-pill">AI platforms</span>
612
+ </div>
613
+ <div class="card-links">
614
+ <a class="card-link" href="cognitive-core-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
615
+ <a class="card-link" href="cognitive-core-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <!-- Premium Command Center UI -->
621
+ <div class="skill-card">
622
+ <div class="preview-thumb thumb-premium-command">
623
+ <span class="preview-label" style="position:relative;z-index:3">Tri-Rail · Aurora · Operational</span>
624
+ </div>
625
+ <div class="card-body">
626
+ <div class="card-header">
627
+ <span class="card-name accent-command">Premium Command Center UI</span>
628
+ <span class="card-tag">Dark only</span>
629
+ </div>
630
+ <p class="card-description">Tri-rail shell: left nav, center workspace, right activity rail. Aurora-glass surfaces, deep graphite, search-first interaction. For products under real operational pressure.</p>
631
+ <div class="card-meta">
632
+ <span class="meta-pill">Orchestration</span>
633
+ <span class="meta-pill">Control towers</span>
634
+ <span class="meta-pill">Operations</span>
635
+ <span class="meta-pill">Monitoring</span>
636
+ </div>
637
+ <div class="card-links">
638
+ <a class="card-link" href="premium-command-center-ui.html" target="_blank"><span>App preview</span><span>→</span></a>
639
+ <a class="card-link" href="premium-command-center-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
640
+ </div>
641
+ </div>
642
+ </div>
643
+
644
+ <!-- Aurora Command UI (Hybrid) -->
645
+ <div class="skill-card">
646
+ <div class="preview-thumb thumb-aurora-command">
647
+ <span class="preview-label">Glass · Command · Aurora</span>
648
+ </div>
649
+ <div class="card-body">
650
+ <div class="card-header">
651
+ <span class="card-name accent-aurora">Aurora Command UI</span>
652
+ <span class="hybrid-badge">✦ Hybrid</span>
653
+ </div>
654
+ <p class="card-description">Cognitive Core × Glassmorphism. Dark aurora gradient substrate with dark-tinted glass panels. Military command structure — mono rails, dense stats — living inside an aurora space. Teal-electric + violet gradient pair.</p>
655
+ <div class="card-meta">
656
+ <span class="meta-pill">SOC / Security</span>
657
+ <span class="meta-pill">AI platforms</span>
658
+ <span class="meta-pill">Dev tools</span>
659
+ <span class="meta-pill">Infra cockpits</span>
660
+ </div>
661
+ <div class="card-links">
662
+ <a class="card-link" href="aurora-command-ui.html" target="_blank"><span>Dashboard</span><span>→</span></a>
663
+ <a class="card-link" href="aurora-command-ui-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Interface Design -->
669
+ <div class="skill-card">
670
+ <div class="preview-thumb thumb-interface-design">
671
+ <span class="preview-label">Craft · System · Continuity</span>
672
+ </div>
673
+ <div class="card-body">
674
+ <div class="card-header">
675
+ <span class="card-name accent-interface">Interface Design</span>
676
+ <span class="card-tag">Adaptive</span>
677
+ </div>
678
+ <p class="card-description">General craft package — no preset visual language. Use when you want strong design decisions without committing to a specific aesthetic. Hierarchy through discipline, not decoration.</p>
679
+ <div class="card-meta">
680
+ <span class="meta-pill">Web apps</span>
681
+ <span class="meta-pill">Websites</span>
682
+ <span class="meta-pill">Redesigns</span>
683
+ <span class="meta-pill">Multi-screen</span>
684
+ </div>
685
+ <div class="card-links">
686
+ <a class="card-link" href="interface-design.html" target="_blank"><span>App preview</span><span>→</span></a>
687
+ <a class="card-link" href="interface-design-website.html" target="_blank"><span>Landing page</span><span>→</span></a>
688
+ </div>
689
+ </div>
690
+ </div>
691
+
692
+ </div>
693
+
694
+ <footer class="footer">
695
+ <p>AIOSON Design Skills · 9 visual systems · 1 hybrid · Each skill is a complete, standalone package</p>
696
+ </footer>
697
+
698
+ </body>
699
+ </html>