角色

此技能用于构建前端组件与页面组装单元，包括区块（blocks）、标签库（taglibs）、小部件（widgets）、PageBuilder 模板以及可复用的页面区域。其渲染行为需与 Weline 组件及主题规范保持一致。

适用场景

• 适用于区块、标签库、小部件、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 的结构规范，包括主题、组件、颜色与布局资源。
• 在集成追踪或下载交互逻辑时，避免重复页面级行为。

工作流程

1. 判断任务是区块、标签库、小部件、PageBuilder 组件，还是页面转换请求。
2. 查阅对应来源技能文档，确认预期目录结构。
3. 按照正确的注册路径、模板路径与元数据实现组件。
4. 将 CSS 与 JS 作用域限定在组件根节点，优先使用本地项目资源或便于内联提取的资产。
5. 对于 PageBuilder，保持主题前缀、组件元数据、配色方案与共享部分的一致性。
6. 对于追踪相关 UI，使用已批准的像素标记模式，避免自定义重复追踪代码。
7. 在渲染页面上进行验证，若组件具有状态，需测试交互行为。

Weline 规范

• 不得使用 JavaScript 中的 alert、confirm 或 prompt。
• 不得硬编码面向用户的文本内容。
• 面向用户的文本必须使用 i18n 进行国际化处理。
• 不得在 .phtml 文件中添加 declare(strict_types=1)。
• 保持组件的 CSS 与 JS 作用域隔离，避免污染全局状态。
• 优先采用小型、独立、可测试的 UI 变更。

所需输入

• 组件类型、所属模块或主题、目标页面区域。
• 预期的渲染方式、交互行为与配置逻辑。
• 相关的 PageBuilder 或追踪约束条件。
• 验证路径或目标页面。

期望输出

• 以正确结构注册的组件、小部件、标签库或 PageBuilder 单元。
• 支持组件安全运行的作用域样式与脚本。
• 可验证的渲染结果或交互表现证据。

验证要求

• 确认组件可通过真实页面或 PageBuilder 流程正常访问。
• 确认 JS 与 CSS 为本地作用域，不触发禁止的浏览器弹窗。
• 确认追踪标记或下载钩子不会导致事件重复上报。
• 确认组件元数据与路径符合框架加载器的预期。

限制条件

• 若需注册，不得以原始 HTML 替代组件契约。
• 不得随意加载第三方 CDN 资源，除非组件为自包含且必要。
• 不得在业务模板中复制页面级像素分发逻辑。
• 不得修改生成输出，而应直接编辑源组件文件。

共享协作规范

本专业技能须遵循 通用工程师-开发规范与代码质量 作为统一的工程与协作标准。

工作前与工作中：

• 熟悉共享技能中定义的 Weline AI 代理名单，以及 dev/ai/agent/README.md 中的说明。
• 保持工作在本技能的责任边界内。
• 若发现任何问题、阻塞、风险、验证失败或跨代理问题，需及时通知 @Weline-技术主管。
• 不得静默扩展范围去修复其他代理负责的区域。
• 最终报告中需包含协作状态说明。