Agent Skills
› TangleML/tangle-ui
TangleML/tangle-ui
GitHub定义项目前端组件的无障碍访问标准，涵盖ARIA标签、表单关联、键盘导航、屏幕阅读器支持及焦点样式，确保UI符合a11y规范。
Install All Skills
npx skills add TangleML/tangle-ui --all -g -y
Skills in Collection (22)
定义项目前端组件的无障碍访问标准，涵盖ARIA标签、表单关联、键盘导航、屏幕阅读器支持及焦点样式，确保UI符合a11y规范。
创建交互式组件
开发表单或对话框
实现用户界面交互逻辑
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 中分析事件追踪的最佳实践，包括使用 tracking 辅助函数、命名规范及元数据传递方式。
添加新的追踪事件
定义 action_type 名称
配置分析提供者
npx skills add TangleML/tangle-ui --skill analytics-tracking -g -y
自动审计 GitHub 仓库中的未关闭 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 测试代码
npx skills add TangleML/tangle-ui --skill e2e-testing -g -y
列出项目中所有自定义技能，通过解析 SKILL.md 文件提取名称、描述及类型（手动命令或自动触发），并按组分类展示。
用户询问有哪些可用命令
用户希望查看所有已定义的技能
npx skills add TangleML/tangle-ui --skill list-skills -g -y
提供开源项目文案规范，指导编写面向用户的UI文本、错误消息及文档。要求内容供应商中立，禁止包含公司内部引用、内部URL或特定基础设施假设，确保通用性和可配置性。
编写用户界面文案
撰写错误提示信息
生成公开文档内容
创建横幅通知文本
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项目开发规范，涵盖组件结构、自定义Hook、Provider模式及状态管理策略。重点指导React Compiler兼容性代码编写，确保无渲染期副作用，提升自动记忆化效率与代码质量。
编写React组件或Hook
配置React Compiler兼容性
设计状态管理方案
npx skills add TangleML/tangle-ui --skill react-patterns -g -y
根据项目编码规范审查代码变更，支持指定PR或当前分支。利用GitHub CLI获取差异并分析上下文，特别处理堆叠PR场景，确保仅审查当前PR引入的变更，避免误报上游问题。
用户请求代码审查
提及review或审查变更
npx skills add TangleML/tangle-ui --skill review -g -y
定义 Tangle 平台（ML 流水线编排系统）的核心领域术语，涵盖 Pipeline、Component、Task 等概念及其数据结构规范，用于统一命名和开发交流。
讨论或定义 ML 流水线相关概念
涉及 ComponentSpec 或 Task 的结构设计
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状态管理及数据获取的最佳实践模式，指导开发者使用代码式路由和特定Hook进行前端开发。
需要定义或配置React应用路由结构
实现页面跳转或处理URL搜索参数
npx skills add TangleML/tangle-ui --skill tanstack-router -g -y
提供TypeScript编码规范，涵盖严格类型定义、避免不安全类型断言、API与领域数据类型使用及命名约定，指导编写类型安全的TypeScript代码。
编写TypeScript代码
定义数据结构或接口
处理类型安全相关问题
npx skills add TangleML/tangle-ui --skill typescript-standards -g -y
定义项目UI基础组件规范，指导使用BlockStack、Heading等替代原生HTML，统一布局、排版及图标样式，确保前端代码一致性与可维护性。
编写或重构React/JSX组件
处理页面布局与Flex排版
调整文本字体与层级样式
插入图标或按钮元素
npx skills add TangleML/tangle-ui --skill ui-primitives -g -y
用于运行项目的验证和测试命令，包括格式化、代码检查、类型检查及单元测试等。
用户要求验证项目
用户要求运行 lint 或 typecheck
用户要求执行测试
npx skills add TangleML/tangle-ui --skill validate -g -y
提供基于Vitest和React Testing Library的单元测试与组件测试规范，涵盖纯函数、组件及Hook测试写法，强调隔离依赖、就近放置测试文件及使用vi.mock进行模拟。
编写前端单元测试
编写React组件测试
编写自定义Hook测试
npx skills add TangleML/tangle-ui --skill vitest-testing -g -y
提供 Pipeline Studio 应用的 Playwright E2E 测试编写与调试指南，涵盖环境配置、CLI 交互、定位器探索及基于 playwright-cli 的 Agent 调试工作流。
编写端到端测试用例
调试测试失败
查找页面元素选择器
使用 Playwright CLI 进行交互式调试
npx skills add TangleML/tangle-ui --skill playwright-testing -g -y
Tangle组件YAML格式参考文档，定义组件结构、输入输出类型及管道实现规范。
查询Tangle组件YAML语法
查看输入输出类型定义
了解管道图实现方式
npx skills add TangleML/tangle-ui --skill Component YAML Format -g -y
提供Tangle框架中构建可维护机器学习管道的最佳实践，涵盖结构组织、组件选择、数据流设计及常见模式，旨在提升管道质量与复用性。
需要设计或重构机器学习流水线时
检查Tangle管道结构是否符合规范时
创建新的数据处理组件前
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
