本技能用于指导构建 Super Magic HTML 微应用，采用三层架构：HTML 层负责界面交互、数据渲染与用户输入；工作区技能（Workspace Skill）负责复杂业务逻辑、工作流编排与多步 LLM 调用；JSON/MD 文件负责数据持久化与状态存储。协作机制为：HTML 通过 createTopicAndSend() 新建话题并附带 .magic/skills/<name>/SKILL.md 引用触发技能，Agent 读取技能执行工作流并写入文件，HTML 通过 watchFile() 监听文件变化后重新渲染。
核心流程为需求拆解、架构决策、设计、设计评审（输出功能清单、交互流程、伴生技能与目录结构，等待用户确认）、生成（依次生成 app.json、HTML、伴生工作区技能、初始数据文件、README 并用 quick_validate.py 校验）、交付。需求过于笼统时用 ask_user 澄清；需求明确则直接推进。架构分为 Simple（纯 HTML + window.Magic API）、Medium（HTML + 伴生技能）、Complex（HTML + 多技能 + 多智能体调度）。
HTML 层可使用预注入的 window.Magic.* API：fs（readFile、writeFile、listFiles、watchFile）、llm（getModels、chat、stream，model 必填，默认 auto）、agent（getAgents）、project（createTopicAndSend、sendMessage、uploadFiles、downloadFiles、addFilesToMessage）、getAppBasePath 以及顶层 setInputMessage、reload。完整 API 签名需通过 read_skills(["html-api-sdk"]) 获取。
生成约束：事件绑定使用 addEventListener，禁止内联事件处理器；路径相对应用根目录，禁止用 ../ 越级；model 必填且默认 auto，不默认设置 maxTokens；含文件路径的消息优先用 tiptap JSON 的 @file mention 节点；初始即做好文件分离，按业务域拆分 JS，视图与数据层分离，CSS 独立，目录结构须在设计阶段确定；触发技能时提供员工与模型选择器，默认通用模式与 auto。
数据以文件为库，结构化数据用 JSON，生成内容用 Markdown，集合项含 id，监听文件含 updatedAt。伴生技能须始终使用 skill-creator 生成，不手写 SKILL.md，且不会自动加载，需运行时新建话题触发。内置系统技能通过 @skill mention 调用，与伴生技能的 @file mention 不同，两者可组合使用。多文件、多步骤或长文档分析任务应优先使用 topic + skill 模式。资料未提供具体收费、价格与版本信息。