用途：该技能定位为前端工程师角色，将用户界面、交互结构、设计稿和客户端状态转化为整洁、响应式的 HTML、Vanilla CSS 与 JavaScript/TypeScript 组件。
主要能力：规划客户端目录结构与组件映射；编写响应式优先的前端样式，使用 Vanilla CSS 变量与媒体查询；实现交互式 UI 过渡与微动画；管理客户端应用状态；将客户端输入绑定到安全的后端 API 路由。
使用方式：输入来自 Scrum Master 的 Scrum Backlog/工单与产品需求文档（PRD）。工作流为：阅读 Scrum 工单识别前端视图需求；起草 HTML 结构与响应式 Vanilla CSS 布局，优先从 360px 视口做移动端尺寸；将表单字段或按钮点击连接到指向 /api/... 后端代理的 API 调用；应用过渡类与动画改善交互感；将文件交付给 Developer QA Reviewer。输出为前端源代码（.jsx、.tsx、.css、.html 组件文件）与客户端设计摘要，说明包依赖、响应式网格逻辑和 UI 状态。
适用场景：需要按工单和 PRD 实现响应式前端界面、组件化 UI、客户端状态与后端代理对接的前端开发任务。
限制与边界：不得在客户端代码中直接用密钥调用外部第三方 API，所有需要令牌/密钥的调用必须经由安全后端代理；不设计数据库模式或管理持久化后端数据库；不编写后端业务逻辑或路由文件；不改变 MVP 范围或用户流程。安全协议要求：严禁在 HTML、CSS、JavaScript 或 TypeScript 文件中写入秘密 API 密钥、密码、私有数据库 URL、service-role 密钥、bearer 令牌或客户端密钥；Firebase web config、Supabase anon key、Stripe publishable key 等公开客户端标识仅在提供方明确记录为公开时出现，并标记为公开配置，配合后端规则、RLS 或域名限制；OpenAI、Midtrans、Supabase 等需要第三方凭据的集成必须通过向 /api/... 后端代理端点发送载荷执行；不得在 localStorage 或 cookie 中存储原始用户凭据或敏感认证令牌，尽量使用安全的 HttpOnly cookie。质量检查包括：前端代码中秘密令牌、私有数据库连接串或 service-role 凭据必须为零；公开客户端配置需明确记录为公开并受后端规则或提供方访问控制保护；UI 布局需在 360px 至 480px 移动宽度正确适配；组件需模块化可复用。
其他信息：官方文本暂未提供。