Agent Skills
› TangleML/tangle-ui
TangleML/tangle-ui
GitHub定义前端可访问性开发规范，涵盖ARIA标签、表单无障碍、键盘导航、屏幕阅读器支持及焦点样式，确保UI组件符合WCAG标准。
Install All Skills
npx skills add TangleML/tangle-ui --all -g -y
Skills in Collection (22)
定义前端可访问性开发规范，涵盖ARIA标签、表单无障碍、键盘导航、屏幕阅读器支持及焦点样式，确保UI组件符合WCAG标准。
创建交互式组件
实现表单逻辑
构建对话框或弹窗
优化用户界面可访问性
npx skills add TangleML/tangle-ui --skill accessibility -g -y
自动查找当前分支PR，读取并过滤未解决的审查意见，分析后由用户选择处理。支持修复代码或礼貌反驳，避免重复回复已处理评论，提升PR反馈响应效率。
用户希望处理PR审查意见
需要批量回复或解决代码审查中的问题
npx skills add TangleML/tangle-ui --skill address-pr-comments -g -y
规范 tangle-ui 中分析事件的追踪方法与 action_type 命名约定，指导通过 tracking 辅助函数添加事件及处理元数据。
添加新的分析追踪事件
定义 action_type 名称
配置分析提供商集成
npx skills add TangleML/tangle-ui --skill analytics-tracking -g -y
扫描GitHub仓库的开放Issue，结合代码库验证是否已实现。自动过滤无关项，将已完成或模糊的Issue标记状态并生成报告，经确认后发布评论以推动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 测试代码
优化测试脚本性能
npx skills add TangleML/tangle-ui --skill e2e-testing -g -y
列出项目中所有自定义技能文件，解析其名称、描述及类型（手动触发或自动触发），并按组分类展示。
用户询问有哪些可用命令
用户希望查看所有已定义的技能
npx skills add TangleML/tangle-ui --skill list-skills -g -y
提供Tangle-UI开源项目的写作指南，确保代码、UI文案和文档保持厂商中立，避免包含公司内部引用或特定基础设施假设。
编写面向用户的文案
生成错误消息
撰写用户可见的界面文本
npx skills add TangleML/tangle-ui --skill open-source -g -y
定义Tangle-UI项目的代码规范，涵盖文件结构、导入顺序、ESLint/Prettier配置、测试要求及注释原则。指导新代码编写、重构、审查及文档维护，确保团队一致性与代码质量。
编写或编辑前端代码时参考规范
进行代码审查以检查合规性
整理项目文件结构与导入顺序
添加或优化JSDoc和代码注释
npx skills add TangleML/tangle-ui --skill project-conventions -g -y
提供React项目编码规范，涵盖组件、Hooks、Provider模式及状态管理。重点指导React Compiler兼容性代码编写，禁止渲染期突变与副作用，确保自动记忆化正确运行。
编写React组件或Hook
配置React Compiler兼容规则
处理React上下文与状态
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平台术语讨论
需要确认组件或任务定义
npx skills add TangleML/tangle-ui --skill tangle-domain -g -y
提供 TanStack Query v5 的服务端状态管理规范，涵盖查询键约定、自定义 Hook 定义、Suspense 模式、依赖查询链及 Mutation 缓存失效策略，指导前端高效处理数据获取与缓存。
编写服务端数据获取逻辑
实现数据变更与缓存更新
优化前端状态管理性能
npx skills add TangleML/tangle-ui --skill tanstack-query -g -y
提供 TanStack Router v1 的前端路由开发规范，涵盖代码式路由定义、导航、URL状态管理及数据获取模式。
创建或修改前端路由配置
实现页面跳转与导航逻辑
处理 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基础组件规范，指导使用BlockStack、Heading、Button等封装组件替代原生HTML和直接引入库，统一布局、排版及样式标准。
编写JSX组件时
处理页面布局和排版
选择UI图标或按钮
npx skills add TangleML/tangle-ui --skill ui-primitives -g -y
提供项目验证与测试命令，包括代码格式化、Lint、类型检查及单元测试/E2E测试。适用于提交前校验或全面测试场景。
用户请求运行验证命令
用户请求运行测试命令
用户请求进行代码质量检查
npx skills add TangleML/tangle-ui --skill validate -g -y
提供Vitest单元测试与组件测试的最佳实践，涵盖React组件、Hook及纯函数的测试编写、依赖隔离模拟及文件组织规范。
编写前端单元测试
进行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格式规范参考，定义组件结构、输入输出类型及管道图实现方式，用于标准化数据流水线组件的配置与开发。
需要编写或配置Tangle组件YAML文件时
查询Tangle支持的输入输出数据类型时
理解管道图中任务引用和参数传递语法时
npx skills add TangleML/tangle-ui --skill Component YAML Format -g -y
提供Tangle框架下构建可维护ML管道的最佳实践，涵盖结构组织、组件选择、数据流设计及常见模式。
构建或优化Tangle 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
