Agent Skills
› TangleML/tangle-ui
TangleML/tangle-ui
GitHub提供前端组件无障碍访问标准，涵盖 ARIA 标签、表单关联、键盘导航、屏幕阅读器支持及语义化 HTML 规范，确保 UI 交互符合 a11y 要求。
Install All Skills
npx skills add TangleML/tangle-ui --all -g -y
Skills in Collection (22)
提供前端组件无障碍访问标准，涵盖 ARIA 标签、表单关联、键盘导航、屏幕阅读器支持及语义化 HTML 规范，确保 UI 交互符合 a11y 要求。
创建交互式组件
构建表单或对话框
实现用户界面时
npx skills add TangleML/tangle-ui --skill accessibility -g -y
自动查找当前分支的PR，读取未解决的评审意见，智能分析建议并展示给用户选择。用户确认后，执行代码修复或礼貌回复，避免重复处理已解决项。
用户需要处理PR评审反馈
用户希望自动化回复或修改代码以回应审查意见
npx skills add TangleML/tangle-ui --skill address-pr-comments -g -y
指导在 tangle-ui 中通过 tracking 辅助函数或手动 track() 方法记录分析事件，涵盖命名规范、元数据传递及不同场景下的最佳实践。
添加新的分析追踪事件
定义 action_type 名称
处理前端用户行为数据采集
npx skills add TangleML/tangle-ui --skill analytics-tracking -g -y
扫描GitHub开放Issue，通过代码库验证是否已实现。自动过滤特定类型问题，评估状态并生成报告，经批准后在Issue下留言，辅助清理和关闭重复或已完成的任务。
用户要求审核或清理GitHub Issue
用户希望确认Issue是否已在代码中实现
npx skills add TangleML/tangle-ui --skill audit-tickets -g -y
自动分析近期合并的PR，识别面向用户的变更，并生成文档更新草稿PR。用于定期同步代码变更与公共文档，确保文档准确性。
用户调用/docs-update命令
执行每周文档同步任务
npx skills add TangleML/tangle-ui --skill docs-update -g -y
提供基于 Playwright 的端到端测试最佳实践，涵盖选择器策略、自动等待、测试隔离及断言规范，指导 E2E 测试的编写、修改与审查。
编写新的 E2E 测试用例
修改现有 E2E 测试代码
审查 E2E 测试质量
npx skills add TangleML/tangle-ui --skill e2e-testing -g -y
列出项目中所有自定义技能文件，解析其名称、描述及类型（手动指令或自动触发），并按类别分类展示。
用户询问可用命令
用户希望查看所有技能
npx skills add TangleML/tangle-ui --skill list-skills -g -y
提供开源项目文案规范，指导编写用户可见的 UI 文本、错误消息及文档。要求内容厂商中立，避免包含公司内部引用、内部链接或特定基础设施假设，确保对公众可用。
撰写面向用户的界面文案
编写错误提示或横幅信息
生成开源项目文档
npx skills add TangleML/tangle-ui --skill open-source -g -y
定义Tangle-UI项目的代码规范，涵盖文件结构、导入顺序、代码质量、注释原则及错误处理。指导新代码编写、重构、审查及文档生成，确保团队一致性与可维护性。
编写新代码时参考项目约定
审查或添加代码注释和JSDoc
调整文件结构和导入顺序
进行代码重构以符合规范
npx skills add TangleML/tangle-ui --skill project-conventions -g -y
定义React组件、Hooks及Provider的编码规范，指导使用React 19特性与TanStack生态进行状态管理，并明确React Compiler兼容代码的编写规则。
编写React组件
创建自定义Hooks
配置Context Provider
确保React Compiler兼容性
npx skills add TangleML/tangle-ui --skill react-patterns -g -y
根据项目编码规范审查代码变更，支持通过PR号或当前分支触发。利用GitHub CLI获取差异并审查，具备堆叠PR感知能力，确保仅审查当前PR引入的变更。
用户请求代码审查
提及审查变更
npx skills add TangleML/tangle-ui --skill review -g -y
提供Tangle平台领域术语与概念，涵盖Pipeline、Component、Task等核心定义及UI节点类型。用于确保在讨论、命名或开发中正确使用Tangle特有术语，避免使用旧称。
涉及Tangle平台组件命名
解释Pipeline或Task概念
讨论ML工作流结构
npx skills add TangleML/tangle-ui --skill tangle-domain -g -y
规范 TanStack Query v5 在服务器状态管理中的使用，包括查询键约定、自定义 Hook 定义、Suspense 模式及变更缓存策略，指导开发者高效处理数据获取与缓存。
需要编写数据获取逻辑
实现服务端状态缓存
处理依赖查询或突变
npx skills add TangleML/tangle-ui --skill tanstack-query -g -y
提供TanStack Router v1的使用规范，涵盖代码路由定义、路径常量管理、导航交互、数据获取策略及搜索参数处理。
创建或修改路由配置
实现页面导航逻辑
处理URL搜索参数
npx skills add TangleML/tangle-ui --skill tanstack-router -g -y
提供项目内 TypeScript 编码规范，涵盖严格类型定义、避免不安全断言、API 数据接口处理及命名约定，旨在提升代码类型安全与一致性。
编写 TypeScript 代码
定义数据类型
处理类型安全问题
npx skills add TangleML/tangle-ui --skill typescript-standards -g -y
定义前端 UI 基础组件使用规范，涵盖布局、排版、按钮及图标，要求优先使用封装好的 primitives 而非原生 HTML，并规定样式与抽象建议。
编写 JSX 组件
创建 UI 界面
处理布局和排版
npx skills add TangleML/tangle-ui --skill ui-primitives -g -y
提供项目验证与测试命令，支持代码格式化、Lint、类型检查及单元测试和E2E测试。用于在提交前或开发过程中确保代码质量与功能正确性。
用户请求验证代码
用户请求运行测试
用户请求进行Linter检查
npx skills add TangleML/tangle-ui --skill validate -g -y
提供基于Vitest的React单元测试与组件测试规范，涵盖纯函数、Hook及组件测试模式，强调隔离依赖与精准Mock。
编写前端单元测试
编写React组件测试
编写自定义Hook测试
npx skills add TangleML/tangle-ui --skill vitest-testing -g -y
指导为 Pipeline Studio 编写和调试 Playwright E2E 测试，涵盖环境配置、CLI 交互探测、元素定位及自动化脚本生成。
创建端到端测试用例
调试测试失败
探索页面元素选择器
添加组件测试标识
npx skills add TangleML/tangle-ui --skill playwright-testing -g -y
提供Tangle组件YAML格式规范参考，涵盖基础结构、数据类型及Pipeline图实现细节，用于定义数据流任务的输入输出与执行逻辑。
询问Tangle组件YAML语法
需要定义数据管道输入输出类型
查看Pipeline任务引用格式
npx skills add TangleML/tangle-ui --skill Component YAML Format -g -y
提供构建结构化、可维护机器学习管道的最佳实践，涵盖阶段划分、组件选择、数据流设计及常见模式，旨在提升Tangle平台下ML开发的质量与规范性。
构建或优化ML管道
设计数据处理流程
npx skills add TangleML/tangle-ui --skill Tangle Pipeline Best Practices -g -y
定期扫描代码库，针对卫生、注释、去重、重构等维度执行安全修复，生成草稿PR。用于维持代码质量与一致性。
需要定期清理代码库
执行 /gardening 命令
npx skills add TangleML/tangle-ui --skill gardening -g -y
