Agent Skills
› zai-org/ZCode
zai-org/ZCode
GitHub基于Chrome/Chromium CDP的浏览器自动化CLI工具，支持导航、表单填写、点击、截图及数据提取。适用于网页交互、Web应用测试、登录模拟及任意浏览器任务自动化，通过快照机制实现精准元素操作。
Install All Skills
npx skills add zai-org/ZCode --all -g -y
Skills in Collection (13)
基于Chrome/Chromium CDP的浏览器自动化CLI工具，支持导航、表单填写、点击、截图及数据提取。适用于网页交互、Web应用测试、登录模拟及任意浏览器任务自动化，通过快照机制实现精准元素操作。
需要打开网站或页面
填写表单或点击按钮
截取网页截图
从页面抓取数据
测试Web应用功能
模拟用户登录网站
任何需要程序化控制浏览器的场景
npx skills add zai-org/ZCode --skill agent-browser -g -y
基于 shadcn/ui 构建 AI 原生聊天界面的组件库，提供对话、消息等预置组件，支持通过 CLI 快速集成到 Next.js 项目中。
构建 AI 聊天界面
集成 AI 助手 UI 组件
npx skills add zai-org/ZCode --skill ai-elements -g -y
用于在ZCode仓库中检查模块和层级边界，确保代码变更符合架构规范。通过生成有界上下文和分析所有权变更，在编码前明确设计决策，防止架构漂移。
编辑ZCode仓库代码前
涉及跨模块或所有权变更的代码修改
npx skills add zai-org/ZCode --skill architecture-governance -g -y
用于在修改或删除 TypeScript 导出前，通过 CLI 检查符号级别的引用关系，验证导出是否被使用或仅被重新导出，辅助重构和清理工作。
删除代码前验证导出是否安全
重构时查找符号的调用者
npx skills add zai-org/ZCode --skill dep-refs -g -y
系统化探索Web应用以发现Bug和UX问题，使用agent-browser进行自动化测试并生成包含截图、视频及详细复现步骤的结构化报告。
dogfood
QA
exploratory test
find issues
bug hunt
npx skills add zai-org/ZCode --skill dogfood -g -y
用于管理 ZCode 桌面端 E2E 用例的生命周期，涵盖规划、维护、回放及 CI 准入。包括覆盖率规划、手动审查用例捕获与证据记录，以及通过 Docker 和 CI 流程促进测试用例的正式化。
规划 E2E 测试覆盖范围
编写或更新 E2E 测试用例规范
运行手动审查或捕获测试以生成证据
检查测试用例是否符合 CI 准入标准
npx skills add zai-org/ZCode --skill e2e-case-lifecycle -g -y
用于在ZCode开发前分析功能变更的影响范围，梳理共享组件、状态及测试覆盖，生成影响简报或实施交接文档。
询问功能变更的影响范围
需要映射UI组件和状态依赖
准备E2E测试用例或规格说明
npx skills add zai-org/ZCode --skill feature-boundary-planner -g -y
基于Vercel工程团队的React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端性能等70条规则，用于指导代码编写、审查与重构。
编写或审查React/Next.js组件代码
进行数据获取逻辑实现
执行代码重构以提升性能
npx skills add zai-org/ZCode --skill vercel-react-best-practices -g -y
用于生成、验证和删除大型合成 ZCode 任务数据，以进行 UI/会话性能测试。通过操作本地 SQLite 数据库模拟长运行任务场景，覆盖多种工具调用和消息类型，无需手动聊天即可高效评估渲染及恢复性能。
需要测试大对话或任务列表的渲染性能
需要验证快照恢复或工具调用渲染能力
需要生成大量合成数据进行性能基准测试
npx skills add zai-org/ZCode --skill zcode-large-task-fixture -g -y
提供OpenTUI终端UI开发指南，涵盖核心API、音频、键位映射、React/Solid绑定、组件、布局及插件等功能的参考文档与快速路由。
构建终端用户界面
查询OpenTUI API文档
配置React或Solid绑定
实现键盘输入处理
npx skills add zai-org/ZCode --skill opentui -g -y
提供Vercel官方React与Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端渲染规范。用于指导代码编写、审查和重构，确保应用达到最佳性能标准。
编写或重构React组件
Next.js页面开发
前端性能瓶颈分析
Bundle体积优化
数据获取策略审查
npx skills add zai-org/ZCode --skill vercel-react-best-practices -g -y
通过Chrome DevTools Protocol自动化Electron桌面应用，支持连接、快照交互及多窗口管理。
automate Slack app
control VS Code
interact with Discord app
test this Electron app
connect to desktop app
npx skills add zai-org/ZCode --skill electron -g -y
指导在React中实现原生View Transition动画，涵盖页面切换、路由变化、共享元素及列表重排等场景。提供组件使用、样式选择及Next.js集成方案，旨在无需第三方库即可创建流畅的UI状态过渡效果。
用户希望添加页面或路由过渡动画
需要实现共享元素或列表重排动画
提及ViewTransition、startViewTransition或transition types
询问如何在React中不使用第三方库进行UI状态动画
npx skills add zai-org/ZCode --skill vercel-react-view-transitions -g -y
