Agent Skills
› TangleML/tangle-ui
TangleML/tangle-ui
GitHub定义前端UI组件的无障碍访问标准，涵盖ARIA标签、表单关联、键盘导航、屏幕阅读器支持及焦点样式，确保交互元素符合a11y规范。
Install All Skills
npx skills add TangleML/tangle-ui --all -g -y
Skills in Collection (23)
定义前端UI组件的无障碍访问标准，涵盖ARIA标签、表单关联、键盘导航、屏幕阅读器支持及焦点样式，确保交互元素符合a11y规范。
创建交互式组件
构建表单或对话框
实现用户界面
npx skills add TangleML/tangle-ui --skill accessibility -g -y
自动查找当前分支的PR，读取未解决的审查评论并过滤无效项。智能分析评论后向用户展示选项，支持修复代码或回复讨论，旨在高效处理PR反馈。
用户希望处理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，比对代码库确认是否已实现。支持按仓库、数量或指定ID筛选，过滤无关类型后验证状态并生成报告，经确认后自动评论通知相关方。
用户希望清理或审核GitHub Issue
需要批量检查Issue是否已在代码中实现
npx skills add TangleML/tangle-ui --skill audit-tickets -g -y
自动同步代码变更至文档仓库，分析PR并生成用户可见更新的草稿PR。适用于每周文档同步或执行/docs-update命令时。
每周文档同步
用户调用/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
提供开源项目文案规范，指导编写用户可见的UI文本、错误提示及文档。要求内容厂商中立，禁止包含公司内部引用、内部链接或特定基础设施假设，确保通用性和可配置性。
撰写面向用户的界面文案
编写错误消息或横幅通知
生成开源项目文档
npx skills add TangleML/tangle-ui --skill open-source -g -y
根据仓库模板起草或重写PR标题和描述，用通俗语言说明变更目的、受益者及前后行为差异。提供具体的测试步骤和验证方法，确保非技术人员也能理解，严禁编造问题或未经证实的声明。
准备新的Pull Request描述
更新现有的Pull Request描述
npx skills add TangleML/tangle-ui --skill pr-description -g -y
定义 Tangle-UI 项目的代码规范，涵盖文件结构、导入顺序、ESLint/Prettier 配置、测试要求及注释文档准则。用于指导新代码编写、重构、审查及项目初始化时的结构组织。
编写或编辑 React/TypeScript 代码
进行代码审查 (Code Review)
添加或更新 JSDoc 注释
创建新文件或整理导入路径
npx skills add TangleML/tangle-ui --skill project-conventions -g -y
定义React项目开发规范，涵盖组件、Hooks及Provider结构。指导使用React 19与Compiler兼容写法，规定状态管理选型（Tanstack Query/Router），确保代码可优化且符合工程标准。
编写React组件
创建自定义Hooks
配置Context Provider
处理React Compiler兼容性
npx skills add TangleML/tangle-ui --skill react-patterns -g -y
基于 Git 和 GitHub CLI 对 PR 或提交进行代码审查，严格遵循项目编码规范。支持指定 PR 号、当前分支及回退到本地提交审查，具备堆叠 PR 感知能力，确保仅审查当前变更并准确记录位置以便后续评论。
用户请求代码审查
提及审查更改
npx skills add TangleML/tangle-ui --skill review -g -y
提供Tangle平台领域术语与概念定义，涵盖Pipeline、Component、Task等核心实体及UI节点类型，用于统一命名规范和理解数据流结构。
讨论或命名Tangle相关概念时
解释Pipeline或Component结构时
npx skills add TangleML/tangle-ui --skill tangle-domain -g -y
提供TanStack Query v5的服务器状态管理规范，涵盖查询定义、缓存键约定、Suspense及突变模式。指导开发者优先使用useQuery而非Context，确保数据获取与缓存的最佳实践。
编写数据获取逻辑
实现服务端状态管理
处理缓存失效策略
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编码规范，涵盖严格类型、接口与类型定义、避免不安全断言及命名约定。用于指导编写符合项目标准的TypeScript代码，确保类型安全与一致性。
编写TypeScript代码
定义数据或业务类型
处理API响应类型
npx skills add TangleML/tangle-ui --skill typescript-standards -g -y
定义项目中UI基础组件的使用规范，涵盖布局、排版、按钮和图标。指导开发者使用BlockStack、Heading等封装组件替代原生HTML，结合TailwindCSS v4与shadcn/ui进行样式开发，确保一致性与可访问性。
编写前端组件代码
处理页面布局和排版
选择UI元素或图标
npx skills add TangleML/tangle-ui --skill ui-primitives -g -y
用于运行项目验证和测试命令，支持格式化、Lint、类型检查及单元测试/E2E测试。提供便捷指令触发完整校验或特定测试流程。
用户要求验证代码质量
执行 Lint 或类型检查
运行单元测试或 E2E 测试
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 交互探测、定位器探索及自动化测试执行流程。
创建或修改 E2E 测试用例
调试前端页面测试失败问题
探索页面元素选择器
添加 data-testid 属性
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框架下构建结构化、可维护ML管道的最佳实践指南，涵盖管道结构组织、组件选择策略、数据流设计及常见模式，旨在提升ML工程效率与代码质量。
用户询问如何设计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
