Menu
Workflow for creating a new UI component in @jsenv/navi. Use when implementing a new frontend component from scratch.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
How to run and verify the `*_demo.html` files scattered across packages (e.g. packages/frontend/navi/src/control/demos/). Use when the user explicitly asks to load a demo in a browser / Playwright to check it works — not proactively (see .agents/instructions.md's "never verify on your own initiative" constraint).
How to write and run tests in @jsenv/core. Use when adding, running, or understanding tests in any package of this monorepo.
| name | new-component |
| description | Workflow for creating a new UI component in @jsenv/navi. Use when implementing a new frontend component from scratch. |
New components in @jsenv/navi follow a consistent pattern: start simple, layer in action support, then add accessibility.
renderActionableComponent pattern to wire up data fetchingInput component with type-specific behaviorField wrapper for labels, validation, constraintsuseActionBoundToFormParams for form integration@jsenv/validation<a> tags with action execution for linksDetails component for collapsible content with nav state persistenceAdd a @type {import("preact").FunctionComponent<{ ... }>} JSDoc block above every exported component so VSCode can autocomplete props.