uniform-editor-experience-review
Installation
SKILL.md
Editor experience review for Uniform Canvas
Review how a project's components behave while authors edit them in Canvas, report what gets in their way, let the user choose what to fix, and apply the fixes. Canvas renders the real page in an iframe, so whatever the page hides cannot be selected on the page: an empty button, a closed panel, an inactive slide, an empty slot with no height.
The preview routes, resolveComponent and the component APIs are in the
uniform-nextjs-app-router and uniform-nextjs-page-router skills, if they are installed.
Editor signals
| Need | App Router (@uniformdev/next-app-router) |
Page Router (@uniformdev/canvas-react) |
|---|---|---|
In Canvas, Edit or Preview tab. Gate reachability on it: dropping inert and pointer-events: none |
context.isContextualEditing |
useUniformContextualEditingState().isContextualEditing |
| Edit tab only. Gate anything that changes the look on it: placeholders, forced-open panels, stopped motion, editor-only controls | context.pageState.previewMode === "editor" |
useUniformContextualEditingState().previewMode === "editor" |
| Selected component | Channel hook | useUniformContextualEditingState({ global: true }).selectedComponentReference |
| Empty-slot placeholder | resolveEmptyPlaceholder on <UniformComposition> and <UniformPlayground> |
emptyPlaceholder on each <UniformSlot> |
| Default text placeholder | placeholder on each UniformText |
contextualEditingDefaultPlaceholder on <UniformComposition> and <UniformPlayground> |