opal-frontend
基于Angular SSR的OPAL前端应用，集成共享Codex技能，支持本地全栈开发。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：opal-frontend。 它的用途是：基于Angular SSR的OPAL前端应用，集成共享Codex技能，支持本地全栈开发。 完整的 Skill 内容见：https://321skill.com/skills/opal-frontend/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我检查一下OPAL前端项目中，代理到罚款服务的API路由配置是否正确。”，它会引导你查看相关的代理设置文件，并可能调用共享的Codex技能来解析Angular SSR的路由逻辑。或者，当你说“我想在本地测试一个新的用户界面组件”，AI可以指导你使用 `yarn dev:local-lib:ssr` 命令，并提醒你确保本地的UI库已打包。
介绍
OPAL Frontend 是一个采用 Angular 服务端渲染（SSR）技术构建的前端应用，主要用于部署在 Kubernetes 环境中的 Web 服务器，并作为代理将 API 请求转发至内部后端服务（如罚款服务、用户服务）。它解决了在复杂微服务架构下，前端应用需要统一接入、代理和开发的问题。
使用该技能，开发者可以快速搭建本地开发环境，通过克隆并运行多个关联的后端服务仓库（如罚款服务、用户服务、日志服务以及共享基础设施），实现前后端联调。项目集成了共享的 Codex 技能库，通过运行同步脚本，可以将通用的前端和通用技能以符号链接形式引入本地 .codex/skills/ 目录，提升开发效率。
该技能非常适合正在参与 OPAL 项目开发的前端或全栈工程师，尤其是需要同时处理前端界面、服务端渲染逻辑以及与多个后端 API 交互的场景。对于希望在一个统一项目中管理前端代码、共享开发技能并模拟生产环境部署的团队也很有帮助。
使用建议：请严格按照文档要求，将所有相关仓库克隆到同一父目录下，并确保先启动共享基础设施服务。注意，.codex/skills/ 目录已被 Git 忽略，开发者可在其中存放本地私有技能而无需提交。
核心特点
核心区别在于它深度集成了专为 OPAL 项目定制的共享 Codex 技能库，并通过脚本自动同步，为 Angular/Vitest 单元测试等特定工作流提供即用型技能支持；同时，它明确设计为在 Kubernetes 中部署的 SSR 应用，并承担了代理内部 API 的关键角色，而非一个通用的前端脚手架。
注意事项
该技能高度绑定于特定的 OPAL 项目生态，不适合用于其他技术栈（如 React、Vue）或无关项目的开发。
常见问题
如何获取并同步共享的 Codex 技能？
克隆同级目录下的 `opal-dev-agent-skills` 仓库，并运行 `./scripts/frontend/sync-codex-skills.sh` 脚本即可自动同步。
本地开发需要提前启动哪些服务？
需要先克隆并启动 `opal-shared-infrastructure`、`opal-fines-service`、`opal-user-service` 和 `opal-logging-service` 等多个后端服务。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/opal-frontend/raw/index.md 读取 opal-frontend 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/opal-frontend/raw/index.md（查看排版版本）