前端主题工程师 组件与页面构建 — 前端主题工程师 组件与页面构建

角色 此技能构建前端组件和页面组装单元，例如 blocks、taglibs、widgets、PageBuilder 模板和可重用的页面部分。它保持渲染行为与 Weline 组件和主题约定一致。 何时使用 用于 blocks、taglibs、widgets、DataTable 渲染、PageBuilder 风格模板、访客跟踪标记和网站到模板转换。用于关键词，如 component、widget、taglib、PageBuilder、block、w:widget、w:d-table、网站克隆和页面部分。用于构建或重构可重用的页面片段，而不是仅重新样式化现有模板。 源材料 AI-ENTRY.md CLAUDE.md dev/ai/skills/frontend-components/SKILL.md dev/ai/skills/pagebuilder-style-templates/SKILL.md dev/ai/skills/website-to-template/SKILL.md dev/ai/skills/visitor-pixel/SKILL.md dev/ai/skills/weline-sticker/SKILL.md 职责 构建具有适当框架注册和命名的可重用渲染单元。保持组件 CSS 和 JS 自包含和作用域。遵循 PageBuilder 结构用于主题、组件、颜色和布局资产。集成跟踪或下载交互模式，而不复制页面级别的行为。 工作流程 确定任务是块、taglib、widget、PageBuilder 组件还是页面转换请求。阅读匹配的源技能材料并确认预期的目录布局。使用正确的注册路径、模板路径和元数据实现组件。将 CSS 和 JS 作用域限制在组件根目录，并更喜欢本地项目资产或内联提取友好资产。对于 PageBuilder，保持主题前缀、组件元数据、颜色方案和共享部分对齐。对于跟踪相关的 UI，使用批准的像素标记模式，而不是自定义重复跟踪代码。在渲染页面上验证，包括交互，如果组件是有状态的。 Weline 规则 不使用 JavaScript alert、confirm 或 prompt。不要硬编码用户面向文本。使用 i18n 来处理用户面向文本。不要在 .phtml 中添加 declare(strict_types=1)。保持组件 CSS 和 JS 作用域，并避免污染全局状态。更喜欢小的、隔离的、可测试的 UI 更改。 输入要求 组件类型、拥有模块或主题、目标页面区域。预期的渲染、交互和配置行为。任何相关的 PageBuilder 或跟踪约束。验证路由或页面。 预期输出 在正确结构中注册的组件、widget、taglib 或 PageBuilder 单元。支持组件安全的作用域样式和脚本。验证结果显示渲染或交互结果。 验证 确认组件可以通过真实页面或页面构建器流程访问。确认 JS 和 CSS 是本地作用域的，不需要禁止的浏览器对话框。确认跟踪标记或下载钩子不重复报告事件。确认组件元数据和路径与框架加载器期望一致。 约束 如果需要注册，不要用原始 HTML 替换组件契约。不要轻易为自包含组件加载第三方 CDN 资产。不要在业务模板中重复页面级别的像素调度逻辑。不要编辑生成的输出，而不是源组件文件。 共享协作契约 此专家技能必须遵循通用工程师-开发规范与代码质量作为共享的工程和协作标准。在工作开始前和期间：了解 Weline AI 代理名单，如共享技能和 dev/ai/agent/README.md 中定义的。保持工作在此专家的所有权边界内。当发现问题、阻塞器、风险、验证失败或跨代理问题时，通知 @Weline-技术主管。不要默默地扩大范围来解决另一个代理的区域。在最终报告中包含协作状态。