阿拉丁·前端工程工坊（aladin-frontend-forge）

阿拉丁出品。你用 aladin-code-pilot 把函数审了、api-pilot 把接口验了、sql-forge 把库建了、diagram-forge 把图画了、cicd-forge 把服务部署了、secure-forge 把安全扫了、observability-forge 把监控加了、doc-forge 把文档出了——但前端呢？ 页面还是手敲、脚手架还是从零搭、规范停在 frontend-spec 的文档里、构建配置靠抄、性能靠猜、可访问性靠忘。skillhub 上能找到的"前端向"技能全是单点：要么只写前端开发规范文本(frontend-spec)、要么只出视觉 UI 设计稿(ui-new)、要么只做云部署(cloudbase)，没有任何技能把"前端工程化"整条链路工程化。这个技能把前端收口成一套纯本地工具：你给项目路径或一份 IR，它产出脚手架 + 组件 + 构建配置，并把规范/性能/可访问性在本地先校验一遍。

它解决什么痛点

开发者在 skillhub 上能找到的"前端向"工具都是单点：

本技能 = 前端工程化全链路，脚本零依赖、纯本地、离线可用，且与自家 aladin 工程链互补。

与 skillhub 现有技能 + 自家 aladin 系列的差异化

与自家 aladin 系列的关系：code-pilot 审函数、api-pilot 验接口、sql-forge 管存储、diagram-forge 画结构、cicd-forge 管交付、secure-forge 管安全、observability-forge 管观测、doc-forge 管文档，frontend-forge 管"把以上后端能力接到用户看得见的前端"——覆盖「后端能力 → 前端工程化 → 交付」完整闭环（全栈工程化）。

何时触发

• "帮我把这个需求/设计稿变成一个 React/Vue/Svelte 项目脚手架"
• "生成几个可复用组件（带 Props 类型、样式、示例）"
• "检查下这个项目符不符合前端规范：命名/未用变量/console 残留/TS any"
• "生成 Vite/Webpack 构建配置，做下代码分割和体积预算"
• "帮我做前端性能审计 / 出 Lighthouse 检查清单"
• "扫一下页面的可访问性(a11y)：alt/aria/语义标签/键盘可达"
• "给这些组件生成文档 / 和 aladin-doc-forge 联动出组件文档"

何时不触发

• 用户要视觉 UI 设计稿/品牌视觉（无代码结构）——用 ui-new 类设计技能，本技能产出的是工程代码而非视觉稿。
• 用户要后端/接口/数据库工程——用 aladin-api-pilot/sql-forge，本技能只做前端。
• 用户要实时抓取外部页面/爬站——本技能只处理本地项目/IR，不出网。
• 用户要替代专业构建工具/真实打包（webpack/vite 真实 build）——本技能生成配置与启发式审计，真实构建由你本地 npm 跑。
• 用户要自动改写生产源码修复 lint 问题——本技能只报告问题清单与建议，不改你的源码（避免误改）。

核心能力（统一工具链 + 本地增值）

1. 多框架脚手架生成：fe_build.py scaffold 生成 React/Vue3/Svelte + Vite 项目骨架（package.json、目录结构、入口、路由占位、状态管理占位、ESLint/TS 严格配置）。
2. 组件生成：fe_build.py component 生成可复用组件（函数组件/组合式 API）、Props 类型、样式（CSS Modules/Tailwind）、示例用法、可选测试占位。
3. 规范落地检查(lint-lite)：fe_build.py lint 对照企业级前端规范做静态检查——命名规范、未用变量、console 残留、TS any、大文件、目录结构、硬编码密钥/URL。
4. 构建配置生成与优化：fe_build.py config 生成 Vite/Webpack 配置，含代码分割、Tree-shaking、压缩、环境变量、Proxy、alias，并做产物体积预算校验。
5. 性能审计：fe_build.py perf 基于依赖/源码启发式，识别大依赖、重复依赖、缺失懒加载，并生成 Lighthouse 检查清单。
6. 可访问性(a11y)校验：fe_build.py a11y 扫描 JSX/模板，检查 alt/aria/语义标签/表单 label/键盘可达/对比度提示。
7. 组件文档生成：从组件 Props/注释生成 Markdown 组件文档（联动 aladin-doc-forge）。
8. 多框架适配：React/Vue/Svelte 三套模板与互转建议（如把 React 组件思路转 Vue SFC）。
9. 与 aladin 工程链联动：接 code-pilot(审查生成的代码)/secure-forge(查 XSS/注入)/doc-forge(出组件文档)/cicd-forge(加前端构建流水线)。

工作流（3 步）

① 扫描归一  fe_ingest.py scan  --path ./repo --out fe_ir.json
             （或 Hy3 直接产出 fe_ir.json，跳过此步）
② 生成+校验 fe_build.py scaffold --framework react --name myapp --out ./out
             fe_build.py component --name Button --framework react --props "label:string;disabled:boolean" --out ./out
             fe_build.py config   --framework react --out ./out
             fe_build.py lint     --path ./out
             fe_build.py a11y     --path ./out
             fe_build.py perf     --ir fe_ir.json
③ 汇总       fe_report.py report --ir fe_ir.json --dir ./out --html index.html --md index.md

使用方式

脚本零依赖，直接用托管 Python 运行（无需 pip install）：

PY="C:/Users/adam/.workbuddy/binaries/python/versions/3.13.12/python.exe"
SK="aladin-frontend-forge"

# ① 扫描现项目 → fe_ir.json（或从 sample 起步）
"$PY" $SK/scripts/fe_ingest.py scan --path ./my_repo --out fe_ir.json

# ② 生成脚手架 + 组件 + 构建配置
"$PY" $SK/scripts/fe_build.py scaffold --framework react --name myapp --out ./out
"$PY" $SK/scripts/fe_build.py component --name Button --framework react --props "label:string;disabled:boolean" --out ./out
"$PY" $SK/scripts/fe_build.py config   --framework react --out ./out

# ② 校验：规范 / 可访问性 / 性能
"$PY" $SK/scripts/fe_build.py lint --path ./out
"$PY" $SK/scripts/fe_build.py a11y --path ./out
"$PY" $SK/scripts/fe_build.py perf --ir fe_ir.json

# ③ 汇总为 HTML 看板 + MD 报告
"$PY" $SK/scripts/fe_report.py report --ir fe_ir.json --dir ./out --html index.html --md index.md

自然语言描述：让 Hy3 按 references/usage-examples.md 的 IR 模板把"项目名/框架/依赖/页面"落成 fe_ir.json，再跑 ② 即可，无需手敲任何配置。

fe_ir.json 速查（输入契约）

{
  "project": { "name": "myapp", "framework": "react", "buildTool": "vite", "usesTS": true },
  "deps": { "react": "^18.3.1", "react-dom": "^18.3.1", "vue": null, "svelte": null },
  "pages": [
    { "name": "Home", "route": "/", "components": ["Button","Card"] }
  ],
  "components": [
    { "name": "Button", "framework": "react", "props": [
        { "name": "label", "type": "string", "required": true },
        { "name": "disabled", "type": "boolean", "required": false }
    ], "style": "css-modules", "example": true }
  ],
  "checks": { "lint": true, "a11y": true, "perf": true },
  "summary": { "estimatedBundleKB": 180, "budgetKB": 200 }
}

输入输出规范

输入：

• 仓库路径（scan --path，自动探测框架/构建工具/TS/依赖/结构）
• 或 fe_ir.json（Hy3 落成 / 手写，结构见上）
• 可选：--framework（react/vue/svelte）、--props（组件属性）、--budgetKB（体积预算）

输出：

• fe_ir.json：统一中间表示（中间产物）
• out/：生成的脚手架/组件/构建配置代码文件
• out/quality.json：lint-lite 结果（问题清单+严重度）
• out/a11y.json：可访问性问题清单
• out/perf.json：性能审计（大依赖/重复/懒加载建议/Lighthouse 清单）
• out/components.md：组件文档
• index.html：自包含 HTML 看板
• index.md：Markdown 报告索引

输出位置： 由 --out / --dir 参数指定，默认当前目录。

能力边界

能做：

1. 生成 React/Vue3/Svelte + Vite 项目骨架与可复用组件（含类型/样式/示例）。
2. 生成 Vite/Webpack 构建配置并做体积预算校验。
3. 静态检查：命名/未用变量/console/TS any/目录结构/硬编码（lint-lite）。
4. 可访问性扫描：alt/aria/语义标签/表单 label/键盘可达。
5. 性能启发式审计：大依赖/重复依赖/懒加载建议/Lighthouse 清单。
6. 组件文档生成（Markdown）。

不能做：

1. 不产出视觉 UI 设计稿/品牌视觉——那是设计技能的范畴（本技能产工程代码）。
2. 不生成后端/接口/数据库代码——用 aladin-api-pilot/sql-forge。
3. 不实时抓取/爬站——只处理本地项目/IR，不出网。
4. 不自动改写生产源码修复 lint——只给问题清单与建议，避免误改代码。
5. 校验是静态启发式（基于规则与依赖元数据），不替代真实浏览器 Lighthouse 跑分。

重要约束

• 不联网执行：脚本只读本地项目/文件、只写本地产物，不发起任何网络请求（→ Trust）。
• 只产代码不改码：默认只生成新文件与检查报告，不修改你的现有源码（→ Reliability）。
• 可编辑优先：所有产物是纯文本代码/Markdown/JSON，可进版控、可二次编辑（→ Adaptability）。
• 零依赖透明：脚本仅用 Python 标准库，SKILL.md 已写明运行方式，无需安装任何包（→ Adaptability）。
• 不臆造结构：脚手架/组件严格基于 IR 或真实扫描，不为无依据内容编造（→ Convention）。
• 审计如实：lint/a11y/perf 结果如实反映现状，不粉饰（→ Reliability）。

安全说明

• 全部脚本仅用 Python 标准库，不发起任何网络请求。
• lint 会扫描硬编码密钥/URL（如 AKIA/sk-/http:// 内联），建议提交前 git diff 确认。
• 生成的代码仅作脚手架起点，生产使用前请过 aladin-secure-forge 做安全扫描（XSS/注入）。
• 绝不自动 sed/覆写你的源码文件，检查报告仅为文本清单。

参考文档（渐进式披露）