阿拉丁前端工程工坊

现有前端工具都是单点

在 skillhub 上找前端向技能，常见的选择大概三类：只输出前端编码规范文本的文档型技能、只出视觉 UI 设计稿的、以及绑定单一云厂商的部署 PaaS。它们各自覆盖一小段链路：规范停在文档里不会校验，设计稿不落地成工程代码，部署工具不管脚手架与构建配置。结果就是页面仍然手敲、脚手架从零搭、构建配置靠抄、性能与可访问性靠猜。更麻烦的是，当你已经用 aladin-code-pilot 审过函数、api-pilot 验过接口、cicd-forge 部署了服务，前端这一侧却没有对应的工程化收口。

这个技能做了什么

阿拉丁·前端工程工坊（@user_d18c97ea/aladin-frontend-forge）把前端工程化收口成一套纯本地工具，入口是一个零依赖的 Python 脚本 fe_build.py，全部基于标准库运行，不发起任何网络请求。核心能力包括：

• 脚手架生成：fe_build.py scaffold 按 React/Vue3/Svelte 三套模板生成项目骨架，含 package.json、目录结构、入口、路由与状态管理占位、ESLint/TS 严格配置。
• 组件生成：fe_build.py component 产出可复用组件，附带 Props 类型、CSS Modules/Tailwind 样式、示例用法和测试占位。
• 规范落地检查：fe_build.py lint 做静态启发式检查——命名、未用变量、console 残留、TS any、大文件、目录结构、硬编码密钥/URL，输出问题清单加严重度。
• 构建配置与体积预算：fe_build.py config 生成 Vite/Webpack 配置，含代码分割、Tree-shaking、压缩、环境变量、Proxy、alias，并校验产物体积预算。
• 性能审计：fe_build.py perf 基于依赖与源码元数据识别大依赖、重复依赖、缺失懒加载，并生成 Lighthouse 检查清单。
• 可访问性校验：fe_build.py a11y 扫描 JSX/模板中的 alt/aria/语义标签/表单 label/键盘可达性。
• 组件文档：从 Props 与注释生成 Markdown 文档，可与 doc-forge 联动。

输入可以是仓库路径（自动探测框架与依赖）或一份 fe_ir.json 中间表示。输出落在指定目录：生成的代码、quality.json（lint 结果）、a11y.json、perf.json、components.md，外加一个自包含 HTML 看板和 Markdown 报告索引。

适用边界与注意点

• 不产出视觉 UI 设计稿，那是设计技能的范畴；它产的是工程代码。
• 不生成后端/接口/数据库代码，不实时抓取外部页面，只处理本地项目与 IR。
• 默认只生成新文件和报告，不自动改写你的现有源码——lint 问题只给清单与建议，避免误改生产代码。
• lint/a11y/perf 都是静态启发式，如实反映现状但不粉饰，也不替代真实浏览器 Lighthouse 跑分；真实构建仍需本地 npm 执行。
• 生成的脚手架仅作起点，提交前建议过一遍 secure-forge 做 XSS/注入安全扫描。