Agent Skills
› iamcheyan/oc
iamcheyan/oc
GitHub用于在开发期间交互式运行、调试和验证 opencode V2 CLI/TUI 及服务，包括启动进程、使用 termctrl 交互测试、对比版本及查看日志。
Install All Skills
npx skills add iamcheyan/oc --all -g -y
Skills in Collection (24)
用于在开发期间交互式运行、调试和验证 opencode V2 CLI/TUI 及服务，包括启动进程、使用 termctrl 交互测试、对比版本及查看日志。
需要启动或重启 opencode V2 开发服务器时
使用 termctrl 进行 TUI 交互式调试或截图检查时
需要隔离调试会话或验证 V2 与旧版差异时
npx skills add iamcheyan/oc --skill opencode-dev -g -y
指导前端开发实现 RTL/LTR 双向布局，涵盖 CSS 逻辑属性、DOM 语义、混合文本处理及 Electron 窗口适配，并提供测试矩阵。
实现或审查 RTL/LTR 行为
编写支持双向布局的 CSS
处理混合方向文本
npx skills add iamcheyan/oc --skill rtl-aware-development -g -y
用于演示 opencode 本地 SKILL.md 的标准结构和最小化工作流，帮助用户理解技能定义格式及加载方式。
用户请求示例技能
询问 SKILL.md 结构
展示技能模板
npx skills add iamcheyan/oc --skill sample-skill -g -y
Git专家技能，提供原子提交架构、变基操作及历史考古功能。支持自动检测提交风格与语言，强制拆分多文件变更，依赖排序，并将测试与实现合并提交，确保代码库历史清晰规范。
用户请求创建或优化 Git 提交
用户请求重写 Git 历史或变基
用户需要查找代码变更引入的时间点
npx skills add iamcheyan/oc --skill git-master -g -y
管理Git Flow分支策略，强制执行合并前用户审批与验证检查（LSP、构建、测试），支持多种项目类型并提供标准化沟通模板。
需要合并代码到主分支
执行Git Flow工作流
请求合并审批
npx skills add iamcheyan/oc --skill git-workflow -g -y
用于创建和维护 Figma Code Connect 模板文件，将 Figma 组件映射到代码片段。支持解析 URL、发现未映射组件并生成 .figma.ts 文件，实现设计与代码的关联。
用户提及 Code Connect
需要创建或更新 .figma.ts/.figma.js 文件
请求进行设计到代码的转换
npx skills add iamcheyan/oc --skill figma-code-connect -g -y
用于在 Figma、FigJam 或 Slides 中创建新文件。通过解析用户计划与编辑器类型，调用 create_new_file 工具完成初始化，并处理 Slides 的空网格场景。
用户需要创建新的 Figma 设计文件
用户需要新建 FigJam 白板
用户需要生成 Slides 演示文稿
npx skills add iamcheyan/oc --skill figma-create-new-file -g -y
用于创建、更新和修复 Figma 生成式插件的开发技能。涵盖前置检查、脚手架生成、源码替换及 UI 配置，确保插件功能完整且安全。
用户要求创建 Figma 插件
用户要求修改或扩展现有 Figma 插件
npx skills add iamcheyan/oc --skill figma-generative-plugins -g -y
将 Figma 设计稿中的交互动画和过渡效果转化为生产可用的代码。通过解析 Figma URL 获取节点 ID，结合 design context 和 motion context 数据，生成适配目标框架的动画代码实现。
用户要求实现 Figma 设计中的动画或动效
提供包含动画节点的 Figma 链接
工具返回运动上下文数据
npx skills add iamcheyan/oc --skill figma-implement-motion -g -y
用于在Figma中创建和更新着色器效果或填充。涵盖通过MCP服务器进行账户库着色器创作，包括区分effect与fill类型、管理计划密钥、编写main.ts源码及调用API进行创建和迭代更新。
用户要求创建Figma着色器
用户要求修改或修复Figma着色器
npx skills add iamcheyan/oc --skill figma-shaders -g -y
提供 Figma FigJam 场景下使用 use_figma MCP 工具的专业上下文，指导如何正确调用 get_figjam 检查文件结构、处理节点 ID 及批量加载参考文档，避免与 Design 模式 API 混淆。
需要在 Figma FigJam 中进行界面操作或内容管理
调用 use_figma 工具处理 FigJam 相关文件时
npx skills add iamcheyan/oc --skill figma-use-figjam -g -y
用于在 Figma 插件中处理节点动画的技能，支持关键帧、样式、缓动和时长设置。需在用户拥有 metronome 功能标志时调用，否则立即停止。
需要为 Figma 节点添加或编辑动画
涉及关键帧、动画样式或时间线的操作
npx skills add iamcheyan/oc --skill figma-use-motion -g -y
提供 Figma Slides 插件 API 的特定上下文，指导代理使用 use_figma 工具创建或编辑演示文稿。涵盖模板选择、主题覆盖及节点定位等关键规则，确保设计一致性与操作正确性。
用户请求创建新的 Figma Slides 演示文稿
用户请求修改现有 Figma Slides 文件的设计或内容
npx skills add iamcheyan/oc --skill figma-use-slides -g -y
用于编写、审查或调试 Playwright E2E 测试，涵盖模拟服务器、Bun静态服务、测试隔离、CI性能优化及Windows环境下的竞态问题排查。
编写Playwright端到端测试
调试E2E测试失败或Flake
审查E2E测试代码
npx skills add iamcheyan/oc --skill app-e2e-tests -g -y
用于编写、调试和审查基于 Storybook 的 Playwright 组件测试。涵盖测试文件结构、挂载参数配置、共享服务状态及常见 CI 失败场景处理，确保前端组件测试的稳定性和正确性。
编写或修改 Storybook 组件测试
调试失败的组件测试
审查前端 UI 测试代码
npx skills add iamcheyan/oc --skill component-tests -g -y
指导使用 Effect v4 进行 TypeScript 开发，包括源码引用、API 使用规范、分层架构设计及测试模式。
涉及 Effect v4 API 的使用
编写基于 Effect 的 TypeScript 服务或工作流代码
配置 Effect 测试环境
npx skills add iamcheyan/oc --skill effect -g -y
指导 OpenTUI 测试的编写、修复与审查，涵盖渲染器状态处理、帧预算机制及常见超时问题的排查。
编写或审查 OpenTUI 组件测试
修复 TUI 测试中的超时或抖动问题
调试测试渲染器状态与输入模拟
npx skills add iamcheyan/oc --skill tui-tests -g -y
指导编写、审查和优化基于 bun test 的单元测试，解决 Windows CI 超时、测试缓慢及不稳定问题，涵盖时间控制、进程开销管理及特定包配置。
编写或修复 bun test 单元测试
解决 Windows CI 上的测试超时或失败
优化缓慢或不稳定的测试用例
npx skills add iamcheyan/oc --skill unit-tests -g -y
指导智能体将 Figma 设计稿转换为代码，涵盖获取上下文、截图校验及组件复用等规范。
实现 Figma 设计
构建屏幕界面
将设计转为代码
npx skills add iamcheyan/oc --skill figma-design-to-code -g -y
将应用页面、视图或多段布局从代码或描述转换为 Figma 可编辑的设计稿。通过复用设计系统组件和变量，增量组装屏幕、模态框等视图，确保输出为语义化层级而非静态图片。
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工具前加载此技能，确保生成高质量FigJam图。涵盖支持类型判断、路由选择及Mermaid语法约束，避免渲染失败。
用户请求创建或生成流程图、架构图、时序图等图表
提及Mermaid语法或需要可视化系统架构、数据模型等
npx skills add iamcheyan/oc --skill figma-generate-diagram -g -y
基于代码库在Figma中构建或更新专业级设计系统，包括变量、组件库、主题及文档，确保设计与代码一致。
创建Figma设计令牌或变量
构建组件库或单个组件
设置主题模式
协调代码与Figma的差异
npx skills add iamcheyan/oc --skill figma-generate-library -g -y
实现 Figma 设计与 SwiftUI 代码的双向转换。支持将设计稿转为 iOS 代码，或将 SwiftUI 视图同步回 Figma。通过解析 URL 和文件上下文，利用专用工具获取设计上下文并遵循 iOS 规范进行映射。
用户提及 Swift、SwiftUI、iOS、iPhone 或 iPad
要求将 Figma 设计转换为 SwiftUI 代码
要求将 SwiftUI 视图推送到 Figma
出现 Figma URL 且伴随 .swift 文件或 .xcodeproj
npx skills add iamcheyan/oc --skill figma-swiftui -g -y
用于通过Figma Plugin API执行JavaScript，支持节点增删改、变量绑定及组件构建等读写操作。
用户请求在Figma中创建或编辑节点
需要设置变量或Token
构建组件和变体
修改自动布局或填充
以编程方式检查文件结构
npx skills add iamcheyan/oc --skill figma-use -g -y
