# Ipollowork Plugin UI

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

- Repository: https://github.com/Devin-AXIS/iPolloWork (7348 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Devin-AXIS/iPolloWork --skill ipollowork-plugin-ui -g -a claude-code -y`
Codex: `npx skills add Devin-AXIS/iPolloWork --skill ipollowork-plugin-ui -g -a codex -y`
Cursor: `npx skills add Devin-AXIS/iPolloWork --skill ipollowork-plugin-ui -g -a cursor -y`
Gemini CLI: `npx skills add Devin-AXIS/iPolloWork --skill ipollowork-plugin-ui -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# iPolloWork 插件 UI

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

## 先确定运行环境

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

## 固定接入规则 · v1

实施插件前必须读取 [插件接入契约](references/plugin-contract.md) 的公共入口、构建/注入和版本章节，按以下边界选择：

- 宿主 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 版本协商，也不自动下载另一份组件库。

The rest: https://github.com/Devin-AXIS/iPolloWork/blob/HEAD/.codex/skills/ipollowork-plugin-ui/SKILL.md