rogie

Guides FigUI3 core (`fig.js` / `fig.css`) web components for Figma-style plugin UIs, including React JSX usage. Use when adding, using, or debugging fig-* elements from the core bundle—buttons, fields, overlays, menus, toolbelts, sliders, color/fill inputs,…

Guides FigUI3 core (`fig.js` / `fig.css`) web components for Figma-style plugin UIs, including React JSX usage. Use when adding, using, or debugging fig-* elements from the core bundle—buttons, fields, overlays, menus, toolbelts, sliders, color/fill inputs,…

Guides FigUI3 experimental Lab components: fig-canvas-control, fig-input-wheel, and AI composer components, including React JSX usage. APIs are unstable.

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,…

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,…

Publish a FigUI3 release to GitHub and npm when the user explicitly asks to publish or release the package. Handles versioning, changelog, verification, generated dist files, commit, push, and npm publication.

Guides Figma-style property panel composition using fig-field rows and FigUI3 controls, including React JSX.

Guides CSS rendering and layout performance tests for component UIs. Use when checking selector cost, layout thrash, paint work, animation smoothness, CSS containment, computed styles, or visual regressions caused by CSS changes.

Update @rogieking/figui3 to the latest version, rebuild the Vite cache, review FigUI3 and ToolKit changes for breaking or new component APIs, and apply needed app integrations. Use when the user runs /update or asks to pull the latest figui3, refresh figui3,…

Prefer FigUI3 component styling over custom CSS. Use whenever adding or editing CSS, class names, stylesheets, visual appearance, layout polish, or fig-* / toolkit-* UI. Agents must ask before adding custom styling for FigUI3 components.

Guides React integration with web components, including fig-* and toolkit-* elements. Use whenever creating, editing, reviewing, or debugging JSX that contains custom elements or web-component APIs.

Defines Figma shader spatial-property schemas for draggable canvas handles. Use whenever a shader exposes a center, origin, focal point, radius, angle, line, gradient axis, light position, or positioned color.

Publish verified project changes to GitHub and complete the corresponding Cloudflare Pages and Supabase deployments. Use when the user runs /publish or asks to publish this app.

Author, update, and validate Figma shader effects and shader fills. Use when coding Figma shaders, shader effects, shader fills, WGSL for Figma, or when working with figma shader build/overwrite-using-recipe workflows.

Guide WebGPU application, compute, render pipeline, buffer, texture, bind group, command encoding, and GPU performance work. Use when writing or debugging WebGPU code, GPU pipelines, WGSL bindings from JavaScript or TypeScript, shader resource layouts,…

Guide WGSL shader authoring, debugging, validation, resource bindings, uniform/storage layout, compute and fragment shader logic, and shader performance. Use when writing or fixing WGSL code, WebGPU shaders, Figma shaders, compute kernels, render shaders, or…

Builds, verifies, and deploys rog.ie with the latest FigUI3, PropsKit, Lab, and editor playground assets. Use when the user invokes /publish or asks to publish this site.