PropKit

SkillMedia

Guides Figma-style property panel composition using fig-field rows and FigUI3 controls, including React JSX. Use when building labeled property panels or choosing between raw fig-* rows and propskit-* wrappers (fig-lab).

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the PropKit skill

What this skill tells your AI

The instructions your AI receives, as published by rogie/figui3 in skills/propkit/SKILL.md and read by ahel’s review.

Compose property panels from horizontal fig-field rows and core fig-* controls.

Core tags: figui3 skill + ../figui3/components.md. React: ../figui3/react.md. Select/fill picker: fig-editor.

Principles

  1. Default to horizontal fig-field rows.
  2. Use one concise label per control.
  3. Put control attributes on the control, not the field.
  4. Use full when the control should stretch.
  5. Wire input for live updates and change for commits.
<fig-field direction="horizontal">
  <label>Opacity</label>
  <fig-slider value="100" min="0" max="100" units="%" text="true" full />
</fig-field>

Signals

GitHub stars
66
Forks
1
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
propkit
Source
github.com/rogie/figui3