@aexol/spectral 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (459) hide show
  1. package/dist/agent/index.js +76 -301
  2. package/dist/cli.js +11 -0
  3. package/dist/designer/data/systems/agentic/DESIGN.md +71 -0
  4. package/dist/designer/data/systems/agentic/components.html +154 -0
  5. package/dist/designer/data/systems/agentic/tokens.css +63 -0
  6. package/dist/designer/data/systems/airbnb/DESIGN.md +393 -0
  7. package/dist/designer/data/systems/airbnb/components.html +1373 -0
  8. package/dist/designer/data/systems/airbnb/tokens.css +261 -0
  9. package/dist/designer/data/systems/airtable/DESIGN.md +92 -0
  10. package/dist/designer/data/systems/airtable/components.html +489 -0
  11. package/dist/designer/data/systems/airtable/tokens.css +261 -0
  12. package/dist/designer/data/systems/ant/DESIGN.md +71 -0
  13. package/dist/designer/data/systems/ant/components.html +154 -0
  14. package/dist/designer/data/systems/ant/tokens.css +63 -0
  15. package/dist/designer/data/systems/apple/DESIGN.md +250 -0
  16. package/dist/designer/data/systems/apple/components.html +749 -0
  17. package/dist/designer/data/systems/apple/tokens.css +286 -0
  18. package/dist/designer/data/systems/application/DESIGN.md +71 -0
  19. package/dist/designer/data/systems/application/components.html +154 -0
  20. package/dist/designer/data/systems/application/tokens.css +63 -0
  21. package/dist/designer/data/systems/arc/DESIGN.md +152 -0
  22. package/dist/designer/data/systems/arc/components.html +432 -0
  23. package/dist/designer/data/systems/arc/tokens.css +137 -0
  24. package/dist/designer/data/systems/artistic/DESIGN.md +71 -0
  25. package/dist/designer/data/systems/artistic/components.html +136 -0
  26. package/dist/designer/data/systems/artistic/tokens.css +63 -0
  27. package/dist/designer/data/systems/atelier-zero/DESIGN.md +316 -0
  28. package/dist/designer/data/systems/atelier-zero/components.html +136 -0
  29. package/dist/designer/data/systems/atelier-zero/tokens.css +63 -0
  30. package/dist/designer/data/systems/bento/DESIGN.md +71 -0
  31. package/dist/designer/data/systems/bento/components.html +136 -0
  32. package/dist/designer/data/systems/bento/tokens.css +63 -0
  33. package/dist/designer/data/systems/binance/DESIGN.md +348 -0
  34. package/dist/designer/data/systems/binance/components.html +550 -0
  35. package/dist/designer/data/systems/binance/tokens.css +255 -0
  36. package/dist/designer/data/systems/bmw/DESIGN.md +183 -0
  37. package/dist/designer/data/systems/bmw/components.html +551 -0
  38. package/dist/designer/data/systems/bmw/tokens.css +179 -0
  39. package/dist/designer/data/systems/bmw-m/DESIGN.md +246 -0
  40. package/dist/designer/data/systems/bmw-m/components.html +342 -0
  41. package/dist/designer/data/systems/bmw-m/tokens.css +64 -0
  42. package/dist/designer/data/systems/bold/DESIGN.md +71 -0
  43. package/dist/designer/data/systems/bold/components.html +136 -0
  44. package/dist/designer/data/systems/bold/tokens.css +63 -0
  45. package/dist/designer/data/systems/brutalism/DESIGN.md +71 -0
  46. package/dist/designer/data/systems/brutalism/components.html +154 -0
  47. package/dist/designer/data/systems/brutalism/tokens.css +63 -0
  48. package/dist/designer/data/systems/bugatti/DESIGN.md +271 -0
  49. package/dist/designer/data/systems/bugatti/components.html +342 -0
  50. package/dist/designer/data/systems/bugatti/tokens.css +64 -0
  51. package/dist/designer/data/systems/cafe/DESIGN.md +71 -0
  52. package/dist/designer/data/systems/cafe/components.html +136 -0
  53. package/dist/designer/data/systems/cafe/tokens.css +63 -0
  54. package/dist/designer/data/systems/cal/DESIGN.md +262 -0
  55. package/dist/designer/data/systems/cal/components.html +376 -0
  56. package/dist/designer/data/systems/cal/tokens.css +265 -0
  57. package/dist/designer/data/systems/canva/DESIGN.md +157 -0
  58. package/dist/designer/data/systems/canva/components.html +461 -0
  59. package/dist/designer/data/systems/canva/tokens.css +147 -0
  60. package/dist/designer/data/systems/cisco/DESIGN.md +201 -0
  61. package/dist/designer/data/systems/cisco/components.html +342 -0
  62. package/dist/designer/data/systems/cisco/tokens.css +64 -0
  63. package/dist/designer/data/systems/claude/DESIGN.md +315 -0
  64. package/dist/designer/data/systems/claude/components.html +483 -0
  65. package/dist/designer/data/systems/claude/tokens.css +130 -0
  66. package/dist/designer/data/systems/clay/DESIGN.md +307 -0
  67. package/dist/designer/data/systems/clay/components.html +136 -0
  68. package/dist/designer/data/systems/clay/tokens.css +63 -0
  69. package/dist/designer/data/systems/claymorphism/DESIGN.md +71 -0
  70. package/dist/designer/data/systems/claymorphism/components.html +136 -0
  71. package/dist/designer/data/systems/claymorphism/tokens.css +63 -0
  72. package/dist/designer/data/systems/clean/DESIGN.md +71 -0
  73. package/dist/designer/data/systems/clean/components.html +136 -0
  74. package/dist/designer/data/systems/clean/tokens.css +63 -0
  75. package/dist/designer/data/systems/clickhouse/DESIGN.md +284 -0
  76. package/dist/designer/data/systems/clickhouse/components.html +506 -0
  77. package/dist/designer/data/systems/clickhouse/tokens.css +135 -0
  78. package/dist/designer/data/systems/cohere/DESIGN.md +269 -0
  79. package/dist/designer/data/systems/cohere/components.html +353 -0
  80. package/dist/designer/data/systems/cohere/tokens.css +126 -0
  81. package/dist/designer/data/systems/coinbase/DESIGN.md +132 -0
  82. package/dist/designer/data/systems/coinbase/components.html +501 -0
  83. package/dist/designer/data/systems/coinbase/tokens.css +257 -0
  84. package/dist/designer/data/systems/colorful/DESIGN.md +71 -0
  85. package/dist/designer/data/systems/colorful/components.html +136 -0
  86. package/dist/designer/data/systems/colorful/tokens.css +63 -0
  87. package/dist/designer/data/systems/composio/DESIGN.md +310 -0
  88. package/dist/designer/data/systems/composio/components.html +342 -0
  89. package/dist/designer/data/systems/composio/tokens.css +64 -0
  90. package/dist/designer/data/systems/contemporary/DESIGN.md +71 -0
  91. package/dist/designer/data/systems/contemporary/components.html +136 -0
  92. package/dist/designer/data/systems/contemporary/tokens.css +63 -0
  93. package/dist/designer/data/systems/corporate/DESIGN.md +71 -0
  94. package/dist/designer/data/systems/corporate/components.html +136 -0
  95. package/dist/designer/data/systems/corporate/tokens.css +63 -0
  96. package/dist/designer/data/systems/cosmic/DESIGN.md +71 -0
  97. package/dist/designer/data/systems/cosmic/components.html +136 -0
  98. package/dist/designer/data/systems/cosmic/tokens.css +63 -0
  99. package/dist/designer/data/systems/creative/DESIGN.md +71 -0
  100. package/dist/designer/data/systems/creative/components.html +136 -0
  101. package/dist/designer/data/systems/creative/tokens.css +63 -0
  102. package/dist/designer/data/systems/cursor/DESIGN.md +312 -0
  103. package/dist/designer/data/systems/cursor/components.html +654 -0
  104. package/dist/designer/data/systems/cursor/tokens.css +218 -0
  105. package/dist/designer/data/systems/dashboard/DESIGN.md +71 -0
  106. package/dist/designer/data/systems/dashboard/components.html +154 -0
  107. package/dist/designer/data/systems/dashboard/tokens.css +63 -0
  108. package/dist/designer/data/systems/default/DESIGN.md +62 -0
  109. package/dist/designer/data/systems/default/components.html +523 -0
  110. package/dist/designer/data/systems/default/tokens.css +200 -0
  111. package/dist/designer/data/systems/discord/DESIGN.md +162 -0
  112. package/dist/designer/data/systems/discord/components.html +359 -0
  113. package/dist/designer/data/systems/discord/tokens.css +125 -0
  114. package/dist/designer/data/systems/dithered/DESIGN.md +71 -0
  115. package/dist/designer/data/systems/dithered/components.html +136 -0
  116. package/dist/designer/data/systems/dithered/tokens.css +63 -0
  117. package/dist/designer/data/systems/doodle/DESIGN.md +71 -0
  118. package/dist/designer/data/systems/doodle/components.html +136 -0
  119. package/dist/designer/data/systems/doodle/tokens.css +63 -0
  120. package/dist/designer/data/systems/dramatic/DESIGN.md +71 -0
  121. package/dist/designer/data/systems/dramatic/components.html +136 -0
  122. package/dist/designer/data/systems/dramatic/tokens.css +63 -0
  123. package/dist/designer/data/systems/duolingo/DESIGN.md +154 -0
  124. package/dist/designer/data/systems/duolingo/components.html +532 -0
  125. package/dist/designer/data/systems/duolingo/tokens.css +130 -0
  126. package/dist/designer/data/systems/editorial/DESIGN.md +71 -0
  127. package/dist/designer/data/systems/editorial/components.html +154 -0
  128. package/dist/designer/data/systems/editorial/tokens.css +63 -0
  129. package/dist/designer/data/systems/elegant/DESIGN.md +71 -0
  130. package/dist/designer/data/systems/elegant/components.html +136 -0
  131. package/dist/designer/data/systems/elegant/tokens.css +63 -0
  132. package/dist/designer/data/systems/elevenlabs/DESIGN.md +268 -0
  133. package/dist/designer/data/systems/elevenlabs/components.html +342 -0
  134. package/dist/designer/data/systems/elevenlabs/tokens.css +127 -0
  135. package/dist/designer/data/systems/energetic/DESIGN.md +72 -0
  136. package/dist/designer/data/systems/energetic/components.html +136 -0
  137. package/dist/designer/data/systems/energetic/tokens.css +63 -0
  138. package/dist/designer/data/systems/enterprise/DESIGN.md +71 -0
  139. package/dist/designer/data/systems/enterprise/components.html +154 -0
  140. package/dist/designer/data/systems/enterprise/tokens.css +63 -0
  141. package/dist/designer/data/systems/expo/DESIGN.md +284 -0
  142. package/dist/designer/data/systems/expo/components.html +342 -0
  143. package/dist/designer/data/systems/expo/tokens.css +64 -0
  144. package/dist/designer/data/systems/expressive/DESIGN.md +71 -0
  145. package/dist/designer/data/systems/expressive/components.html +136 -0
  146. package/dist/designer/data/systems/expressive/tokens.css +63 -0
  147. package/dist/designer/data/systems/fantasy/DESIGN.md +71 -0
  148. package/dist/designer/data/systems/fantasy/components.html +136 -0
  149. package/dist/designer/data/systems/fantasy/tokens.css +63 -0
  150. package/dist/designer/data/systems/ferrari/DESIGN.md +317 -0
  151. package/dist/designer/data/systems/ferrari/components.html +342 -0
  152. package/dist/designer/data/systems/ferrari/tokens.css +64 -0
  153. package/dist/designer/data/systems/figma/DESIGN.md +223 -0
  154. package/dist/designer/data/systems/figma/components.html +344 -0
  155. package/dist/designer/data/systems/figma/tokens.css +126 -0
  156. package/dist/designer/data/systems/flat/DESIGN.md +71 -0
  157. package/dist/designer/data/systems/flat/components.html +136 -0
  158. package/dist/designer/data/systems/flat/tokens.css +63 -0
  159. package/dist/designer/data/systems/framer/DESIGN.md +249 -0
  160. package/dist/designer/data/systems/framer/components.html +438 -0
  161. package/dist/designer/data/systems/framer/tokens.css +238 -0
  162. package/dist/designer/data/systems/friendly/DESIGN.md +71 -0
  163. package/dist/designer/data/systems/friendly/components.html +136 -0
  164. package/dist/designer/data/systems/friendly/tokens.css +63 -0
  165. package/dist/designer/data/systems/futuristic/DESIGN.md +71 -0
  166. package/dist/designer/data/systems/futuristic/components.html +136 -0
  167. package/dist/designer/data/systems/futuristic/tokens.css +63 -0
  168. package/dist/designer/data/systems/github/DESIGN.md +155 -0
  169. package/dist/designer/data/systems/github/components.html +383 -0
  170. package/dist/designer/data/systems/github/tokens.css +125 -0
  171. package/dist/designer/data/systems/glassmorphism/DESIGN.md +71 -0
  172. package/dist/designer/data/systems/glassmorphism/components.html +154 -0
  173. package/dist/designer/data/systems/glassmorphism/tokens.css +63 -0
  174. package/dist/designer/data/systems/gradient/DESIGN.md +71 -0
  175. package/dist/designer/data/systems/gradient/components.html +154 -0
  176. package/dist/designer/data/systems/gradient/tokens.css +63 -0
  177. package/dist/designer/data/systems/hashicorp/DESIGN.md +281 -0
  178. package/dist/designer/data/systems/hashicorp/components.html +502 -0
  179. package/dist/designer/data/systems/hashicorp/tokens.css +272 -0
  180. package/dist/designer/data/systems/hud/DESIGN.md +173 -0
  181. package/dist/designer/data/systems/hud/components.html +136 -0
  182. package/dist/designer/data/systems/hud/tokens.css +63 -0
  183. package/dist/designer/data/systems/huggingface/DESIGN.md +149 -0
  184. package/dist/designer/data/systems/huggingface/components.html +346 -0
  185. package/dist/designer/data/systems/huggingface/tokens.css +125 -0
  186. package/dist/designer/data/systems/ibm/DESIGN.md +335 -0
  187. package/dist/designer/data/systems/ibm/components.html +342 -0
  188. package/dist/designer/data/systems/ibm/tokens.css +64 -0
  189. package/dist/designer/data/systems/intercom/DESIGN.md +149 -0
  190. package/dist/designer/data/systems/intercom/components.html +557 -0
  191. package/dist/designer/data/systems/intercom/tokens.css +150 -0
  192. package/dist/designer/data/systems/kami/DESIGN.md +410 -0
  193. package/dist/designer/data/systems/kami/components.html +601 -0
  194. package/dist/designer/data/systems/kami/tokens.css +272 -0
  195. package/dist/designer/data/systems/kraken/DESIGN.md +128 -0
  196. package/dist/designer/data/systems/kraken/components.html +342 -0
  197. package/dist/designer/data/systems/kraken/tokens.css +64 -0
  198. package/dist/designer/data/systems/lamborghini/DESIGN.md +291 -0
  199. package/dist/designer/data/systems/lamborghini/components.html +342 -0
  200. package/dist/designer/data/systems/lamborghini/tokens.css +64 -0
  201. package/dist/designer/data/systems/levels/DESIGN.md +71 -0
  202. package/dist/designer/data/systems/levels/components.html +154 -0
  203. package/dist/designer/data/systems/levels/tokens.css +63 -0
  204. package/dist/designer/data/systems/linear-app/DESIGN.md +370 -0
  205. package/dist/designer/data/systems/linear-app/components.html +370 -0
  206. package/dist/designer/data/systems/linear-app/tokens.css +130 -0
  207. package/dist/designer/data/systems/lingo/DESIGN.md +71 -0
  208. package/dist/designer/data/systems/lingo/components.html +154 -0
  209. package/dist/designer/data/systems/lingo/tokens.css +63 -0
  210. package/dist/designer/data/systems/loom/DESIGN.md +201 -0
  211. package/dist/designer/data/systems/loom/components.html +446 -0
  212. package/dist/designer/data/systems/loom/tokens.css +138 -0
  213. package/dist/designer/data/systems/lovable/DESIGN.md +301 -0
  214. package/dist/designer/data/systems/lovable/components.html +441 -0
  215. package/dist/designer/data/systems/lovable/tokens.css +258 -0
  216. package/dist/designer/data/systems/luxury/DESIGN.md +71 -0
  217. package/dist/designer/data/systems/luxury/components.html +154 -0
  218. package/dist/designer/data/systems/luxury/tokens.css +63 -0
  219. package/dist/designer/data/systems/mastercard/DESIGN.md +368 -0
  220. package/dist/designer/data/systems/mastercard/components.html +342 -0
  221. package/dist/designer/data/systems/mastercard/tokens.css +64 -0
  222. package/dist/designer/data/systems/material/DESIGN.md +71 -0
  223. package/dist/designer/data/systems/material/components.html +154 -0
  224. package/dist/designer/data/systems/material/tokens.css +63 -0
  225. package/dist/designer/data/systems/meta/DESIGN.md +369 -0
  226. package/dist/designer/data/systems/meta/components.html +398 -0
  227. package/dist/designer/data/systems/meta/tokens.css +263 -0
  228. package/dist/designer/data/systems/minimal/DESIGN.md +71 -0
  229. package/dist/designer/data/systems/minimal/components.html +154 -0
  230. package/dist/designer/data/systems/minimal/tokens.css +63 -0
  231. package/dist/designer/data/systems/minimax/DESIGN.md +260 -0
  232. package/dist/designer/data/systems/minimax/components.html +590 -0
  233. package/dist/designer/data/systems/minimax/tokens.css +148 -0
  234. package/dist/designer/data/systems/mintlify/DESIGN.md +329 -0
  235. package/dist/designer/data/systems/mintlify/components.html +737 -0
  236. package/dist/designer/data/systems/mintlify/tokens.css +256 -0
  237. package/dist/designer/data/systems/miro/DESIGN.md +111 -0
  238. package/dist/designer/data/systems/miro/components.html +342 -0
  239. package/dist/designer/data/systems/miro/tokens.css +64 -0
  240. package/dist/designer/data/systems/mission-control/DESIGN.md +474 -0
  241. package/dist/designer/data/systems/mission-control/components.html +136 -0
  242. package/dist/designer/data/systems/mission-control/tokens.css +63 -0
  243. package/dist/designer/data/systems/mistral-ai/DESIGN.md +264 -0
  244. package/dist/designer/data/systems/mistral-ai/components.html +338 -0
  245. package/dist/designer/data/systems/mistral-ai/tokens.css +125 -0
  246. package/dist/designer/data/systems/modern/DESIGN.md +71 -0
  247. package/dist/designer/data/systems/modern/components.html +154 -0
  248. package/dist/designer/data/systems/modern/tokens.css +63 -0
  249. package/dist/designer/data/systems/mongodb/DESIGN.md +269 -0
  250. package/dist/designer/data/systems/mongodb/components.html +462 -0
  251. package/dist/designer/data/systems/mongodb/tokens.css +176 -0
  252. package/dist/designer/data/systems/mono/DESIGN.md +71 -0
  253. package/dist/designer/data/systems/mono/components.html +136 -0
  254. package/dist/designer/data/systems/mono/tokens.css +63 -0
  255. package/dist/designer/data/systems/neobrutalism/DESIGN.md +71 -0
  256. package/dist/designer/data/systems/neobrutalism/components.html +136 -0
  257. package/dist/designer/data/systems/neobrutalism/tokens.css +63 -0
  258. package/dist/designer/data/systems/neon/DESIGN.md +71 -0
  259. package/dist/designer/data/systems/neon/components.html +136 -0
  260. package/dist/designer/data/systems/neon/tokens.css +63 -0
  261. package/dist/designer/data/systems/neumorphism/DESIGN.md +71 -0
  262. package/dist/designer/data/systems/neumorphism/components.html +136 -0
  263. package/dist/designer/data/systems/neumorphism/tokens.css +63 -0
  264. package/dist/designer/data/systems/nike/DESIGN.md +366 -0
  265. package/dist/designer/data/systems/nike/components.html +512 -0
  266. package/dist/designer/data/systems/nike/tokens.css +304 -0
  267. package/dist/designer/data/systems/notion/DESIGN.md +312 -0
  268. package/dist/designer/data/systems/notion/components.html +413 -0
  269. package/dist/designer/data/systems/notion/tokens.css +130 -0
  270. package/dist/designer/data/systems/nvidia/DESIGN.md +296 -0
  271. package/dist/designer/data/systems/nvidia/components.html +414 -0
  272. package/dist/designer/data/systems/nvidia/tokens.css +133 -0
  273. package/dist/designer/data/systems/ollama/DESIGN.md +270 -0
  274. package/dist/designer/data/systems/ollama/components.html +700 -0
  275. package/dist/designer/data/systems/ollama/tokens.css +242 -0
  276. package/dist/designer/data/systems/openai/DESIGN.md +140 -0
  277. package/dist/designer/data/systems/openai/components.html +382 -0
  278. package/dist/designer/data/systems/openai/tokens.css +133 -0
  279. package/dist/designer/data/systems/opencode-ai/DESIGN.md +284 -0
  280. package/dist/designer/data/systems/opencode-ai/components.html +389 -0
  281. package/dist/designer/data/systems/opencode-ai/tokens.css +126 -0
  282. package/dist/designer/data/systems/pacman/DESIGN.md +71 -0
  283. package/dist/designer/data/systems/pacman/components.html +342 -0
  284. package/dist/designer/data/systems/pacman/tokens.css +64 -0
  285. package/dist/designer/data/systems/paper/DESIGN.md +71 -0
  286. package/dist/designer/data/systems/paper/components.html +136 -0
  287. package/dist/designer/data/systems/paper/tokens.css +63 -0
  288. package/dist/designer/data/systems/perplexity/DESIGN.md +286 -0
  289. package/dist/designer/data/systems/perplexity/components.html +455 -0
  290. package/dist/designer/data/systems/perplexity/tokens.css +151 -0
  291. package/dist/designer/data/systems/perspective/DESIGN.md +71 -0
  292. package/dist/designer/data/systems/perspective/components.html +136 -0
  293. package/dist/designer/data/systems/perspective/tokens.css +63 -0
  294. package/dist/designer/data/systems/pinterest/DESIGN.md +233 -0
  295. package/dist/designer/data/systems/pinterest/components.html +865 -0
  296. package/dist/designer/data/systems/pinterest/tokens.css +262 -0
  297. package/dist/designer/data/systems/playstation/DESIGN.md +367 -0
  298. package/dist/designer/data/systems/playstation/components.html +414 -0
  299. package/dist/designer/data/systems/playstation/tokens.css +150 -0
  300. package/dist/designer/data/systems/posthog/DESIGN.md +259 -0
  301. package/dist/designer/data/systems/posthog/components.html +827 -0
  302. package/dist/designer/data/systems/posthog/tokens.css +272 -0
  303. package/dist/designer/data/systems/premium/DESIGN.md +71 -0
  304. package/dist/designer/data/systems/premium/components.html +154 -0
  305. package/dist/designer/data/systems/premium/tokens.css +63 -0
  306. package/dist/designer/data/systems/professional/DESIGN.md +71 -0
  307. package/dist/designer/data/systems/professional/components.html +136 -0
  308. package/dist/designer/data/systems/professional/tokens.css +63 -0
  309. package/dist/designer/data/systems/publication/DESIGN.md +71 -0
  310. package/dist/designer/data/systems/publication/components.html +154 -0
  311. package/dist/designer/data/systems/publication/tokens.css +63 -0
  312. package/dist/designer/data/systems/raycast/DESIGN.md +271 -0
  313. package/dist/designer/data/systems/raycast/components.html +507 -0
  314. package/dist/designer/data/systems/raycast/tokens.css +143 -0
  315. package/dist/designer/data/systems/refined/DESIGN.md +71 -0
  316. package/dist/designer/data/systems/refined/components.html +136 -0
  317. package/dist/designer/data/systems/refined/tokens.css +63 -0
  318. package/dist/designer/data/systems/renault/DESIGN.md +314 -0
  319. package/dist/designer/data/systems/renault/components.html +154 -0
  320. package/dist/designer/data/systems/renault/tokens.css +63 -0
  321. package/dist/designer/data/systems/replicate/DESIGN.md +264 -0
  322. package/dist/designer/data/systems/replicate/components.html +340 -0
  323. package/dist/designer/data/systems/replicate/tokens.css +125 -0
  324. package/dist/designer/data/systems/resend/DESIGN.md +306 -0
  325. package/dist/designer/data/systems/resend/components.html +839 -0
  326. package/dist/designer/data/systems/resend/tokens.css +353 -0
  327. package/dist/designer/data/systems/retro/DESIGN.md +71 -0
  328. package/dist/designer/data/systems/retro/components.html +136 -0
  329. package/dist/designer/data/systems/retro/tokens.css +63 -0
  330. package/dist/designer/data/systems/revolut/DESIGN.md +188 -0
  331. package/dist/designer/data/systems/revolut/components.html +342 -0
  332. package/dist/designer/data/systems/revolut/tokens.css +64 -0
  333. package/dist/designer/data/systems/runwayml/DESIGN.md +247 -0
  334. package/dist/designer/data/systems/runwayml/components.html +638 -0
  335. package/dist/designer/data/systems/runwayml/tokens.css +204 -0
  336. package/dist/designer/data/systems/sanity/DESIGN.md +360 -0
  337. package/dist/designer/data/systems/sanity/components.html +342 -0
  338. package/dist/designer/data/systems/sanity/tokens.css +64 -0
  339. package/dist/designer/data/systems/sentry/DESIGN.md +265 -0
  340. package/dist/designer/data/systems/sentry/components.html +387 -0
  341. package/dist/designer/data/systems/sentry/tokens.css +219 -0
  342. package/dist/designer/data/systems/shadcn/DESIGN.md +71 -0
  343. package/dist/designer/data/systems/shadcn/components.html +732 -0
  344. package/dist/designer/data/systems/shadcn/tokens.css +255 -0
  345. package/dist/designer/data/systems/shopify/DESIGN.md +353 -0
  346. package/dist/designer/data/systems/shopify/components.html +342 -0
  347. package/dist/designer/data/systems/shopify/tokens.css +141 -0
  348. package/dist/designer/data/systems/simple/DESIGN.md +71 -0
  349. package/dist/designer/data/systems/simple/components.html +136 -0
  350. package/dist/designer/data/systems/simple/tokens.css +63 -0
  351. package/dist/designer/data/systems/skeumorphism/DESIGN.md +71 -0
  352. package/dist/designer/data/systems/skeumorphism/components.html +136 -0
  353. package/dist/designer/data/systems/skeumorphism/tokens.css +63 -0
  354. package/dist/designer/data/systems/slack/DESIGN.md +363 -0
  355. package/dist/designer/data/systems/slack/components.html +387 -0
  356. package/dist/designer/data/systems/slack/tokens.css +127 -0
  357. package/dist/designer/data/systems/sleek/DESIGN.md +71 -0
  358. package/dist/designer/data/systems/sleek/components.html +136 -0
  359. package/dist/designer/data/systems/sleek/tokens.css +63 -0
  360. package/dist/designer/data/systems/spacex/DESIGN.md +197 -0
  361. package/dist/designer/data/systems/spacex/components.html +496 -0
  362. package/dist/designer/data/systems/spacex/tokens.css +154 -0
  363. package/dist/designer/data/systems/spacious/DESIGN.md +71 -0
  364. package/dist/designer/data/systems/spacious/components.html +136 -0
  365. package/dist/designer/data/systems/spacious/tokens.css +63 -0
  366. package/dist/designer/data/systems/spotify/DESIGN.md +249 -0
  367. package/dist/designer/data/systems/spotify/components.html +365 -0
  368. package/dist/designer/data/systems/spotify/tokens.css +127 -0
  369. package/dist/designer/data/systems/starbucks/DESIGN.md +583 -0
  370. package/dist/designer/data/systems/starbucks/components.html +493 -0
  371. package/dist/designer/data/systems/starbucks/tokens.css +182 -0
  372. package/dist/designer/data/systems/storytelling/DESIGN.md +71 -0
  373. package/dist/designer/data/systems/storytelling/components.html +136 -0
  374. package/dist/designer/data/systems/storytelling/tokens.css +63 -0
  375. package/dist/designer/data/systems/stripe/DESIGN.md +325 -0
  376. package/dist/designer/data/systems/stripe/components.html +1018 -0
  377. package/dist/designer/data/systems/stripe/tokens.css +295 -0
  378. package/dist/designer/data/systems/supabase/DESIGN.md +258 -0
  379. package/dist/designer/data/systems/supabase/components.html +741 -0
  380. package/dist/designer/data/systems/supabase/tokens.css +294 -0
  381. package/dist/designer/data/systems/superhuman/DESIGN.md +255 -0
  382. package/dist/designer/data/systems/superhuman/components.html +537 -0
  383. package/dist/designer/data/systems/superhuman/tokens.css +160 -0
  384. package/dist/designer/data/systems/tesla/DESIGN.md +289 -0
  385. package/dist/designer/data/systems/tesla/components.html +724 -0
  386. package/dist/designer/data/systems/tesla/tokens.css +285 -0
  387. package/dist/designer/data/systems/tetris/DESIGN.md +71 -0
  388. package/dist/designer/data/systems/tetris/components.html +342 -0
  389. package/dist/designer/data/systems/tetris/tokens.css +64 -0
  390. package/dist/designer/data/systems/theverge/DESIGN.md +342 -0
  391. package/dist/designer/data/systems/theverge/components.html +342 -0
  392. package/dist/designer/data/systems/theverge/tokens.css +64 -0
  393. package/dist/designer/data/systems/together-ai/DESIGN.md +266 -0
  394. package/dist/designer/data/systems/together-ai/components.html +422 -0
  395. package/dist/designer/data/systems/together-ai/tokens.css +127 -0
  396. package/dist/designer/data/systems/totality-festival/DESIGN.md +206 -0
  397. package/dist/designer/data/systems/totality-festival/components.html +136 -0
  398. package/dist/designer/data/systems/totality-festival/tokens.css +63 -0
  399. package/dist/designer/data/systems/trading-terminal/DESIGN.md +178 -0
  400. package/dist/designer/data/systems/trading-terminal/components.html +154 -0
  401. package/dist/designer/data/systems/trading-terminal/tokens.css +63 -0
  402. package/dist/designer/data/systems/uber/DESIGN.md +298 -0
  403. package/dist/designer/data/systems/uber/components.html +347 -0
  404. package/dist/designer/data/systems/uber/tokens.css +131 -0
  405. package/dist/designer/data/systems/urdu/DESIGN.md +1002 -0
  406. package/dist/designer/data/systems/urdu/components.html +136 -0
  407. package/dist/designer/data/systems/urdu/tokens.css +63 -0
  408. package/dist/designer/data/systems/vercel/DESIGN.md +313 -0
  409. package/dist/designer/data/systems/vercel/components.html +839 -0
  410. package/dist/designer/data/systems/vercel/tokens.css +270 -0
  411. package/dist/designer/data/systems/vibrant/DESIGN.md +71 -0
  412. package/dist/designer/data/systems/vibrant/components.html +136 -0
  413. package/dist/designer/data/systems/vibrant/tokens.css +63 -0
  414. package/dist/designer/data/systems/vintage/DESIGN.md +71 -0
  415. package/dist/designer/data/systems/vintage/components.html +136 -0
  416. package/dist/designer/data/systems/vintage/tokens.css +63 -0
  417. package/dist/designer/data/systems/vodafone/DESIGN.md +426 -0
  418. package/dist/designer/data/systems/vodafone/components.html +342 -0
  419. package/dist/designer/data/systems/vodafone/tokens.css +64 -0
  420. package/dist/designer/data/systems/voltagent/DESIGN.md +326 -0
  421. package/dist/designer/data/systems/voltagent/components.html +154 -0
  422. package/dist/designer/data/systems/voltagent/tokens.css +63 -0
  423. package/dist/designer/data/systems/warm-editorial/DESIGN.md +65 -0
  424. package/dist/designer/data/systems/warm-editorial/components.html +136 -0
  425. package/dist/designer/data/systems/warm-editorial/tokens.css +63 -0
  426. package/dist/designer/data/systems/warp/DESIGN.md +256 -0
  427. package/dist/designer/data/systems/warp/components.html +411 -0
  428. package/dist/designer/data/systems/warp/tokens.css +156 -0
  429. package/dist/designer/data/systems/webex/DESIGN.md +207 -0
  430. package/dist/designer/data/systems/webex/components.html +342 -0
  431. package/dist/designer/data/systems/webex/tokens.css +64 -0
  432. package/dist/designer/data/systems/webflow/DESIGN.md +95 -0
  433. package/dist/designer/data/systems/webflow/components.html +413 -0
  434. package/dist/designer/data/systems/webflow/tokens.css +191 -0
  435. package/dist/designer/data/systems/wechat/DESIGN.md +302 -0
  436. package/dist/designer/data/systems/wechat/components.html +507 -0
  437. package/dist/designer/data/systems/wechat/tokens.css +176 -0
  438. package/dist/designer/data/systems/wired/DESIGN.md +281 -0
  439. package/dist/designer/data/systems/wired/components.html +342 -0
  440. package/dist/designer/data/systems/wired/tokens.css +64 -0
  441. package/dist/designer/data/systems/wise/DESIGN.md +176 -0
  442. package/dist/designer/data/systems/wise/components.html +365 -0
  443. package/dist/designer/data/systems/wise/tokens.css +141 -0
  444. package/dist/designer/data/systems/x-ai/DESIGN.md +260 -0
  445. package/dist/designer/data/systems/x-ai/components.html +460 -0
  446. package/dist/designer/data/systems/x-ai/tokens.css +268 -0
  447. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +402 -0
  448. package/dist/designer/data/systems/xiaohongshu/components.html +865 -0
  449. package/dist/designer/data/systems/xiaohongshu/tokens.css +193 -0
  450. package/dist/designer/data/systems/zapier/DESIGN.md +331 -0
  451. package/dist/designer/data/systems/zapier/components.html +342 -0
  452. package/dist/designer/data/systems/zapier/tokens.css +64 -0
  453. package/dist/designer/guidelines.js +176 -0
  454. package/dist/designer/index.js +236 -0
  455. package/dist/designer/skills.js +1675 -0
  456. package/dist/designer/systems.js +216 -0
  457. package/dist/server/pi-bridge.js +155 -5
  458. package/dist/server/session-stream.js +45 -1
  459. package/package.json +1 -1
package/dist/designer/skills.js ADDED
@@ -0,0 +1,1675 @@
1
+ /**
2
+ * Embedded Design Skill Workflows
3
+ *
4
+ * Each skill is a structured workflow that guides the LLM through producing
5
+ * a specific kind of design artifact. Skills are based on the Open Design
6
+ * project (https://github.com/nexu-io/open-design).
7
+ *
8
+ * The LLM reads the skill workflow, then uses its existing tools (write, read,
9
+ * bash) to produce output files in the working directory.
10
+ */
11
+ export const DESIGN_SKILLS = [
12
+ {
13
+ name: "web-prototype",
14
+ scenario: "design",
15
+ description: "General-purpose web prototype. Single self-contained HTML file with modern CSS, responsive layout, and polished design tokens.",
16
+ outputKind: "html",
17
+ workflow: `# Web Prototype Skill
18
+
19
+ Produce a single, self-contained HTML file for a web page prototype. This is your workflow — follow it exactly.
20
+
21
+ ## Phase 0 — Pre-flight (before writing any code)
22
+
23
+ 1. Read the active DESIGN SYSTEM (provided below). Map its color tokens to CSS custom properties.
24
+ 2. Determine: what kind of page? Landing page, marketing site, docs, SaaS, portfolio?
25
+ 3. Vocalize the system you'll use before writing: "I'll use the [X] design system with [Y] color palette and [Z] typography."
26
+
27
+ ## Phase 1 — HTML Shell
28
+
29
+ Create \`index.html\` with this skeleton:
30
+
31
+ \`\`\`html
32
+ <!doctype html>
33
+ <html lang="en">
34
+ <head>
35
+ <meta charset="utf-8">
36
+ <meta name="viewport" content="width=device-width, initial-scale=1">
37
+ <title>Page Title</title>
38
+ <style>
39
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
40
+
41
+ :root {
42
+ /* Map design system tokens here */
43
+ --color-bg: ...;
44
+ --color-text: ...;
45
+ --color-accent: ...;
46
+ --font-sans: ...;
47
+ --font-serif: ...;
48
+ --radius: 8px;
49
+ --max-width: 1080px;
50
+ }
51
+
52
+ body {
53
+ font-family: var(--font-sans);
54
+ color: var(--color-text);
55
+ background: var(--color-bg);
56
+ line-height: 1.6;
57
+ -webkit-font-smoothing: antialiased;
58
+ }
59
+
60
+ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
61
+
62
+ /* Write all component styles below */
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <!-- Sections go here -->
67
+ </body>
68
+ </html>
69
+ \`\`\`
70
+
71
+ ## Phase 2 — Compose Sections
72
+
73
+ Pick from these section patterns based on the page type. Each section is a semantic HTML block inside \`.container\`:
74
+
75
+ ### Hero (always first)
76
+ \`\`\`html
77
+ <section class="hero">
78
+ <div class="container">
79
+ <h1>Bold headline that states the value</h1>
80
+ <p>One-sentence subtext that adds context. 20-30 words max.</p>
81
+ <div class="hero-actions">
82
+ <a href="#" class="btn-primary">Primary CTA</a>
83
+ <a href="#" class="btn-secondary">Secondary</a>
84
+ </div>
85
+ </div>
86
+ </section>
87
+ \`\`\`
88
+
89
+ ### Feature Grid
90
+ \`\`\`html
91
+ <section class="features">
92
+ <div class="container">
93
+ <h2>Section heading</h2>
94
+ <div class="grid-3">
95
+ <div class="feature-card">
96
+ <div class="feature-icon">[icon]</div>
97
+ <h3>Feature name</h3>
98
+ <p>Concise description. One sentence.</p>
99
+ </div>
100
+ <!-- repeat 3-6 times -->
101
+ </div>
102
+ </div>
103
+ </section>
104
+ \`\`\`
105
+
106
+ ### Social Proof
107
+ \`\`\`html
108
+ <section class="proof">
109
+ <div class="container">
110
+ <h2>Trusted by</h2>
111
+ <div class="logo-strip">[company logos or names]</div>
112
+ <blockquote>"Compelling quote from a real-sounding persona." <cite>— Name, Role at Company</cite></blockquote>
113
+ </div>
114
+ </section>
115
+ \`\`\`
116
+
117
+ ### CTA Footer
118
+ \`\`\`html
119
+ <section class="cta">
120
+ <div class="container">
121
+ <h2>Ready to start?</h2>
122
+ <p>One-sentence prompt.</p>
123
+ <a href="#" class="btn-primary">Get Started</a>
124
+ </div>
125
+ </section>
126
+ \`\`\`
127
+
128
+ ### Pricing (if needed)
129
+ \`\`\`html
130
+ <section class="pricing">
131
+ <div class="container">
132
+ <h2>Simple pricing</h2>
133
+ <div class="grid-3">
134
+ <div class="pricing-card">
135
+ <h3>Starter</h3>
136
+ <div class="price">$X<span>/mo</span></div>
137
+ <ul>
138
+ <li>Feature one</li>
139
+ <li>Feature two</li>
140
+ </ul>
141
+ <a href="#" class="btn-primary">Get Started</a>
142
+ </div>
143
+ <!-- 2-3 tiers -->
144
+ </div>
145
+ </div>
146
+ </section>
147
+ \`\`\`
148
+
149
+ ## Phase 3 — Component Styles
150
+
151
+ Apply design-system tokens to each component:
152
+
153
+ - **Hero**: Full-bleed background matching --color-bg-secondary or --color-bg-primary (dark systems). h1 at 48-80px, 700-800 weight, tight line-height. Subtext at 18-20px, --color-text-secondary.
154
+ - **Grid**: CSS Grid, \`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\`, 24-32px gap.
155
+ - **Feature Cards**: Padding 32px, background --color-bg-surface, border-radius --radius, subtle border from --color-border.
156
+ - **Buttons**: Display inline-flex, align-items center, padding 12px 24px, border-radius --radius, font-weight 600. Primary: --color-accent bg, white text. Secondary: transparent, accent border.
157
+ - **Responsive**: Mobile-first. At 768px, adjust grid columns, reduce heading sizes by 25%, stack hero content vertically.
158
+
159
+ ## Phase 4 — Anti-Slop Check
160
+
161
+ Before finalizing, verify:
162
+ - [ ] No warm beige/cream/peach backgrounds (unless the design system specifies them)
163
+ - [ ] No Inter or Roboto unless the design system calls for them
164
+ - [ ] No gradient backgrounds unless the design system uses them
165
+ - [ ] No emoji as icons — use Unicode symbols or SVG
166
+ - [ ] No lorem ipsum — every word is meaningful
167
+ - [ ] No rounded-left-border accent cards (the "AI slop" signature)
168
+ - [ ] Colors come from the design system, not defaults
169
+ - [ ] Typography scale is consistent (not random sizes)`,
170
+ },
171
+ {
172
+ name: "saas-landing",
173
+ scenario: "marketing",
174
+ description: "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Production-ready marketing page structure.",
175
+ outputKind: "html",
176
+ workflow: `# SaaS Landing Skill
177
+
178
+ Produce a single-page SaaS landing page. This is your workflow — follow it exactly.
179
+
180
+ ## Phase 0 — Pre-flight
181
+
182
+ 1. Read the design system. Map all color tokens.
183
+ 2. Determine: product name, tagline, audience, has pricing? how many social proof items?
184
+ 3. Vocalize: "I'll build a SaaS landing for [product] using the [system] design system. Sections: hero, features (6), social proof (3 logos + quote), pricing (3 tiers), CTA."
185
+
186
+ ## Phase 1 — Shell
187
+
188
+ Create \`index.html\` with the same skeleton as web-prototype, but use this section order:
189
+
190
+ 1. **Navigation** — Sticky top, 64px height. Logo left, nav links right (Features, Pricing, Docs), "Sign In" + "Get Started" CTA.
191
+ 2. **Hero** — Two-column: left = headline + subtext + CTA + "no credit card" badge, right = product screenshot or illustration.
192
+ 3. **Trust Strip** — 5-6 company logos, grayscale, 80px height each.
193
+ 4. **Features** — 3×2 grid. Each card: icon, title, description. Focus on benefits, not specs.
194
+ 5. **How It Works** — 3-step horizontal flow. Number + title + short description.
195
+ 6. **Social Proof** — Quote block + person attribution.
196
+ 7. **Pricing** — 3-tier cards. Highlight the middle tier with a "Popular" badge.
197
+ 8. **FAQ** — Accordion or simple Q&A list, 4-6 items.
198
+ 9. **CTA Footer** — Full-width, centered, strong headline.
199
+ 10. **Footer** — Logo, copyright, link columns.
200
+
201
+ ## Phase 2 — Key Component Styles
202
+
203
+ ### Navigation
204
+ \`\`\`css
205
+ .nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; backdrop-filter: blur(12px); }
206
+ .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
207
+ .nav-links { display: flex; gap: 32px; align-items: center; }
208
+ \`\`\`
209
+
210
+ ### Hero
211
+ \`\`\`css
212
+ .hero { padding: 120px 0 80px; }
213
+ .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
214
+ .hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
215
+ .hero p { font-size: 20px; color: var(--color-text-secondary); margin: 24px 0 32px; max-width: 480px; }
216
+ \`\`\`
217
+
218
+ ### Pricing Cards
219
+ \`\`\`css
220
+ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
221
+ .pricing-card { padding: 40px 32px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
222
+ .pricing-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); transform: scale(1.03); }
223
+ .price { font-size: 48px; font-weight: 800; margin: 16px 0; }
224
+ .price span { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); }
225
+ \`\`\`
226
+
227
+ ## Phase 3 — Content Rules
228
+
229
+ - Every headline sells a benefit, not describes a feature
230
+ - Pricing: use specific numbers ($29, $79, $199) not "Free / Pro / Enterprise" placeholders
231
+ - Social proof: realistic company names, real-sounding quote
232
+ - CTA button text: action-oriented — "Start Building", "Get Early Access", "See Plans"
233
+ - No lorem ipsum, no placeholder images that look like placeholders — use gradient shapes
234
+
235
+ ## Phase 4 — Anti-Slop Check
236
+
237
+ Same checklist as web-prototype, plus:
238
+ - [ ] Pricing cards don't all look identical — featured tier is visually distinct
239
+ - [ ] Hero doesn't use a gradient background (use solid, pattern, or image)
240
+ - [ ] Trust logos are monochrome, same height, evenly spaced`,
241
+ },
242
+ {
243
+ name: "slide-deck",
244
+ scenario: "marketing",
245
+ description: "Presentation slide deck as a single HTML file. Fixed 16:9 canvas with keyboard navigation, slide counter, and print-to-PDF support.",
246
+ outputKind: "slides",
247
+ workflow: `# Slide Deck Skill
248
+
249
+ Produce a presentation deck as a single HTML file. 16:9 ratio (1920×1080), keyboard navigation, slide counter.
250
+
251
+ ## Phase 0 — Pre-flight
252
+
253
+ 1. Read the design system for color tokens.
254
+ 2. Determine: deck title, audience, number of slides, tone (pitch, educational, report).
255
+ 3. Vocalize the plan: "I'll create a [N]-slide deck: [slide titles in order]."
256
+
257
+ ## Phase 1 — Framework Skeleton
258
+
259
+ Create \`deck.html\` with this exact framework. The scaling/navigation JS is load-bearing — copy it verbatim.
260
+
261
+ \`\`\`html
262
+ <!doctype html>
263
+ <html lang="en">
264
+ <head>
265
+ <meta charset="utf-8">
266
+ <meta name="viewport" content="width=device-width, initial-scale=1">
267
+ <title>Deck Title</title>
268
+ <style>
269
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
270
+
271
+ :root {
272
+ --slide-w: 1920px;
273
+ --slide-h: 1080px;
274
+ /* Design system tokens here */
275
+ }
276
+
277
+ html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font-sans); }
278
+
279
+ #scaler {
280
+ position: absolute;
281
+ top: 50%; left: 50%;
282
+ transform-origin: 0 0;
283
+ }
284
+
285
+ .slide {
286
+ position: absolute;
287
+ top: 0; left: 0;
288
+ width: var(--slide-w);
289
+ height: var(--slide-h);
290
+ display: none;
291
+ overflow: hidden;
292
+ }
293
+ .slide.active { display: flex; }
294
+
295
+ #counter {
296
+ position: fixed; bottom: 16px; right: 16px; z-index: 100;
297
+ background: rgba(0,0,0,0.6); color: #fff; padding: 4px 12px;
298
+ border-radius: 4px; font-size: 14px; font-family: monospace;
299
+ }
300
+
301
+ @media print {
302
+ html, body { width: auto; height: auto; overflow: visible; background: #fff; }
303
+ #scaler { position: static; transform: none; }
304
+ .slide { position: relative; display: block !important; break-after: page; }
305
+ #counter { display: none; }
306
+ }
307
+ </style>
308
+ </head>
309
+ <body>
310
+ <div id="scaler">
311
+ <div class="slide active" data-slide="1"><!-- content --></div>
312
+ <div class="slide" data-slide="2"><!-- content --></div>
313
+ <!-- ... -->
314
+ </div>
315
+ <div id="counter">1 / N</div>
316
+ <script>
317
+ const slides = document.querySelectorAll('.slide');
318
+ let current = 0;
319
+ function show(i) {
320
+ slides[current].classList.remove('active');
321
+ current = (i + slides.length) % slides.length;
322
+ slides[current].classList.add('active');
323
+ document.getElementById('counter').textContent = (current + 1) + ' / ' + slides.length;
324
+ }
325
+ function scale() {
326
+ const scaler = document.getElementById('scaler');
327
+ const sw = window.innerWidth, sh = window.innerHeight;
328
+ const ratio = Math.min(sw / 1920, sh / 1080);
329
+ scaler.style.transform = 'translate(' + (sw/2) + 'px,' + (sh/2) + 'px) scale(' + ratio + ')';
330
+ }
331
+ document.addEventListener('keydown', e => {
332
+ if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
333
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); show(current - 1); }
334
+ if (e.key === 'Home') { e.preventDefault(); show(0); }
335
+ if (e.key === 'End') { e.preventDefault(); show(slides.length - 1); }
336
+ });
337
+ window.addEventListener('resize', scale);
338
+ scale();
339
+ localStorage.setItem('deck-slide', current);
340
+ </script>
341
+ </body>
342
+ </html>
343
+ \`\`\`
344
+
345
+ ## Phase 2 — Slide Layouts
346
+
347
+ Each slide is a \`.slide\` div with \`.active\` on the first. Tag slides with \`data-slide="N"\`.
348
+
349
+ ### Title Slide
350
+ \`\`\`html
351
+ <div class="slide active" data-slide="1">
352
+ <div class="slide-content title-slide">
353
+ <p class="slide-label">Company · Date</p>
354
+ <h1>Deck Title</h1>
355
+ <p class="slide-subtitle">One-line subtitle</p>
356
+ </div>
357
+ </div>
358
+ \`\`\`
359
+ Style: centered content, 80px headline, dark background with design-system colors.
360
+
361
+ ### Text-Only Slide
362
+ \`\`\`html
363
+ <div class="slide" data-slide="2">
364
+ <div class="slide-content text-slide">
365
+ <h2>Section Title</h2>
366
+ <ul>
367
+ <li>Bullet point one — keep it short, 8-12 words</li>
368
+ <li>Bullet point two</li>
369
+ <li>Bullet point three</li>
370
+ </ul>
371
+ </div>
372
+ </div>
373
+ \`\`\`
374
+
375
+ ### Two-Column Slide
376
+ \`\`\`html
377
+ <div class="slide" data-slide="3">
378
+ <div class="slide-content two-col">
379
+ <div class="col">
380
+ <h2>Left Heading</h2>
381
+ <p>Descriptive text. 20-40 words.</p>
382
+ </div>
383
+ <div class="col">
384
+ <div class="chart-placeholder">[chart, image, or code block]</div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ \`\`\`
389
+
390
+ ### Metrics Slide
391
+ \`\`\`html
392
+ <div class="slide" data-slide="4">
393
+ <div class="slide-content metrics-slide">
394
+ <h2>Key Results</h2>
395
+ <div class="metrics-grid">
396
+ <div class="metric">
397
+ <span class="metric-value">85%</span>
398
+ <span class="metric-label">Metric name</span>
399
+ </div>
400
+ <!-- 3-4 metrics -->
401
+ </div>
402
+ </div>
403
+ </div>
404
+ \`\`\`
405
+
406
+ ### Closing Slide
407
+ \`\`\`html
408
+ <div class="slide" data-slide="N">
409
+ <div class="slide-content title-slide closing">
410
+ <h1>Thank You</h1>
411
+ <p class="slide-subtitle">contact@company.com</p>
412
+ </div>
413
+ </div>
414
+ \`\`\`
415
+
416
+ ## Phase 3 — Slide Styles
417
+
418
+ \`\`\`css
419
+ .slide-content { width: 100%; height: 100%; padding: 80px 120px; display: flex; flex-direction: column; justify-content: center; }
420
+
421
+ .title-slide { align-items: center; text-align: center; background: var(--color-bg-primary); }
422
+ .title-slide h1 { font-size: 80px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
423
+ .slide-label { font-size: 20px; color: var(--color-text-secondary); margin-bottom: 24px; }
424
+ .slide-subtitle { font-size: 28px; color: var(--color-text-secondary); margin-top: 16px; }
425
+
426
+ .text-slide h2 { font-size: 48px; font-weight: 700; margin-bottom: 40px; }
427
+ .text-slide ul { font-size: 28px; line-height: 1.8; }
428
+ .text-slide li { margin-bottom: 12px; color: var(--color-text-secondary); }
429
+ .text-slide li::marker { color: var(--color-accent); }
430
+
431
+ .two-col { flex-direction: row; gap: 80px; }
432
+ .two-col .col { flex: 1; display: flex; flex-direction: column; justify-content: center; }
433
+ .two-col h2 { font-size: 48px; margin-bottom: 24px; }
434
+ .two-col p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
435
+
436
+ .metrics-slide { align-items: center; justify-content: center; text-align: center; }
437
+ .metrics-grid { display: flex; gap: 80px; margin-top: 48px; }
438
+ .metric-value { font-size: 72px; font-weight: 800; color: var(--color-accent); display: block; }
439
+ .metric-label { font-size: 20px; color: var(--color-text-secondary); margin-top: 8px; display: block; }
440
+
441
+ .closing { background: var(--color-bg-primary); }
442
+ \`\`\`
443
+
444
+ ## Phase 4 — Content Rules for Slides
445
+
446
+ - Slide text is never smaller than 24px — this is a 16:9 canvas, not a web page
447
+ - Headlines: 48-80px, one line preferred
448
+ - Body text: 24-28px
449
+ - Bullet points: 28px, max 5 per slide, each 6-12 words
450
+ - Every slide gets a \`data-slide="N"\` attribute
451
+ - Slides are 1-indexed
452
+ - Max 12 slides unless the user asks for more
453
+ - The closing slide always says "Thank You" with contact info`,
454
+ },
455
+ {
456
+ name: "mobile-app",
457
+ scenario: "design",
458
+ description: "Mobile app prototype. Phone-frame-contained HTML with iOS/Android patterns, touch targets, and native-feel interactions.",
459
+ outputKind: "html",
460
+ workflow: `# Mobile App Prototype Skill
461
+
462
+ Produce a mobile app prototype as a single HTML file. Phone-frame contained, touch-friendly, native-feel interactions.
463
+
464
+ ## Phase 0 — Pre-flight
465
+
466
+ 1. Read the design system for color tokens.
467
+ 2. Determine: app name, screens needed (2-5), platform style (iOS or Material).
468
+ 3. Vocalize: "I'll build [app name] with [N] screens: [screen names]. [iOS/Material] patterns."
469
+
470
+ ## Phase 1 — Shell with Phone Frame
471
+
472
+ Create \`app.html\` with a phone frame wrapper:
473
+
474
+ \`\`\`html
475
+ <!doctype html>
476
+ <html lang="en">
477
+ <head>
478
+ <meta charset="utf-8">
479
+ <meta name="viewport" content="width=device-width, initial-scale=1">
480
+ <title>App Name</title>
481
+ <style>
482
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
483
+
484
+ :root {
485
+ --phone-w: 390px;
486
+ --phone-h: 844px;
487
+ --phone-radius: 44px;
488
+ --safe-top: 54px;
489
+ --safe-bottom: 34px;
490
+ /* Design system tokens */
491
+ }
492
+
493
+ body {
494
+ display: flex;
495
+ justify-content: center;
496
+ align-items: center;
497
+ min-height: 100vh;
498
+ background: #f0f0f0;
499
+ font-family: -apple-system, "SF Pro Text", "Inter", sans-serif;
500
+ }
501
+
502
+ .phone-frame {
503
+ width: var(--phone-w);
504
+ height: var(--phone-h);
505
+ background: var(--color-bg-primary);
506
+ border-radius: var(--phone-radius);
507
+ overflow: hidden;
508
+ position: relative;
509
+ box-shadow: 0 0 0 8px #1a1a1a, 0 0 0 10px #333, 0 20px 60px rgba(0,0,0,0.3);
510
+ }
511
+
512
+ .status-bar {
513
+ height: var(--safe-top);
514
+ display: flex;
515
+ justify-content: space-between;
516
+ align-items: center;
517
+ padding: 0 24px;
518
+ font-size: 14px;
519
+ font-weight: 600;
520
+ background: var(--color-bg-primary);
521
+ }
522
+
523
+ .screen {
524
+ position: absolute;
525
+ top: var(--safe-top);
526
+ left: 0;
527
+ right: 0;
528
+ bottom: var(--safe-bottom);
529
+ display: none;
530
+ flex-direction: column;
531
+ overflow-y: auto;
532
+ -webkit-overflow-scrolling: touch;
533
+ }
534
+ .screen.active { display: flex; }
535
+
536
+ .bottom-nav {
537
+ position: absolute;
538
+ bottom: 0;
539
+ left: 0;
540
+ right: 0;
541
+ height: var(--safe-bottom);
542
+ display: flex;
543
+ border-top: 1px solid var(--color-border);
544
+ background: var(--color-bg-surface, var(--color-bg-primary));
545
+ }
546
+ .nav-item {
547
+ flex: 1;
548
+ display: flex;
549
+ flex-direction: column;
550
+ align-items: center;
551
+ justify-content: center;
552
+ gap: 2px;
553
+ font-size: 10px;
554
+ color: var(--color-text-secondary);
555
+ cursor: pointer;
556
+ user-select: none;
557
+ }
558
+ .nav-item.active { color: var(--color-accent); }
559
+ .nav-icon { font-size: 22px; line-height: 1; }
560
+ </style>
561
+ </head>
562
+ <body>
563
+ <div class="phone-frame">
564
+ <div class="status-bar">
565
+ <span>9:41</span>
566
+ <span>●●●○ WiFi ▮▮▮</span>
567
+ </div>
568
+
569
+ <div class="screen active" id="screen-home"><!-- Home content --></div>
570
+ <div class="screen" id="screen-detail"><!-- Detail content --></div>
571
+ <div class="screen" id="screen-settings"><!-- Settings content --></div>
572
+
573
+ <div class="bottom-nav">
574
+ <div class="nav-item active" onclick="showScreen('home')">
575
+ <span class="nav-icon">🏠</span>Home
576
+ </div>
577
+ <div class="nav-item" onclick="showScreen('detail')">
578
+ <span class="nav-icon">🔍</span>Search
579
+ </div>
580
+ <div class="nav-item" onclick="showScreen('settings')">
581
+ <span class="nav-icon">👤</span>Profile
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <script>
587
+ function showScreen(id) {
588
+ document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
589
+ document.getElementById('screen-' + id).classList.add('active');
590
+ document.querySelectorAll('.nav-item').forEach((n, i) => {
591
+ n.classList.toggle('active', n.textContent.trim().toLowerCase().includes(id));
592
+ });
593
+ }
594
+ </script>
595
+ </body>
596
+ </html>
597
+ \`\`\`
598
+
599
+ ## Phase 2 — Component Patterns
600
+
601
+ ### List Item (44px minimum tap target)
602
+ \`\`\`css
603
+ .list-item {
604
+ display: flex;
605
+ align-items: center;
606
+ padding: 12px 16px;
607
+ min-height: 44px;
608
+ gap: 12px;
609
+ border-bottom: 0.5px solid var(--color-border);
610
+ cursor: pointer;
611
+ }
612
+ .list-item:active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); }
613
+ .list-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
614
+ .list-item-content { flex: 1; }
615
+ .list-item-title { font-size: 16px; font-weight: 500; }
616
+ .list-item-subtitle { font-size: 14px; color: var(--color-text-secondary); margin-top: 2px; }
617
+ .list-item-trailing { color: var(--color-text-secondary); font-size: 14px; }
618
+ \`\`\`
619
+
620
+ ### Card
621
+ \`\`\`css
622
+ .card {
623
+ background: var(--color-bg-surface, #fff);
624
+ border-radius: 16px;
625
+ padding: 16px;
626
+ margin: 8px 16px;
627
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
628
+ }
629
+ .card-image { width: 100%; height: 180px; border-radius: 12px; object-fit: cover; background: var(--color-bg-secondary); }
630
+ .card-title { font-size: 17px; font-weight: 600; margin: 12px 0 4px; }
631
+ .card-subtitle { font-size: 14px; color: var(--color-text-secondary); }
632
+ \`\`\`
633
+
634
+ ### Input Field
635
+ \`\`\`css
636
+ .input-group { padding: 8px 16px; }
637
+ .input-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }
638
+ .input-field {
639
+ width: 100%;
640
+ height: 44px;
641
+ padding: 0 12px;
642
+ border: 1px solid var(--color-border);
643
+ border-radius: 10px;
644
+ font-size: 16px;
645
+ background: var(--color-bg-secondary, #f5f5f5);
646
+ outline: none;
647
+ }
648
+ .input-field:focus { border-color: var(--color-accent); }
649
+ \`\`\`
650
+
651
+ ### Button
652
+ \`\`\`css
653
+ .btn {
654
+ display: flex;
655
+ align-items: center;
656
+ justify-content: center;
657
+ height: 50px;
658
+ padding: 0 24px;
659
+ border-radius: 14px;
660
+ font-size: 17px;
661
+ font-weight: 600;
662
+ border: none;
663
+ cursor: pointer;
664
+ margin: 8px 16px;
665
+ user-select: none;
666
+ }
667
+ .btn-primary { background: var(--color-accent); color: #fff; }
668
+ .btn-secondary { background: var(--color-bg-secondary, #f0f0f0); color: var(--color-text-primary); }
669
+ .btn:active { opacity: 0.8; transform: scale(0.98); }
670
+ \`\`\`
671
+
672
+ ## Phase 3 — Mobile-Specific Rules
673
+
674
+ - Minimum touch target: 44×44px
675
+ - Font sizes: 13px (captions), 15px (body), 17px (headlines), 22px (titles), 28px (hero)
676
+ - Padding: 16px horizontal standard, 8-16px card margins
677
+ - Never use hover effects — use :active for tap feedback
678
+ - Scrollable content uses \`overflow-y: auto; -webkit-overflow-scrolling: touch;\`
679
+ - Status bar: 54px height standard, dark or light based on design system
680
+ - Bottom safe area: 34px for home indicator
681
+ - Images: use \`object-fit: cover\` with fixed aspect ratios, gradient placeholders
682
+ - No hamburger menus — use tab bar navigation (3-5 items)`,
683
+ },
684
+ {
685
+ name: "dashboard",
686
+ scenario: "design",
687
+ description: "Data dashboard with cards, charts, tables, and KPIs. Clean information hierarchy with grid layout.",
688
+ outputKind: "html",
689
+ workflow: `# Dashboard Skill
690
+
691
+ Produce a data dashboard as a single HTML file. Card-based layout with KPIs, charts (CSS-only or SVG), tables, and activity feeds.
692
+
693
+ ## Phase 0 — Pre-flight
694
+
695
+ 1. Read the design system. Dashboards work best with clean, muted systems (Linear, Notion, Vercel).
696
+ 2. Determine: dashboard name, key metrics, sections needed.
697
+ 3. Vocalize: "I'll build a [name] dashboard with [N] sections: [section names]."
698
+
699
+ ## Phase 1 — Shell
700
+
701
+ Create \`dashboard.html\` with sidebar + main content layout:
702
+
703
+ \`\`\`html
704
+ <!doctype html>
705
+ <html lang="en">
706
+ <head>
707
+ <meta charset="utf-8">
708
+ <meta name="viewport" content="width=device-width, initial-scale=1">
709
+ <title>Dashboard</title>
710
+ <style>
711
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
712
+
713
+ :root {
714
+ --sidebar-w: 240px;
715
+ /* Design system tokens */
716
+ }
717
+
718
+ body {
719
+ display: flex;
720
+ min-height: 100vh;
721
+ font-family: var(--font-sans);
722
+ background: var(--color-bg-secondary);
723
+ color: var(--color-text-primary);
724
+ }
725
+
726
+ .sidebar {
727
+ width: var(--sidebar-w);
728
+ background: var(--color-bg-primary);
729
+ border-right: 1px solid var(--color-border);
730
+ padding: 24px 16px;
731
+ display: flex;
732
+ flex-direction: column;
733
+ position: sticky;
734
+ top: 0;
735
+ height: 100vh;
736
+ }
737
+ .sidebar-logo { font-size: 18px; font-weight: 700; margin-bottom: 32px; }
738
+ .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
739
+ .sidebar-link {
740
+ padding: 8px 12px;
741
+ border-radius: 6px;
742
+ font-size: 14px;
743
+ color: var(--color-text-secondary);
744
+ text-decoration: none;
745
+ cursor: pointer;
746
+ }
747
+ .sidebar-link:hover, .sidebar-link.active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); color: var(--color-text-primary); }
748
+
749
+ .main {
750
+ flex: 1;
751
+ padding: 32px;
752
+ overflow-y: auto;
753
+ }
754
+ .main-header { margin-bottom: 32px; }
755
+ .main-header h1 { font-size: 28px; font-weight: 700; }
756
+ .main-header p { color: var(--color-text-secondary); margin-top: 4px; }
757
+ </style>
758
+ </head>
759
+ <body>
760
+ <aside class="sidebar">
761
+ <div class="sidebar-logo">Dashboard</div>
762
+ <nav class="sidebar-nav">
763
+ <a class="sidebar-link active">Overview</a>
764
+ <a class="sidebar-link">Analytics</a>
765
+ <a class="sidebar-link">Reports</a>
766
+ <a class="sidebar-link">Settings</a>
767
+ </nav>
768
+ </aside>
769
+ <main class="main">
770
+ <div class="main-header">
771
+ <h1>Overview</h1>
772
+ <p>Last updated: just now</p>
773
+ </div>
774
+ <!-- Content sections here -->
775
+ </main>
776
+ </body>
777
+ </html>
778
+ \`\`\`
779
+
780
+ ## Phase 2 — Component Patterns
781
+
782
+ ### KPI Cards (4-up row)
783
+ \`\`\`css
784
+ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
785
+ .kpi-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 20px; }
786
+ .kpi-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
787
+ .kpi-value { font-size: 32px; font-weight: 700; margin-top: 8px; }
788
+ .kpi-change { font-size: 13px; margin-top: 4px; }
789
+ .kpi-change.up { color: var(--color-success, #30a46c); }
790
+ .kpi-change.down { color: var(--color-danger, #e5484d); }
791
+ \`\`\`
792
+
793
+ ### Chart (CSS-only bar chart)
794
+ \`\`\`css
795
+ .chart-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 24px; margin-bottom: 24px; }
796
+ .chart-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
797
+ .bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
798
+ .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-accent); min-height: 4px; position: relative; transition: height 0.3s; }
799
+ .bar:hover { opacity: 0.8; }
800
+ .bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
801
+ \`\`\`
802
+
803
+ ### Table
804
+ \`\`\`css
805
+ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
806
+ .data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
807
+ .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
808
+ .data-table tr:hover td { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
809
+ \`\`\`
810
+
811
+ ### Activity Feed
812
+ \`\`\`css
813
+ .activity-feed { display: flex; flex-direction: column; }
814
+ .activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
815
+ .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 6px; flex-shrink: 0; }
816
+ .activity-content { flex: 1; }
817
+ .activity-text { font-size: 14px; }
818
+ .activity-time { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
819
+ \`\`\`
820
+
821
+ ## Phase 3 — Layout Patterns
822
+
823
+ ### Two-column main area
824
+ \`\`\`css
825
+ .dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
826
+ \`\`\`
827
+
828
+ ### Responsive
829
+ \`\`\`css
830
+ @media (max-width: 1200px) {
831
+ .kpi-grid { grid-template-columns: repeat(2, 1fr); }
832
+ .dashboard-grid { grid-template-columns: 1fr; }
833
+ }
834
+ @media (max-width: 768px) {
835
+ .sidebar { display: none; }
836
+ .main { padding: 16px; }
837
+ .kpi-grid { grid-template-columns: 1fr; }
838
+ }
839
+ \`\`\`
840
+
841
+ ## Phase 4 — Dashboard Design Rules
842
+
843
+ - Information hierarchy: KPIs → Main chart → Detail tables → Activity
844
+ - Use consistent card padding (24px)
845
+ - Numbers should be right-aligned in table columns
846
+ - Color code only the most important KPI change (1-2 per row max)
847
+ - Tables: max 6 columns, zebra striping optional, hover row highlight`,
848
+ },
849
+ {
850
+ name: "social-carousel",
851
+ scenario: "marketing",
852
+ description: "Social media carousel. Multiple slides in a single HTML file with horizontal scroll, designed for Instagram/LinkedIn/Twitter export.",
853
+ outputKind: "html",
854
+ workflow: `# Social Carousel Skill
855
+
856
+ Produce a social media carousel as a single HTML file. 1080×1080 (Instagram) or 1200×628 (LinkedIn/Twitter), horizontal scroll, export-friendly.
857
+
858
+ ## Phase 0 — Pre-flight
859
+
860
+ 1. Read the design system.
861
+ 2. Determine: platform (instagram=1080×1080, linkedin=1200×627), number of cards (3-10), topic.
862
+ 3. Vocalize: "I'll create a [N]-card carousel for [platform] about [topic]."
863
+
864
+ ## Phase 1 — Shell
865
+
866
+ Create \`carousel.html\`:
867
+
868
+ \`\`\`html
869
+ <!doctype html>
870
+ <html lang="en">
871
+ <head>
872
+ <meta charset="utf-8">
873
+ <meta name="viewport" content="width=device-width, initial-scale=1">
874
+ <title>Carousel</title>
875
+ <style>
876
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
877
+
878
+ :root {
879
+ --card-w: 1080px;
880
+ --card-h: 1080px;
881
+ /* Design system tokens */
882
+ }
883
+
884
+ body {
885
+ background: #f0f0f0;
886
+ display: flex;
887
+ justify-content: center;
888
+ align-items: center;
889
+ min-height: 100vh;
890
+ font-family: var(--font-sans);
891
+ }
892
+
893
+ .carousel-container {
894
+ width: min(var(--card-w), 95vw);
895
+ overflow-x: auto;
896
+ scroll-snap-type: x mandatory;
897
+ display: flex;
898
+ gap: 16px;
899
+ padding: 40px 0;
900
+ -webkit-overflow-scrolling: touch;
901
+ }
902
+
903
+ .card {
904
+ flex-shrink: 0;
905
+ width: min(var(--card-w), 90vw);
906
+ aspect-ratio: 1;
907
+ scroll-snap-align: center;
908
+ border-radius: 12px;
909
+ overflow: hidden;
910
+ background: var(--color-bg-primary);
911
+ display: flex;
912
+ flex-direction: column;
913
+ box-shadow: 0 4px 24px rgba(0,0,0,0.08);
914
+ }
915
+
916
+ @media (max-width: 1100px) {
917
+ .card { width: 85vw; }
918
+ }
919
+ </style>
920
+ </head>
921
+ <body>
922
+ <div class="carousel-container">
923
+ <div class="card">
924
+ <!-- Card 1 content -->
925
+ </div>
926
+ <!-- More cards -->
927
+ </div>
928
+ </body>
929
+ </html>
930
+ \`\`\`
931
+
932
+ ## Phase 2 — Card Layouts
933
+
934
+ ### Title Card (first)
935
+ A bold, eye-catching title. Centered, large typography, accent color background or dark solid.
936
+ \`\`\`css
937
+ .card-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-accent); color: #fff; }
938
+ .card-title .number { font-size: 14px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; }
939
+ .card-title h1 { font-size: 64px; font-weight: 800; line-height: 1.1; }
940
+ .card-title p { font-size: 24px; opacity: 0.9; margin-top: 16px; max-width: 600px; }
941
+ \`\`\`
942
+
943
+ ### Content Card
944
+ \`\`\`css
945
+ .card-content { flex: 1; display: flex; flex-direction: column; padding: 64px; }
946
+ .card-content h2 { font-size: 42px; font-weight: 700; margin-bottom: 24px; }
947
+ .card-content p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
948
+ .card-content .number { font-size: 14px; color: var(--color-text-secondary); margin-top: auto; }
949
+ \`\`\`
950
+
951
+ ### Stat Card
952
+ \`\`\`css
953
+ .card-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
954
+ .card-stat .stat-value { font-size: 120px; font-weight: 800; color: var(--color-accent); line-height: 1; }
955
+ .card-stat .stat-label { font-size: 24px; color: var(--color-text-secondary); margin-top: 16px; }
956
+ \`\`\`
957
+
958
+ ### Quote Card
959
+ \`\`\`css
960
+ .card-quote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
961
+ .card-quote blockquote { font-size: 36px; font-style: italic; line-height: 1.4; max-width: 700px; }
962
+ .card-quote cite { font-size: 20px; color: var(--color-text-secondary); margin-top: 24px; font-style: normal; }
963
+ \`\`\`
964
+
965
+ ### CTA Card (last)
966
+ \`\`\`css
967
+ .card-cta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-bg-primary); }
968
+ .card-cta h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
969
+ .card-cta p { font-size: 24px; color: var(--color-text-secondary); margin-bottom: 32px; }
970
+ .card-cta .cta-text { font-size: 28px; font-weight: 600; color: var(--color-accent); }
971
+ \`\`\`
972
+
973
+ ## Phase 3 — Content Rules
974
+
975
+ - Each card has a clear visual hierarchy: big number/headline → supporting text → card number
976
+ - Card number shows position (e.g., "1/8") in bottom corner
977
+ - Title card grabs attention — use solid accent or dark bg
978
+ - Content cards: 30-60 words max
979
+ - Stat cards: one big number, one-line label
980
+ - Last card: always a CTA or summary with contact/handle
981
+ - Consistent padding within cards (64-80px)
982
+ - Each card works as a standalone image when screenshot`,
983
+ },
984
+ {
985
+ name: "design-brief",
986
+ scenario: "design",
987
+ description: "Parse a design brief into concrete tokens. Resolves 8 design dimensions (palette, accent, typography, display, layout, mood, density, constraints) from natural language or I-Lang structured format, then generates a DESIGN.md and visual preview.",
988
+ outputKind: "html",
989
+ workflow: `# Design Brief Skill
990
+
991
+ Parse a structured or natural-language design brief into a concrete DESIGN.md and optional visual preview HTML.
992
+
993
+ ## Background
994
+
995
+ This skill resolves the 8 key design dimensions that every design artifact needs, using a closed vocabulary of symbolic values that map to concrete CSS tokens. It eliminates ambiguity from vague requests like "make it clean" or "make it professional."
996
+
997
+ ## Phase 1 — Accept input
998
+
999
+ The user provides a design brief in one of two formats:
1000
+
1001
+ ### Option A: I-Lang structured brief
1002
+ \`\`\`
1003
+ [PLAN:@DESIGN|type=saas_landing]
1004
+ |palette=navy_and_white|accent=coral
1005
+ |typography=inter|display=space_grotesk
1006
+ |layout=single_column|max_width=1200px
1007
+ |mood=professional_minimal
1008
+ |density=spacious|section_gap=96px
1009
+ |hero=headline+subhead+cta
1010
+ |sections=features,pricing,testimonials,footer
1011
+ |exclude=animations,parallax,gradients
1012
+ |responsive=mobile_first
1013
+ \`\`\`
1014
+
1015
+ ### Option B: Natural language
1016
+ > "I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."
1017
+
1018
+ If the user provides Option B, convert it using the mapping table below, then proceed.
1019
+
1020
+ ### Natural language → I-Lang mapping
1021
+
1022
+ | Natural language phrase | Dimension | I-Lang value |
1023
+ |------------------------|-----------|-------------|
1024
+ | "dark mode", "dark theme" | palette | \`monochrome_dark\` |
1025
+ | "light", "white background" | palette | \`light_clean\` |
1026
+ | "earthy", "warm tones" | palette | \`earth_tones\` |
1027
+ | "pop of color", "vibrant" | accent | \`electric_blue\` or \`coral\` |
1028
+ | "subtle accent" | accent | \`muted_sage\` or \`slate\` |
1029
+ | "clean", "minimal", "simple" | mood | \`professional_minimal\` |
1030
+ | "playful", "fun", "friendly" | mood | \`playful\` |
1031
+ | "bold", "brutalist", "raw" | mood | \`brutalist\` |
1032
+ | "editorial", "magazine-like" | mood | \`editorial\` |
1033
+ | "spacious", "lots of whitespace" | density | \`spacious\` |
1034
+ | "compact", "dense", "information-rich" | density | \`compact\` |
1035
+ | "Inter", "system font" | typography | \`inter\` or \`system_ui\` |
1036
+ | "serif", "traditional" | typography | \`georgia\` or \`playfair\` |
1037
+ | "monospace", "code-like" | typography | \`jetbrains_mono\` |
1038
+ | "no animations", "static" | exclude | \`animations\` |
1039
+ | "no gradients" | exclude | \`gradients\` |
1040
+ | "single page" | layout | \`single_column\` |
1041
+ | "two columns", "sidebar" | layout | \`two_column\` |
1042
+ | "mobile first" | responsive | \`mobile_first\` |
1043
+
1044
+ ## Phase 2 — Validate 8 dimensions
1045
+
1046
+ Every design brief must resolve these 8 dimensions. If any are missing, select sensible defaults:
1047
+
1048
+ | # | Dimension | Key | Example values |
1049
+ |---|-----------|-----|---------------|
1050
+ | 1 | Color palette | \`palette\` | navy_and_white, earth_tones, monochrome_dark, light_clean |
1051
+ | 2 | Accent color | \`accent\` | coral, electric_blue, emerald, muted_sage, slate |
1052
+ | 3 | Body typography | \`typography\` | inter, system_ui, dm_sans, georgia |
1053
+ | 4 | Display typography | \`display\` | space_grotesk, clash_display, same_as_body, playfair |
1054
+ | 5 | Layout model | \`layout\` | single_column, two_column, asymmetric |
1055
+ | 6 | Mood | \`mood\` | professional_minimal, playful, brutalist, editorial |
1056
+ | 7 | Density | \`density\` | compact, balanced, spacious |
1057
+ | 8 | Constraints | \`exclude\` | animations, gradients, stock_photos, carousel |
1058
+
1059
+ ### Symbolic → concrete token resolution
1060
+
1061
+ | Symbolic value | Concrete tokens |
1062
+ |---------------|----------------|
1063
+ | \`palette=navy_and_white\` | Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8 |
1064
+ | \`palette=monochrome_dark\` | Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA |
1065
+ | \`palette=light_clean\` | Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B |
1066
+ | \`palette=earth_tones\` | Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E |
1067
+ | \`accent=coral\` | Accent: #F97316, Hover: #EA580C |
1068
+ | \`accent=electric_blue\` | Accent: #3B82F6, Hover: #2563EB |
1069
+ | \`accent=emerald\` | Accent: #10B981, Hover: #059669 |
1070
+ | \`accent=muted_sage\` | Accent: #84A98C, Hover: #6B8F73 |
1071
+ | \`accent=slate\` | Accent: #64748B, Hover: #475569 |
1072
+ | \`density=compact\` | Section spacing: 48px, Content padding: 16px/24px |
1073
+ | \`density=balanced\` | Section spacing: 72px, Content padding: 24px/40px |
1074
+ | \`density=spacious\` | Section spacing: 96px, Content padding: 24px/48px |
1075
+
1076
+ ### Default resolution rules
1077
+
1078
+ | Unspecified dimension | Default rule |
1079
+ |----------------------|-------------|
1080
+ | \`palette\` | If mood=editorial → \`light_clean\`. If mood=brutalist → \`monochrome_dark\`. Else → \`light_clean\`. |
1081
+ | \`accent\` | If palette is dark → \`coral\`. If palette is light → \`electric_blue\`. |
1082
+ | \`typography\` | Always → \`inter\` (highest cross-platform legibility). |
1083
+ | \`display\` | If mood=editorial → \`playfair\`. If mood=brutalist → \`space_grotesk\`. Else → \`same_as_body\`. |
1084
+ | \`layout\` | Always → \`single_column\`. |
1085
+ | \`mood\` | Always → \`professional_minimal\`. |
1086
+ | \`density\` | Always → \`balanced\`. |
1087
+ | \`exclude\` | Always → none (no constraints unless specified). |
1088
+
1089
+ ## Phase 3 — Generate DESIGN.md
1090
+
1091
+ Produce a DESIGN.md with these sections:
1092
+ 1. **Visual Theme & Atmosphere** — mood, feel, references
1093
+ 2. **Color Palette & Roles** — background, surface, text, accent, semantic colors
1094
+ 3. **Typography Rules** — display, body, mono font specs with sizes
1095
+ 4. **Component Stylings** — buttons, cards, inputs with concrete CSS values
1096
+ 5. **Layout Principles** — max width, grid, section spacing, content padding
1097
+ 6. **Depth & Elevation** — shadows, borders
1098
+ 7. **Do's and Don'ts** — 5-6 rules for agents
1099
+ 8. **Responsive Behavior** — breakpoints at 640px, 768px, 1024px, 1280px
1100
+ 9. **Agent Prompt Guide** — constraints for code generation
1101
+
1102
+ All color hex values, font stacks, and spacing values must come from the resolved tokens in Phase 2 — do not invent values.
1103
+
1104
+ ## Phase 4 — Generate brief-preview.html
1105
+
1106
+ Create a single HTML file visualizing the resolved tokens with 4 sections:
1107
+ 1. **Color palette swatches** — labeled with role and hex code
1108
+ 2. **Typography specimens** — Display, Body, and Mono at declared sizes
1109
+ 3. **Spacing ruler** — section spacing and content padding, labeled
1110
+ 4. **Component preview** — 2-3 live components (button, card, input) using the resolved tokens
1111
+
1112
+ Style the preview itself with the resolved design system tokens.
1113
+
1114
+ ## Phase 5 — Report defaults applied
1115
+
1116
+ List any dimensions the user did not specify and the defaults applied:
1117
+ \`\`\`
1118
+ Dimensions resolved from defaults:
1119
+ - display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
1120
+ - density: set to "balanced" (rule: no spacing preference given)
1121
+ \`\`\`
1122
+
1123
+ This transparency prevents silent assumptions from propagating into the final design.`,
1124
+ },
1125
+ {
1126
+ name: "critique",
1127
+ scenario: "design",
1128
+ description: "5-dimension expert design review. Scores any HTML artifact on Philosophy Consistency, Visual Hierarchy, Detail Execution, Functionality, and Innovation (each 0-10). Outputs an HTML report with a radar chart, evidence-backed scores, and three action lists: Keep / Fix / Quick-wins.",
1129
+ outputKind: "html",
1130
+ workflow: `# Critique Skill · 5-Dimension Expert Review
1131
+
1132
+ Produce a single-file HTML design review report that scores any artifact across 5 dimensions and proposes actionable fixes.
1133
+
1134
+ ## When to use
1135
+ - After generating an artifact (deck, prototype, landing page) and the user asks "what's wrong with this?" or "review this"
1136
+ - As a self-check loop before emitting output
1137
+ - For comparing two variants of the same design
1138
+
1139
+ ## The 5 Dimensions
1140
+
1141
+ ### 1. Philosophy Consistency
1142
+ > Does the artifact pick a clear direction and stick to it through every micro-decision?
1143
+
1144
+ Look for: one declared design direction vs three styles fighting; chrome/kicker vocabulary in one register; accent/serif/mono used by the same rule throughout.
1145
+ 0-4: Three styles fighting. 5-6: One direction but elements drift. 7-8: Coherent, occasional drift. 9-10: Every element argues for the same thesis.
1146
+
1147
+ ### 2. Visual Hierarchy
1148
+ > Can a stranger figure out what to read first, second, third — without being told?
1149
+
1150
+ Look for: largest type = most important thing; mono/serif/sans roles match information roles; clear primary/secondary/tertiary tiers.
1151
+ 0-4: Everything shouts. 5-6: Works on hero pages but breaks on body. 7-8: Clear tiers, occasional collision. 9-10: Eye moves with zero friction.
1152
+
1153
+ ### 3. Detail Execution
1154
+ > Alignment, leading, kerning at large sizes, image framing, edge-case spacing.
1155
+
1156
+ Look for: big numbers on baseline or floating; left/right column tops aligned; proportions consistent across pages; orphaned <br> causing single-character lines.
1157
+ 0-4: Visible tape and string. 5-6: Most pages clean, 1-2 ragged. 7-8: Polished, expert eye finds 2-3 misses. 9-10: Magazine-grade polish.
1158
+
1159
+ ### 4. Functionality
1160
+ > Does the artifact work for its intended use?
1161
+
1162
+ Look for: keyboard/wheel/touch nav working in decks; CTAs above the fold; phone numbers tappable on mobile; code blocks copyable; critical info readable from 4m away.
1163
+ 0-4: Visually fine but doesn't accomplish its job. 5-6: Core flow works, edge cases broken. 7-8: Robust through normal use. 9-10: Defensively engineered — handles iframe / fullscreen / paste / print.
1164
+
1165
+ ### 5. Innovation
1166
+ > Does this push past the median? Is there one element that makes people lean in?
1167
+
1168
+ Look for: one unexpected layout/motion/typographic move not required; or 100% safe generic output; innovation earned (matches direction) or grafted on.
1169
+ 0-4: Generic AI-slop median. 5-6: Competent and unmemorable. 7-8: One memorable moment, the rest solid. 9-10: Multiple moves you'd steal — each serving the thesis.
1170
+
1171
+ ## Scoring Discipline
1172
+ - **Always cite evidence** — "scored 4 because hero page mixes Playfair display with Inter sans on the same line" beats "feels inconsistent"
1173
+ - **Don't average up** — if Hierarchy is 5 because page 3 is broken, don't bump to 7 because pages 1-2 are fine. The score is the worst sustained band.
1174
+ - **Don't grade-inflate** — a 7 means strong, not acceptable. If every score is 7+, you're not reviewing critically.
1175
+ - **Innovation is allowed to be low** — 5/10 is fine for production deliverables.
1176
+
1177
+ ## Workflow
1178
+
1179
+ ### Step 1 — Acquire the artifact
1180
+ 1. **Project file** — user said "review the index.html I just made": read it from the project folder.
1181
+ 2. **Pasted HTML** — user pasted code in chat: read it from the message.
1182
+ 3. **Self-critique** — you just emitted an artifact and want to self-critique: re-read your own output.
1183
+
1184
+ ### Step 2 — Read enough to score
1185
+ Skim the entire <style>, then read 6-8 representative content blocks. Do not score from intent alone — the score depends on executed design, not declared intent.
1186
+
1187
+ ### Step 3 — Score with evidence
1188
+ For each of the 5 dimensions, write the score and a 30-80 word evidence paragraph naming specific elements. Example:
1189
+ \`\`\`
1190
+ Dimension: Detail execution
1191
+ Score: 6 / 10
1192
+ Evidence: Stat-cards on page 3 align cleanly, but on page 8 the right column sits 2vh higher than the left because .callout has 3vh top margin while the figure doesn't. Image captions use mono on page 5 but sans on page 7 — pick one.
1193
+ \`\`\`
1194
+
1195
+ ### Step 4 — Build action lists
1196
+ - **Keep** (3-5 bullets) — concrete things working that the user must not break. Cite by class/page/element.
1197
+ - **Fix** (3-6 bullets) — must-do, ordered by visual cost saved per minute. Each bullet ≤ 1 sentence.
1198
+ - **Quick wins** (3-5 bullets) — 5-15 minutes each, high signal-to-noise.
1199
+
1200
+ ### Step 5 — Emit the report HTML
1201
+ Build a single file with:
1202
+ - Header: artifact name + date + reviewer + 1-line verdict
1203
+ - Big radar chart (inline SVG, no library)
1204
+ - 5 dimension cards in a 1-column or 2-column grid
1205
+ - Three action lists at the bottom with checkbox affordance
1206
+
1207
+ Use the active design system tokens if one exists; otherwise default to a neutral light theme (white background, near-black text, one accent for radar fill).
1208
+
1209
+ ## Radar Chart SVG Template
1210
+ \`\`\`svg
1211
+ <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
1212
+ <!-- Pentagon grid lines -->
1213
+ <polygon points="200,40 352,152 294,340 106,340 48,152" fill="none" stroke="#e0e0e0" stroke-width="1"/>
1214
+ <polygon points="200,80 314,166 267,306 133,306 86,166" fill="none" stroke="#e0e0e0" stroke-width="1"/>
1215
+ <polygon points="200,120 276,180 240,272 160,272 124,180" fill="none" stroke="#e0e0e0" stroke-width="1"/>
1216
+ <!-- Score polygon (fill with accent at 20% opacity) -->
1217
+ <polygon points="..." fill="var(--accent, #3B82F6)" fill-opacity="0.2" stroke="var(--accent, #3B82F6)" stroke-width="2"/>
1218
+ <!-- Labels at each vertex -->
1219
+ <text x="200" y="30" text-anchor="middle" font-size="11">Philosophy</text>
1220
+ <text x="360" y="155" text-anchor="start" font-size="11">Hierarchy</text>
1221
+ <text x="300" y="355" text-anchor="middle" font-size="11">Detail</text>
1222
+ <text x="100" y="355" text-anchor="middle" font-size="11">Function</text>
1223
+ <text x="40" y="155" text-anchor="end" font-size="11">Innovation</text>
1224
+ </svg>
1225
+ \`\`\`
1226
+
1227
+ ## Hard Rules
1228
+ - **5 scores, every time** — partial reports are not allowed.
1229
+ - **Evidence per score** — no "feels off" / "needs work". If you can't cite an element, the score is not justified.
1230
+ - **Don't grade-inflate** — overall mean above 8 is suspicious.
1231
+ - **Single-file HTML only** — no external CSS/JS. Inline everything.
1232
+ - **Radar chart is mandatory** — gives the report a recognizable silhouette.`,
1233
+ },
1234
+ {
1235
+ name: "pricing-page",
1236
+ scenario: "marketing",
1237
+ description: "Standalone pricing page — header, plan tier cards, feature comparison table, and FAQ. Uses CSS Grid for plan rows and comparison table. 2-4 tiers with recommended tier accent.",
1238
+ outputKind: "html",
1239
+ workflow: `# Pricing Page Skill
1240
+
1241
+ Produce a single-screen pricing page that respects the active design system.
1242
+
1243
+ ## Phase 1 — Classify the product
1244
+
1245
+ Pick a tier shape based on the brief:
1246
+ - **3-tier** (most common): Free / Pro / Team or Starter / Growth / Enterprise
1247
+ - **4-tier** when the brief says "scale" or "enterprise plus"
1248
+ - **2-tier** when it says "individual / business" or "personal / pro"
1249
+
1250
+ ## Phase 2 — Sections (in order)
1251
+
1252
+ 1. **Hero** — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
1253
+ \`\`\`css
1254
+ .pricing-hero { text-align: center; padding: 80px 0 48px; }
1255
+ .toggle { display: inline-flex; border-radius: 999px; background: var(--surface); padding: 4px; margin-top: 24px; }
1256
+ .toggle button { padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
1257
+ .toggle button.active { background: var(--fg); color: var(--bg); }
1258
+ \`\`\`
1259
+
1260
+ 2. **Plan cards** — one card per tier. Each card: tier name, price (display font + larger scale for the number), 1-line positioning, 4-6 bullet features, primary CTA.
1261
+ \`\`\`css
1262
+ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
1263
+ .plan-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; display: flex; flex-direction: column; }
1264
+ .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
1265
+ .plan-card.recommended::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-on, white); padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
1266
+ .plan-name { font-size: 20px; font-weight: 600; }
1267
+ .plan-price { font-size: 48px; font-weight: 800; line-height: 1; margin: 16px 0 4px; font-family: var(--font-display, var(--font-body)); }
1268
+ .plan-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
1269
+ .plan-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
1270
+ .plan-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft, var(--border)); }
1271
+ \`\`\`
1272
+
1273
+ 3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells. Group features into 2-3 logical sections (Core, Collaboration, Support, Security). Sticky header.
1274
+ \`\`\`css
1275
+ .comparison { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
1276
+ .comparison h2 { text-align: center; margin-bottom: 32px; }
1277
+ .comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
1278
+ .comparison-table th { text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--border); }
1279
+ .comparison-table th:not(:first-child) { text-align: center; }
1280
+ .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); }
1281
+ .comparison-table td:not(:first-child) { text-align: center; }
1282
+ .section-header td { font-weight: 600; background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
1283
+ \`\`\`
1284
+
1285
+ 4. **FAQ** — 4-6 collapsible Q&A items using \`<details><summary>\` (no JS needed).
1286
+ \`\`\`css
1287
+ .faq { max-width: 720px; margin: 64px auto; padding: 0 24px; }
1288
+ .faq h2 { text-align: center; margin-bottom: 32px; }
1289
+ .faq details { border-bottom: 1px solid var(--border-soft, var(--border)); padding: 20px 0; }
1290
+ .faq summary { font-weight: 600; cursor: pointer; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
1291
+ .faq summary::after { content: "+"; font-size: 20px; }
1292
+ .faq details[open] summary::after { content: "−"; }
1293
+ .faq p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
1294
+ \`\`\`
1295
+
1296
+ 5. **Footer CTA** — single line + button.
1297
+
1298
+ ## Phase 3 — Content Rules
1299
+ - Prices are plausible for the product (not "$X / month")
1300
+ - Accent appears on the recommended tier and one CTA only
1301
+ - No fake feature names — every row reads as something a real product would offer
1302
+ - Comparison table renders cleanly at 1024px and stacks readably below 768px (scroll-x or stacked)
1303
+
1304
+ ## Phase 4 — Anti-Slop Check
1305
+ - [ ] Prices use specific numbers ($29, $79, $199)
1306
+ - [ ] Recommended tier is visually distinct
1307
+ - [ ] FAQ answers are concrete, not generic
1308
+ - [ ] No price-related emoji (💸, 💰, 🤑)`,
1309
+ },
1310
+ {
1311
+ name: "docs-page",
1312
+ scenario: "engineering",
1313
+ description: "Documentation page — left sidebar nav (sticky), scrollable article body, right table of contents. Three-column layout with grouped navigation links, code blocks, callouts, and proper RTL support.",
1314
+ outputKind: "html",
1315
+ workflow: `# Docs Page Skill
1316
+
1317
+ Produce a single, three-column documentation page in one HTML file.
1318
+
1319
+ ## Phase 1 — Pre-flight
1320
+
1321
+ 1. Read the active design system. Use the body type token for prose; the mono token for code; respect line-height and max-width rules.
1322
+ 2. Pick a concrete topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.
1323
+
1324
+ ## Phase 2 — Three-column layout
1325
+
1326
+ \`\`\`css
1327
+ .docs-layout { display: grid; grid-template-columns: 260px minmax(0, 720px) 200px; gap: 0; min-height: 100vh; }
1328
+
1329
+ /* Left sidebar — sticky nav */
1330
+ .docs-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 24px; border-right: 1px solid var(--border); background: var(--bg); }
1331
+ .docs-nav-group { margin-bottom: 24px; }
1332
+ .docs-nav-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding: 0 8px; }
1333
+ .docs-nav-link { display: block; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: var(--muted); text-decoration: none; }
1334
+ .docs-nav-link:hover { color: var(--fg); background: var(--surface); }
1335
+ .docs-nav-link.active { color: var(--fg); background: var(--surface); border-left: 2px solid var(--accent); margin-left: -2px; }
1336
+
1337
+ /* Article body */
1338
+ .docs-article { padding: 48px 64px; max-width: 720px; }
1339
+
1340
+ /* Right TOC — sticky */
1341
+ .docs-toc { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 16px; border-left: 1px solid var(--border); font-size: 13px; }
1342
+ .docs-toc-title { font-weight: 600; margin-bottom: 12px; }
1343
+ .docs-toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; }
1344
+ .docs-toc a:hover, .docs-toc a.active { color: var(--accent); }
1345
+ \`\`\`
1346
+
1347
+ ## Phase 3 — Article Components
1348
+
1349
+ ### Code blocks
1350
+ \`\`\`css
1351
+ pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; margin: 24px 0; }
1352
+ code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
1353
+ pre code { background: none; padding: 0; }
1354
+ \`\`\`
1355
+
1356
+ ### Callout boxes
1357
+ \`\`\`css
1358
+ .callout { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--bg)); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; }
1359
+ .callout.warning { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 5%, var(--bg)); }
1360
+ .callout-title { font-weight: 600; margin-bottom: 4px; }
1361
+ \`\`\`
1362
+
1363
+ ### Typography
1364
+ \`\`\`css
1365
+ .docs-article h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
1366
+ .docs-article h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 48px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
1367
+ .docs-article h3 { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 8px; }
1368
+ .docs-article p { font-size: 16px; line-height: 1.7; margin: 12px 0; color: var(--fg); }
1369
+ \`\`\`
1370
+
1371
+ ## Phase 4 — Content Rules
1372
+ - Navigation: 3-5 groups of 4-8 links each
1373
+ - Article: H1, lede paragraph, H2 sections, code blocks, callouts (note/warning), inline links, lists
1374
+ - TOC: "On this page" with H2 anchors, current section highlighted on scroll
1375
+ - Concrete content: specific API names, command examples, plausible parameters — not placeholders
1376
+ - Respect RTL: layout expressed on the inline axis so it flips correctly under dir="rtl"`,
1377
+ },
1378
+ {
1379
+ name: "blog-post",
1380
+ scenario: "content",
1381
+ description: "Blog article layout — title, author metadata, featured image, prose body with headings/images/quotes, related posts. Single-page, reading-optimized typography with comfortable measure.",
1382
+ outputKind: "html",
1383
+ workflow: `# Blog Post Skill
1384
+
1385
+ Produce a single blog article page with reading-optimized typography.
1386
+
1387
+ ## Phase 1 — Structure
1388
+
1389
+ \`\`\`html
1390
+ <article class="blog-post">
1391
+ <header class="post-header">
1392
+ <div class="post-category">Category</div>
1393
+ <h1>Article Title That Is Specific and Engaging</h1>
1394
+ <div class="post-meta">
1395
+ <span class="post-author">Author Name</span>
1396
+ <span class="post-date">Month DD, YYYY</span>
1397
+ <span class="post-read-time">N min read</span>
1398
+ </div>
1399
+ </header>
1400
+ <figure class="post-hero">
1401
+ <img src="..." alt="...">
1402
+ <figcaption>Image caption (optional)</figcaption>
1403
+ </figure>
1404
+ <div class="post-content">
1405
+ <!-- prose -->
1406
+ </div>
1407
+ <footer class="post-footer">
1408
+ <div class="post-tags"><!-- tag pills --></div>
1409
+ <section class="related-posts"><!-- 3 related cards --></section>
1410
+ </footer>
1411
+ </article>
1412
+ \`\`\`
1413
+
1414
+ ## Phase 2 — Typography
1415
+
1416
+ \`\`\`css
1417
+ .blog-post { max-width: 680px; margin: 0 auto; padding: 64px 24px; }
1418
+
1419
+ .post-header { margin-bottom: 32px; }
1420
+ .post-category { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
1421
+ .post-header h1 { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
1422
+ .post-meta { display: flex; gap: 16px; font-size: 14px; color: var(--muted); }
1423
+
1424
+ .post-hero { margin: 0 -24px 40px; }
1425
+ .post-hero img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
1426
+ .post-hero figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
1427
+
1428
+ /* Prose — comfortable reading measure */
1429
+ .post-content { font-size: 18px; line-height: 1.8; color: var(--fg); }
1430
+ .post-content p { margin: 24px 0; }
1431
+ .post-content h2 { font-size: 28px; font-weight: 600; margin: 48px 0 16px; }
1432
+ .post-content h3 { font-size: 22px; font-weight: 600; margin: 36px 0 12px; }
1433
+ .post-content blockquote { border-left: 3px solid var(--accent); padding: 8px 20px; margin: 32px 0; font-style: italic; color: var(--muted); }
1434
+ .post-content ul, .post-content ol { padding-left: 24px; margin: 16px 0; }
1435
+ .post-content li { margin: 8px 0; }
1436
+ .post-content img { max-width: 100%; border-radius: 8px; margin: 24px 0; }
1437
+ .post-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
1438
+ .post-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 15px; line-height: 1.6; margin: 24px 0; }
1439
+
1440
+ /* Tags */
1441
+ .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--border); }
1442
+ .post-tag { padding: 4px 12px; background: var(--surface); border-radius: 999px; font-size: 13px; color: var(--muted); }
1443
+
1444
+ /* Related posts */
1445
+ .related-posts { margin-top: 48px; }
1446
+ .related-posts h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
1447
+ .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
1448
+ .related-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
1449
+ .related-card img { width: 100%; height: 140px; object-fit: cover; }
1450
+ .related-card-content { padding: 16px; }
1451
+ .related-card-content h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
1452
+ .related-card-content time { font-size: 12px; color: var(--muted); }
1453
+ \`\`\`
1454
+
1455
+ ## Phase 3 — Content Rules
1456
+ - Article body: 800-2000 words of meaningful content (no lorem ipsum)
1457
+ - Every heading is specific and informative
1458
+ - Include at least one blockquote and one code block
1459
+ - Feature image is a gradient shape if no real image
1460
+ - Author bio is not generic — use a plausible name and role`,
1461
+ },
1462
+ {
1463
+ name: "magazine-poster",
1464
+ scenario: "creative",
1465
+ description: "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
1466
+ outputKind: "html",
1467
+ workflow: `# Magazine Poster Skill
1468
+
1469
+ Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.
1470
+
1471
+ ## Phase 1 — Determine Format
1472
+
1473
+ - **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
1474
+ - **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
1475
+ - **Social cover** (square: 1080×1080px) — optimized for social sharing
1476
+
1477
+ ## Phase 2 — Composition Modes
1478
+
1479
+ ### Mode A: Typography-first
1480
+ Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
1481
+ \`\`\`css
1482
+ .poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
1483
+ .poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
1484
+ .poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
1485
+ .poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
1486
+ .poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
1487
+ \`\`\`
1488
+
1489
+ ### Mode B: Image-first
1490
+ Large image dominates 70% of the canvas, typography overlays or sits below.
1491
+ \`\`\`css
1492
+ .poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
1493
+ .poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
1494
+ .poster-text-block { padding: 48px 64px; }
1495
+ \`\`\`
1496
+
1497
+ ### Mode C: Split-screen
1498
+ Two-panel composition — color block left, image right (or vice versa).
1499
+ \`\`\`css
1500
+ .poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
1501
+ .poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
1502
+ .poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
1503
+ .poster-split-panel.right { background: var(--bg); }
1504
+ \`\`\`
1505
+
1506
+ ## Phase 3 — Typography Scale
1507
+
1508
+ \`\`\`css
1509
+ /* Magazine typography is dramatic — go big */
1510
+ .display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
1511
+ .display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
1512
+ .display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
1513
+ .poster-body { font-size: 18px; line-height: 1.6; }
1514
+ .poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
1515
+ \`\`\`
1516
+
1517
+ ## Phase 4 — Design Elements
1518
+
1519
+ - **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
1520
+ - **Photo treatment**: Use mix-blend-mode on images over color backgrounds
1521
+ - **Grid lines**: Thin horizontal/vertical rules as structural elements
1522
+ - **Page numbers**: ALWAYS include an issue/volume/page-number block
1523
+ - **Date line**: MONTH YYYY format in the masthead area
1524
+
1525
+ ## Phase 5 — Anti-Kitsch Rules
1526
+ - No emoji in editorial design
1527
+ - Use the design system's display font at scale — not a safe web font
1528
+ - Headline should create tension: unexpected word break, dramatic line split, or bold claim
1529
+ - One focal point per poster — don't make everything compete
1530
+ - white-space is intentional, not leftover`,
1531
+ },
1532
+ {
1533
+ name: "motion-frames",
1534
+ scenario: "creative",
1535
+ description: "CSS animation and motion design frames. Keyframe-driven animations, scroll-triggered reveals, staggered lists, loading states, and page transitions — all CSS-only where possible.",
1536
+ outputKind: "html",
1537
+ workflow: `# Motion Frames Skill
1538
+
1539
+ Produce a motion design showcase as a single HTML file. CSS keyframe animations, scroll-triggered effects, and subtle micro-interactions — no JavaScript libraries.
1540
+
1541
+ ## Phase 1 — Animation Vocabulary
1542
+
1543
+ ### Entrance Animations
1544
+ \`\`\`css
1545
+ /* Fade up */
1546
+ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
1547
+
1548
+ /* Scale in */
1549
+ @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
1550
+
1551
+ /* Slide from left */
1552
+ @keyframes slideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
1553
+
1554
+ /* Reveal by clip-path */
1555
+ @keyframes clipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
1556
+ \`\`\`
1557
+
1558
+ ### Scroll-Triggered Reveals
1559
+ \`\`\`css
1560
+ /* Use scroll-driven animations (modern browsers) */
1561
+ .reveal {
1562
+ animation: fadeUp 0.6s ease-out;
1563
+ animation-timeline: view();
1564
+ animation-range: entry 20% cover 40%;
1565
+ }
1566
+
1567
+ /* Fallback: use Intersection Observer pattern in a small script */
1568
+ .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
1569
+ .reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
1570
+ \`\`\`
1571
+
1572
+ ### Staggered Lists
1573
+ \`\`\`css
1574
+ .stagger-list > * { opacity: 0; animation: fadeUp 0.4s ease-out forwards; }
1575
+ .stagger-list > *:nth-child(1) { animation-delay: 0ms; }
1576
+ .stagger-list > *:nth-child(2) { animation-delay: 80ms; }
1577
+ .stagger-list > *:nth-child(3) { animation-delay: 160ms; }
1578
+ .stagger-list > *:nth-child(4) { animation-delay: 240ms; }
1579
+ .stagger-list > *:nth-child(5) { animation-delay: 320ms; }
1580
+ .stagger-list > *:nth-child(6) { animation-delay: 400ms; }
1581
+ /* Continue pattern: delay = (n-1) * 80ms up to n=20 */
1582
+ \`\`\`
1583
+
1584
+ ### Loading States
1585
+ \`\`\`css
1586
+ /* Spinner */
1587
+ @keyframes spin { to { transform: rotate(360deg); } }
1588
+ .spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
1589
+
1590
+ /* Skeleton pulse */
1591
+ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
1592
+ .skeleton { background: linear-gradient(90deg, var(--surface) 25%, color-mix(in oklab, var(--surface) 50%, var(--bg)) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; }
1593
+
1594
+ /* Progress bar */
1595
+ @keyframes progress { from { width: 0%; } to { width: 100%; } }
1596
+ .progress-bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
1597
+ .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; animation: progress 2s ease-out forwards; }
1598
+ \`\`\`
1599
+
1600
+ ### Hover Micro-Interactions
1601
+ \`\`\`css
1602
+ /* Subtle card lift */
1603
+ .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
1604
+ .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
1605
+
1606
+ /* Button press */
1607
+ .btn-press { transition: transform 0.1s ease; }
1608
+ .btn-press:active { transform: scale(0.97); }
1609
+
1610
+ /* Link underline slide */
1611
+ .link-slide { position: relative; text-decoration: none; }
1612
+ .link-slide::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; }
1613
+ .link-slide:hover::after { width: 100%; }
1614
+
1615
+ /* Image zoom */
1616
+ .img-zoom { overflow: hidden; border-radius: 8px; }
1617
+ .img-zoom img { transition: transform 0.3s ease; }
1618
+ .img-zoom:hover img { transform: scale(1.05); }
1619
+ \`\`\`
1620
+
1621
+ ### Page Transitions (View Transitions API)
1622
+ \`\`\`css
1623
+ /* Add to :root for cross-fade transitions */
1624
+ ::view-transition-old(root),
1625
+ ::view-transition-new(root) {
1626
+ animation-duration: 0.4s;
1627
+ }
1628
+
1629
+ /* Named transitions for specific elements */
1630
+ .hero-title { view-transition-name: hero-title; }
1631
+ .hero-image { view-transition-name: hero-image; }
1632
+ \`\`\`
1633
+
1634
+ ## Phase 2 — Showcase Layout
1635
+
1636
+ Build a single HTML page demonstrating each animation category:
1637
+ 1. **Entrance section** — cards/stats that animate in on load
1638
+ 2. **Scroll reveal section** — content that appears as you scroll
1639
+ 3. **Staggered list** — feature list with cascading reveal
1640
+ 4. **Loading section** — skeleton screens next to real content
1641
+ 5. **Hover gallery** — cards with different hover treatments
1642
+ 6. **Interactive section** — buttons and links with micro-interactions
1643
+
1644
+ ## Phase 3 — Motion Design Rules
1645
+ - **Duration**: 150-400ms for micro-interactions; 400-800ms for entrances; DON'T use values above 1s
1646
+ - **Easing**: ease-out for entrances (fast start, settle gracefully); ease-in-out for continuous animations
1647
+ - **Stagger**: 60-100ms between children; maximum 20 items in a stagger
1648
+ - **Performance**: animate transform and opacity only (no width/height/margin animations)
1649
+ - **Respect reduced motion**: wrap animations in @media (prefers-reduced-motion: no-preference)
1650
+ - **No animation on every element** — pick 2-3 key moments per page
1651
+ - **Animation should communicate** — loading state, new content arriving, affordance — not just decoration`,
1652
+ },
1653
+ ];
1654
+ /** Lookup a skill by name (case-insensitive). */
1655
+ export function findSkill(name) {
1656
+ const lower = name.toLowerCase().trim();
1657
+ return (DESIGN_SKILLS.find((s) => s.name === lower) ??
1658
+ DESIGN_SKILLS.find((s) => s.name.startsWith(lower)));
1659
+ }
1660
+ /** Format a skill workflow as markdown for the LLM. */
1661
+ export function formatSkillForLLM(skill) {
1662
+ return skill.workflow;
1663
+ }
1664
+ /** List all skills as compact markdown. */
1665
+ export function listSkillsForLLM() {
1666
+ return [
1667
+ "# Available Design Skills",
1668
+ "",
1669
+ "Each skill is a structured workflow for producing a specific kind of design artifact. Read the skill workflow before starting.",
1670
+ "",
1671
+ ...DESIGN_SKILLS.map((s) => `- **${s.name}** (${s.scenario}) — ${s.description}`),
1672
+ "",
1673
+ `Total: ${DESIGN_SKILLS.length} skills available.`,
1674
+ ].join("\n");
1675
+ }