Agent Skills
› iamcheyan/oc
iamcheyan/oc
GitHub用于在 opencode 仓库开发期间，交互式运行、调试和验证 CLI/TUI 及服务器的工作流。涵盖启动服务、使用 termctrl 进行交互检查、日志分析及 Bun 调试器接入等场景。
Install All Skills
npx skills add iamcheyan/oc --all -g -y
Skills in Collection (24)
用于在 opencode 仓库开发期间，交互式运行、调试和验证 CLI/TUI 及服务器的工作流。涵盖启动服务、使用 termctrl 进行交互检查、日志分析及 Bun 调试器接入等场景。
需要启动或重启 opencode 开发环境的服务端或 TUI
正在调试 opencode 自身的 CLI 或 TUI 功能
需要查看 opencode 运行日志以排查问题
需要使用 Bun inspector 对 opencode 代码进行调试
npx skills add iamcheyan/oc --skill opencode-dev -g -y
提供 RTL/LTR 双向布局开发指南，涵盖 CSS 逻辑属性、DOM 语义、混合文本处理及 Electron 适配。用于确保应用在不同语言方向下的正确显示与交互行为。
实现或审查 RTL/LTR 行为
处理混合方向文本
调整 Electron 标题栏
npx skills add iamcheyan/oc --skill rtl-aware-development -g -y
提供SKILL.md的结构模板和最小化工作流示例，用于指导用户如何定义项目级技能。
请求技能模板
询问SKILL.md结构
npx skills add iamcheyan/oc --skill sample-skill -g -y
Git专家技能，涵盖提交架构、变基操作和历史考古。支持原子提交拆分、风格检测与依赖排序、冲突解决及变更追踪，确保代码历史清晰规范。
git commit
git rebase
git blame
git bisect
squash commits
npx skills add iamcheyan/oc --skill git-master -g -y
管理Git Flow分支策略，强制合并前用户审批与验证。支持多项目类型，提供标准化流程、检查模板及沟通话术，确保代码质量与发布安全。
需要创建或合并Git分支
执行代码合并操作前
询问分支工作流规范
npx skills add iamcheyan/oc --skill git-workflow -g -y
根据Figma链接生成Code Connect模板文件(.figma.ts)，将设计组件映射为代码片段，实现设计与代码的自动关联。
用户提到 Code Connect
需要创建 Figma 组件到代码的映射
请求生成 .figma.ts 或 .figma.js 文件
npx skills add iamcheyan/oc --skill figma-code-connect -g -y
指导用户通过MCP工具在Figma中创建设计、FigJam或Slides文件，处理计划选择与参数配置。
用户请求创建新的Figma设计文件
用户请求创建新的FigJam文件
用户请求创建新的Slides文件
npx skills add iamcheyan/oc --skill figma-create-new-file -g -y
指导创建和更新生成式 Figma 插件，涵盖预检、创建及更新工作流，强调安全规范与 UI/代码重构要求。
创建 Figma 插件
修改 Figma 插件
修复 Figma 插件
npx skills add iamcheyan/oc --skill figma-generative-plugins -g -y
将 Figma 设计中的动画和过渡效果转换为生产可用的代码（如 CSS keyframes 或 motion.dev），通过结合设计上下文与运动数据实现精确的 UI 动效落地。
用户要求实现 Figma 中的动画
提供包含动画节点的 Figma URL
获取到运动上下文数据
npx skills add iamcheyan/oc --skill figma-implement-motion -g -y
指导在Figma中通过MCP服务器创建和更新着色器（Shader），涵盖Effect与Fill类型的编写、元数据配置及工作流，适用于UI特效开发。
用户请求创建或修改Figma着色器效果
需要生成程序化纹理或后处理滤镜
npx skills add iamcheyan/oc --skill figma-shaders -g -y
提供Figma FigJam插件API的专用上下文，指导Agent使用use_figma工具进行协作白板操作。涵盖节点检查、页面创建限制及工具调用优化策略，确保在FigJam环境下正确执行任务。
需要操作Figma FigJam协作白板
查询或修改FigJam文件中的节点内容
npx skills add iamcheyan/oc --skill figma-use-figjam -g -y
提供Figma插件API中节点动画（关键帧、样式、时间轴）的操作指南，含特性开关检查与API接口说明，用于辅助实现Figma界面动态效果。
为Figma节点添加或编辑关键帧动画
调整节点填充/描边颜色的随时间变化
应用或移除Figma动画样式
设置或读取时间轴持续时间
npx skills add iamcheyan/oc --skill figma-use-motion -g -y
提供Figma Slides插件API的专用上下文，指导Agent使用use_figma工具创建或编辑幻灯片。包含选择构建策略（vs generate_deck）及关键规则，如主题覆盖和节点添加顺序，确保设计一致性和操作正确性。
用户请求使用Figma创建或编辑Google Slides演示文稿
需要调用use_figma工具处理Slides特定任务
npx skills add iamcheyan/oc --skill figma-use-slides -g -y
指导编写、审查和调试 Playwright E2E 测试，涵盖 Mock 服务器配置、页面隔离、Windows 时序竞态及 CI 失败诊断。
编写或修改 E2E 测试用例
调试测试不稳定或失败问题
审查 E2E 测试代码规范
npx skills add iamcheyan/oc --skill app-e2e-tests -g -y
用于编写、调试和审查基于 Storybook 的 Playwright 组件测试。涵盖测试规范、Fixture、Story 及共享配置，解决 CI 中的稳定性问题如竞态条件和上下文销毁。
编写或修改组件测试代码
调试失败的组件测试
审查 Storybook 相关测试
npx skills add iamcheyan/oc --skill component-tests -g -y
指导在代码库中使用 Effect v4 进行 TypeScript 开发，涵盖 API 引用、编码规范及测试模式。
使用 Effect 编写服务或工作流
涉及 Effect Schema 和错误处理
编写 Effect 相关单元测试
npx skills add iamcheyan/oc --skill effect -g -y
指导 OpenTUI 终端界面测试的编写、修复与审查。涵盖渲染器初始化、帧等待策略（如 waitForFrame）、时钟注入、模拟输入及处理测试超时和抖动问题，确保 TUI 组件测试的稳定性和准确性。
编写或修复涉及 OpenTUI 渲染的测试用例
审查 TUI 组件的测试代码
解决 TUI 测试中的超时或帧等待失败错误
npx skills add iamcheyan/oc --skill tui-tests -g -y
用于编写、审查或修复基于 bun test 的单元测试，解决 Windows CI 超时、测试缓慢及不稳定问题。涵盖时间控制、进程生成优化、超时配置及平台差异处理，确保测试快速可靠。
编写或修复 bun test 单元测试
解决 Windows CI 上的测试超时或失败
优化缓慢或不稳定的测试用例
调整 turbo.json 中的测试任务配置
npx skills add iamcheyan/oc --skill unit-tests -g -y
指导 Agent 将 Figma 设计稿转化为代码，规范调用 get_design_context 获取上下文及截图，确保高保真还原布局、交互、组件复用及静态资源。
用户要求实现 Figma 设计
从 Figma 构建界面
将设计转为代码
npx skills add iamcheyan/oc --skill figma-design-to-code -g -y
用于将代码或描述转化为Figma中的完整页面、模态框等多部分视图。通过复用设计系统组件和变量，实现从代码到可编辑UI层的语义化重建，确保输出符合设计规范且非硬编码。
write to Figma
create in Figma from code
push page to Figma
take this app/page and build it in Figma
create a screen
build a landing page in Figma
update the Figma screen to match code
convert this modal/dialog/drawer/panel to Figma
npx skills add iamcheyan/oc --skill figma-generate-design -g -y
指导Agent在调用generate_diagram工具前加载，支持流程图、架构图等Mermaid图表生成。提供类型路由、约束及不支持类型的处理指引，确保输出质量。
用户请求创建或生成各类图表（如流程图、架构图、时序图等）
用户提及Mermaid语法或需要在FigJam中可视化系统结构
npx skills add iamcheyan/oc --skill figma-generate-diagram -g -y
用于从代码库构建或更新Figma设计系统，包括变量、组件库、主题及文档。指导构建顺序与规范，需配合figma-use技能使用。
创建Figma设计令牌或变量
构建组件库或单个组件
设置主题（如深色模式）
代码与设计稿差异核对
npx skills add iamcheyan/oc --skill figma-generate-library -g -y
实现 Figma 设计与 SwiftUI/iOS 代码的双向转换，涵盖设计转代码及代码同步回设计场景。
提及 Swift、SwiftUI、iOS、iPhone、iPad
Figma 设计转 SwiftUI 代码
SwiftUI 视图同步至 Figma
npx skills add iamcheyan/oc --skill figma-swiftui -g -y
Figma插件API执行技能，用于在Figma文件中运行JS以操作节点、组件及设计系统。
用户需通过代码修改Figma文件结构或样式
用户需编程式创建或编辑Figma组件与变量
npx skills add iamcheyan/oc --skill figma-use -g -y
