Skills

Ipollowork Plugin UI

为 iPolloWork 新插件或插件工作区复用 UI 组件、颜色、字体及交互规范。按 Figma 成熟状态和代码清单优先采用已确认组件,区分宿主 React 与独立...

Install

npx skills add Devin-AXIS/iPolloWork --skill ipollowork-plugin-ui -g -a claude-code -y
Repository
Devin-AXIS/iPolloWork7.3k
Category
Design
Updated
3d ago
License
See repository
Context cost
Mediumabout 1,764 tokens
Runs scripts
No, instructions only

What it does

为 iPolloWork 新插件或插件工作区复用 UI 组件、颜色、字体及交互规范。按 Figma 成熟状态和代码清单优先采用已确认组件,区分宿主 React 与独立 HTML/iframe 的接入方式;适用于插件表单、导航、浮层、反馈、状态和进度设计及实现,不改变用户作品的视觉风格。

iPolloWork 插件 UI

从用户要完成的操作选择组件。默认采用“已实现与推荐使用”,保持明确的当前值、反馈位置、恢复动作和键盘焦点。

先确定运行环境

  • 宿主 React 页面:从 apps/app/src/components/ui 导入基础控件;@/ 是主应用别名。业务组合参考现有调用,不把领域内部组件作为插件公开 API。
  • 独立 HTML / iframe / 独立构建的 React 插件:读取 插件接入契约。主应用别名和 CSS 不会自动进入 iframe;采用现有插件的桥接方式与相同交互语义。独立 React 构建也不能假定能导入宿主组件。
  • 共享实现位于已有 @ipollowork/ui 包。@ipollowork/ui/core 为基础组件公共汇总入口,具体模块及 Figma 对照读取 组件映射。iframe 从运行时对象取得相同具名组件,通过 React 岛接入;只有 Button/Input/Textarea 支持原生 HTML 标记适配。

固定接入规则 · v1

实施插件前必须读取 插件接入契约 的公共入口、构建/注入和版本章节,按以下边界选择:

  • 宿主 React 使用原有 @/components/ui/* 入口;共享包控件入口为 @ipollowork/ui/controls。
  • iframe 插件只从 @ipollowork/ui/runtime-contract 导入 requireRuntime(1);实际 React/控件从返回的运行时对象取得。不要从 plugin-runtime 或宿主私有路径导入实现,也不要给生产插件再打包 React。
  • 开发构建显式选择 buildPluginRuntime('bundled'),将运行时放在业务脚本之前;生产包不包含运行时,保留契约中的固定 meta 标记,由宿主注入。不能仅凭 NODE_ENV 推断加载方式。
  • 当前运行时版本为 1.8.0。使用本轮颜色与字体规范时调用 requireRuntime(1, required, 3),第三参数检查最低 minor;使用公共 Icon 时调用 requireRuntime(1, ['Button', 'Icon'], 4),尺寸 S/M/L 为14/16/20px,Button 前后图标直接作为 children 组合,纯图标按钮必须有 aria-label。required 列出实际使用的全部函数导出(包括子组件)。共享 Badge 的 info/success/warning 语义变体和前置图标组合要求 requireRuntime(1, ['Badge', 'Icon'], 5)。SearchField、NumberField、Slider、Calendar、DatePicker / TimeInput、FileUpload / FileUploadItem 要求 requireRuntime(1, required, 6);日期使用本地年月日,上传状态由业务调用方提供,不伪造进度或取消能力。表格组合 TableSortHead / TablePagination / TablePageSelection / TableBulkActions 要求 requireRuntime(1, required, 7)。排序、过滤、分页与稳定ID选择由调用方管理;表头只选当前页,翻页保留选择,改变筛选清空选择;批量确认与部分失败恢复必须由实际业务处理。资源卡 Card variant="resource"、CardIcon、CardMeta 和 CardTitle as="h3" 要求 requireRuntime(1, required, 8);既有 default/outline Card 行为不变。旧版本或缺组件时停止初始化并提示更新客户端。不支持完整 semver 范围、最低 patch 或 manifest UI 版本协商,也不自动下载另一份组件库。
Read the whole SKILL.md on GitHub

More in Design