Agent Skills
› TangleML/tangle-ui
TangleML/tangle-ui
GitHub提供前端 UI 组件的可访问性开发规范，涵盖 ARIA 标签、表单关联、键盘导航及屏幕阅读器支持，确保交互符合无障碍标准。
Install All Skills
npx skills add TangleML/tangle-ui --all -g -y
Skills in Collection (22)
提供前端 UI 组件的可访问性开发规范，涵盖 ARIA 标签、表单关联、键盘导航及屏幕阅读器支持，确保交互符合无障碍标准。
创建交互式组件
构建表单或对话框
实现用户界面功能
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 辅助函数、命名规范及元数据传递方式。
添加新的分析追踪事件
定义 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。内置安全机制防范提示注入，支持按日期范围分析，确保文档与代码状态一致且需人工审核。
执行每周文档同步
用户调用/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添加及导入整理。
编写新代码
编辑现有代码
添加或审查注释和JSDoc
创建文件
整理导入
npx skills add TangleML/tangle-ui --skill project-conventions -g -y
提供 React 组件、Hooks 及 Provider 的编码规范，指导使用 React 19 特性与 Tanstack 生态进行状态管理。同时规范 React Compiler 兼容代码写法，确保自动记忆化正确生效。
编写新的 React 组件或 Hook
配置 React Compiler 兼容性
实现 Context 或状态管理逻辑
npx skills add TangleML/tangle-ui --skill react-patterns -g -y
针对项目代码规范进行PR或Commit的代码审查。支持指定PR号、当前分支自动识别及本地提交回退，兼容Graphite堆叠PR模式，确保仅审查变更代码并记录精确位置以便评论。
用户请求代码审查
提及检查代码变更
npx skills add TangleML/tangle-ui --skill review -g -y
提供Tangle平台领域术语与概念，涵盖管道、组件、任务等核心定义及UI元素规范。用于统一命名和讨论相关概念，确保前后端术语一致，避免使用旧称。
涉及Tangle平台管道构建或运行时概念时
需要确认组件、任务或输入输出规范时
前端UI节点命名或交互逻辑定义时
npx skills add TangleML/tangle-ui --skill tangle-domain -g -y
提供 TanStack Query v5 的服务端状态管理最佳实践，涵盖查询定义、缓存键规范、Suspense 及突变模式，指导开发者高效处理数据获取与缓存。
编写数据获取逻辑
配置服务端状态缓存
实现数据突变操作
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代码和类型定义。
编写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测试。适用于提交前校验或运行完整测试套件。
用户请求验证代码
用户要求运行测试
用户提及 lint 或 typecheck
npx skills add TangleML/tangle-ui --skill validate -g -y
提供基于Vitest的React单元测试与组件测试规范，涵盖测试文件组织、纯函数/组件/Hook测试写法及Mock策略，用于指导前端代码质量保障。
编写单元测试
编写组件测试
编写Hook测试
npx skills add TangleML/tangle-ui --skill vitest-testing -g -y
提供 Pipeline Studio 应用的 Playwright E2E 测试编写与调试指南，涵盖环境配置、CLI 快速探测及交互式调试工作流。
创建端到端测试用例
调试测试失败
探索页面选择器
添加 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管道的最佳实践，涵盖结构组织、组件选择、数据流设计及常见模式，旨在提升流水线清晰度和复用性。
询问Tangle管道设计规范
优化机器学习流水线结构
检查组件复用与连接规范
npx skills add TangleML/tangle-ui --skill Tangle Pipeline Best Practices -g -y
执行代码库定期维护，扫描并修复格式、死代码、重复逻辑及测试等问题。通过验证门控确保安全，为每个修复领域生成草稿PR和队列Issue，保持代码整洁。
需要执行每周代码库维护任务
调用 /gardening 命令指定或默认运行卫生支柱
npx skills add TangleML/tangle-ui --skill gardening -g -y
