Individual skill
design-editor-architecture
Where design editor behavior lives and how the editor component is split across `DesignEditor.tsx`, the `use-editor-*` hooks, and the view render functions. Use before changing any editor behavior — undo/redo, paste, delete, duplicate, style commit, layer move/rename, export, structure change — or before editing `app/pages/DesignEditor.tsx` or a `use-editor-*` hook.
templates/design/.agents/skills/design-editor-architecture/SKILL.md
Source commit ff01b4009091c2140edb34d6f790ec64e7823356
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 2, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 7,644
- Repository last updated
- Nov 7, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agents Repository topic
- ai Repository topic
- react Repository topic
- agent-native Repository topic
- typescript Repository topic
- agent-framework Repository topic
- agentic-ai Repository topic
- ai-agents Repository topic
- framework Repository topic
- generative-ui Repository topic
- engineering Derived category
- design Derived category
- writing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
Read excerpt
# Design Editor Architecture
## The routing rule
Editor **behavior** lives in `app/pages/design-editor/`, not in the editor
component.
The component is split three ways. `app/pages/DesignEditor.tsx` is a short
shell that calls 21 `useEditor*` hooks in a fixed order and returns
`renderDesignEditorView(...)`. The hooks (`design-editor/domains/use-editor-*.ts`)
hold the state declarations, effects, and the `useCallback` wrappers that
gather arguments. `design-editor/design-editor-view.tsx` lays out the page and
calls the render functions in `design-editor/view/` (menus, sidebars, canvas
area, inspector, dialogs). Every wrapper delegates to a `run<Name>()` command