create-vela-workflow 1.0.0

package/templates/.github/rules/vela-platform.md

@@ -0,0 +1,46 @@
+---
+description: VelaOS 平台硬约束 — 组件白名单、API 白名单、禁止的第三方依赖、生命周期、数据对象
+alwaysApply: true
+---
+
+# VelaOS 平台硬约束
+
+> ⚠️ 本文件为强制执行规则，AI 必须无条件遵守，不可协商或降级。
+
+## 组件白名单
+
+仅允许使用以下 Vela 内置组件，**禁止使用任何其他组件或第三方 UI 库**：
+
+div, list, list-item, text, image, input, scroll, swiper, switch, slider, progress, picker, stack, span, marquee, barcode, qrcode, chart, image-animator, a
+
+## API 白名单
+
+仅允许使用以下 @system.xxx API，**使用前必须在 manifest.json features 中声明**：
+
+router, app, fetch, storage, device, audio, prompt, sensor, vibrator, network, brightness, volume, battery, geolocation, record, file, crypto, configuration, interconnect, messagecenter
+
+## 禁止的第三方依赖
+
+| 类别 | 禁止项 | 替代方案 |
+|------|--------|----------|
+| UI 库 | antd, element-ui, vant, Material-UI | 使用内置组件 |
+| JS 库 | axios, lodash, moment, echarts, jQuery | 使用 @system.fetch 等系统 API |
+| 框架 | Vue, React, Angular, Svelte | VelaOS 原生 .ux 开发范式 |
+| 构建工具 | hap-toolkit | 使用 aiot-toolkit |
+
+## 页面生命周期
+
+```
+onInit → onReady → onShow → onHide → onDestroy
+```
+
+- `onDestroy` 中**必须**清理所有定时器、事件监听等资源
+
+## 页面数据对象
+
+| 对象 | 作用域 | 说明 |
+|------|--------|------|
+| `public` | 外部 | 允许被外部传入数据覆盖 |
+| `protected` | 应用内部 | 允许被应用内部页面传参覆盖 |
+| `private` | 页面内 | 不允许被覆盖 |
+| `data` | 组件 | 组件级数据 |

package/templates/.github/rules/vela-quality.md

@@ -0,0 +1,109 @@
+---
+description: 代码质量标准 — 命名规范、错误处理、资源清理、禁止行为、自检清单
+alwaysApply: true
+---
+
+# Vela 快应用代码质量标准
+
+> ⚠️ 本文件为强制执行规则，AI 必须无条件遵守。
+
+## 命名规范
+
+| 类型 | 规范 | 示例 |
+|------|------|------|
+| 变量/函数 | camelCase | `userName`, `getUserInfo()` |
+| 组件 | PascalCase | `UserCard`, `MusicPlayer` |
+| 常量 | UPPER_SNAKE_CASE | `MAX_RETRY_COUNT` |
+| 页面路由 | kebab-case | `pages/user-detail/index.ux` |
+
+## 错误处理
+
+**所有 API 调用必须包含错误处理**：
+
+```javascript
+// 正确 ✅
+import fetch from '@system.fetch'
+fetch.fetch({
+  url: 'https://api.example.com/data',
+  success: (response) => {
+    // 处理成功
+  },
+  fail: (data, code) => {
+    console.error(`请求失败: code=${code}`)
+    // 错误兜底
+  }
+})
+
+// 错误 ❌ — 没有错误处理
+fetch.fetch({ url: 'https://api.example.com/data' })
+```
+
+## 网络请求规范
+
+- **必须**设置超时时间
+- **必须**提供失败兜底逻辑（如展示缓存数据或错误提示）
+- **禁止**不处理 fail 回调
+
+## 资源清理
+
+在 `onDestroy` 中**必须**清理：
+
+| 资源类型 | 清理方式 |
+|----------|----------|
+| 定时器 | `clearInterval(id)` / `clearTimeout(id)` |
+| 事件监听 | `offXxx(event, handler)` |
+| 动画 | 取消动画帧 |
+
+```javascript
+export default {
+  private: {
+    timerId: null
+  },
+  onShow() {
+    this.timerId = setInterval(() => { /* ... */ }, 1000)
+  },
+  onDestroy() {
+    if (this.timerId) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+  }
+}
+```
+
+## 禁止行为
+
+| 编号 | 禁止行为 | 原因 |
+|------|----------|------|
+| Q1 | `console.debug` 调试输出 | 使用系统日志或 prompt API |
+| Q2 | 未处理的 Promise / fail 回调 | 导致静默失败 |
+| Q3 | `onDestroy` 中未清理资源 | 内存泄漏 |
+| Q4 | 非 UI 数据放入 ViewModel | 影响渲染性能 |
+| Q5 | 直接重新赋值对象/数组 | 应原地修改属性 |
+| Q6 | 在循环中创建闭包 | 性能问题 |
+| Q7 | 超长函数（>50行） | 拆分为独立方法 |
+
+## 代码自检清单
+
+代码生成完成后，**必须**逐项检查：
+
+- [ ] 所有组件来自白名单
+- [ ] 所有 API 来白名单且在 features 中声明
+- [ ] 无第三方依赖（package.json 检查）
+- [ ] 无 console.log（使用 console.error 记录错误除外）
+- [ ] 所有 fetch/API 调用有 fail 处理
+- [ ] 所有定时器在 onDestroy 中清理
+- [ ] 路由配置与实际页面文件一致
+- [ ] .ux 文件 template 只有一个根节点
+- [ ] 圆屏安全区域已应用
+- [ ] CSS 仅使用 class 选择器（无元素/ID/后代/伪类选择器）
+- [ ] CSS 无嵌套写法（扁平结构）
+- [ ] CSS 无 Less/Sass/SCSS 语法
+- [ ] class 命名符合 kebab-case 规范
+- [ ] 用户提供设计稿时，已通过 MCP 获取设计稿节点数据
+- [ ] 组件结构与设计稿层级一致
+- [ ] 颜色、字号、间距与设计稿一致
+- [ ] 所有静态资源已从设计稿导出到 `src/common/images/` 对应子目录
+- [ ] 图片资源命名符合规范，无 placeholder 或外部 URL
+- [ ] Mock 数据使用本地图片路径
+- [ ] 页面视觉还原度与 UI 稿一致

package/templates/.kiro/hooks/figma-design-check.kiro.hook

@@ -0,0 +1,14 @@
+{
+  "enabled": true,
+  "name": "Figma Design Comparison Check",
+  "description": "After writing .ux page files, automatically compare the generated code against the Figma design to verify: layout structure matches, colors/fonts/sizes are correct, image assets are properly exported and referenced, and no SVG files are used (Vela doesn't support SVG).",
+  "version": "1",
+  "when": {
+    "type": "postToolUse",
+    "toolTypes": ["write"]
+  },
+  "then": {
+    "type": "askAgent",
+    "prompt": "If a .ux file was just written/modified AND there is a Figma design context available in this conversation, perform a design fidelity check:\n\n1. **Layout Match**: Compare the generated layout structure (flex-direction, alignment, spacing) against the Figma node structure. Check that container hierarchy matches.\n\n2. **Dimensions Check**: Verify key element dimensions (width, height, border-radius, padding, margin) match the Figma design values. All list items and cards should use FIXED width/height from the design, not percentage-based.\n\n3. **Color & Typography**: Confirm colors (#hex values), font-size, font-weight match the design tokens extracted from Figma.\n\n4. **Image Assets**: Check that:\n   - All image references in the .ux file point to existing files in src/common/\n   - NO SVG files are referenced (Vela doesn't support SVG, use PNG only)\n   - Image files are valid PNG format and reasonable size (<200KB for icons)\n   - Icons from Figma have been exported and downloaded as PNG\n\n5. **Scroll Container**: If the page content exceeds one screen, verify:\n   - Root element is <scroll scroll-y=\"true\">\n   - Inner container has explicit width: 100% and a fixed height value large enough for content\n\n6. **Safe Area**: For watch screens, verify padding accounts for circular screen safe area (top/bottom ~50px, left/right ~24-36px).\n\nReport any mismatches found. If no Figma context is available or the file is not a .ux file, skip this check silently."
+  }
+}

package/templates/.kiro/hooks/post-coding-validation.kiro.hook

@@ -0,0 +1,13 @@
+{
+  "enabled": true,
+  "name": "Post-Coding Quality Validation",
+  "description": "After S3 coding task completes, automatically run a quality validation check on the generated code to verify manifest routes match page files, image references exist, and API imports match feature declarations.",
+  "version": "1",
+  "when": {
+    "type": "postTaskExecution"
+  },
+  "then": {
+    "type": "askAgent",
+    "prompt": "Run a quality validation on the generated code: 1) Check manifest.json router.pages entries match actual page files in src/pages/ 2) Check all image paths referenced in .ux files exist in src/common/images/ 3) Check all @system.xxx imports have corresponding entries in manifest.json features array. Report results as a checklist."
+  }
+}

package/templates/.kiro/hooks/validate-ux-files.kiro.hook

@@ -0,0 +1,16 @@
+{
+  "enabled": true,
+  "name": "Validate UX Files on Save",
+  "description": "When a .ux file is saved, automatically check for common syntax issues like unclosed tags, missing imports, and invalid component references.",
+  "version": "1",
+  "when": {
+    "type": "fileEdited",
+    "patterns": [
+      "**/*.ux"
+    ]
+  },
+  "then": {
+    "type": "askAgent",
+    "prompt": "Check the saved .ux file for common Vela quick app issues: 1) Unclosed template tags 2) Missing @system imports that are used in the script 3) list-item components missing the required 'type' attribute 4) Image src paths referencing non-existent files. Report any issues found concisely."
+  }
+}

package/templates/.kiro/settings/mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "Figma Desktop": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}