fig-editor
Guides FigUI3 editor bundle (`fig-editor.js` / `fig-editor.css`): fig-select, fig-select-options, fig-select-option, fig-fill-picker, fig-palette-editor, fig-reorder, and fig-interpolation-swatch, including React JSX usage. Use when building custom selects, grouped option lists, sticky separators, ghost selects, fill picker dialogs, reorderable lists, or interpolation swatches. Requires fig.js.
Informações da origem
- Repositório
- rogie/figui3
- Última atividade na origem
- 19 de outubro de 2026 às 22:18
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 70
- Forks
- 1
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Explorador de arquivos
3 arquivosExibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- fig-editor
- description
- Guides FigUI3 editor bundle (`fig-editor.js` / `fig-editor.css`): fig-select, fig-select-options, fig-select-option, fig-fill-picker, fig-palette-editor, fig-reorder, and fig-interpolation-swatch, including React JSX usage. Use when building custom selects, grouped option lists, sticky separators, ghost selects, fill picker dialogs, reorderable lists, or interpolation swatches. Requires fig.js.
- user-invocable
- false
# FigUI3 editor (`fig-editor.js`)
Custom select and full fill-picker. Not in core `fig.js`.
React: [../figui3/react.md](../figui3/react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md).
## Install
```js
import "@rogieking/figui3/fig.css";
import "@rogieking/figui3/fig.js";
import "@rogieking/figui3/fig-editor.css";
import "@rogieking/figui3/fig-editor.js";
```
`fig-editor.js` imports `fig.js`. Still import `fig-editor.css`.
Registered tags:
| Tag | Role |
|---|---|
| `fig-select` | Trigger + popup listbox (`subtle` applies to all options) |
| `fig-select-options` | Scrollable panel (`slot="panel"`), overflow chevrons |
| `fig-select-option` | Option (`value`, `label`, `selected`, `disabled`, `subtle`) |
| `fig-fill-picker` | Full fill editor dialog (solid, gradient, image, video, webcam, custom modes) |
| `fig-palette-editor` | Ordered palette editor |
| `fig-reorder` | Pointer- and keyboard-reorderable direct-child list |
| `fig-interpolation-swatch` | Gradient interpolation preview swatch |
- `fig-dropdown` (core): native `<select>`.
- `fig-select` (this skill): custom listbox. Use this for Figma-style menus.
Author options as React children, or pass `options`. Set `menu-anchor` to a selector or assign an element to `menuAnchor` when the menu should align against another element. Do not `stopPropagation` on option click. `optionhover` and `optionfocus` are native preview listeners.
## Fill picker
Core `fig-input-color` / `fig-input-fill` auto-open the picker when registered. Custom modes: `slot="mode-<name>"` on `fig-input-fill`, or React `modeready` → mount into `e.detail.container` (do not reparent).
Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chrome with `picker-*`.
## Maintainer notes
- Implementation: `fig-editor.js`, styles: `fig-editor.css`
- Do not move fill-picker or select into `fig.js`
- Nested overlay positioning: keep `popover="manual"` on the select popup
- Tests: `tests/figui/component-contracts.spec.ts` (ghost variant, sticky separator vs overflow-start)
Ver no GitHub