Build a local XOPC app

Use this skill inside a Project created for a Local App. Treat APP_BRIEF.md, .xopc/app.json, and
xopc.extension.json as the app contract. Convert the user's latest request into a small observable UI
change, preserve working behaviour, and leave the draft previewable after every iteration.

Required workflow

1. Read APP_BRIEF.md, .xopc/app.json, .xopc/acceptance.json, xopc.extension.json, and the
   current ui/ implementation.
2. Restate the requested behaviour as observable acceptance checks. Add or update a declarative
   scenario in .xopc/acceptance.json for each critical journey changed by the request.
3. Edit the smallest coherent set of files. Phase 1 apps are UI-only; do not add backend routes,
   shell execution, network access, or undeclared permissions. Never edit the manifest main field
   or .xopc/runtime/local-ui.js; xopc owns that trusted gateway runtime entry.
4. Keep the extension id, page path, and UI entrypoint stable. Do not rename them during an
   iteration.
5. Run node "$XOPC_LOCAL_APP_SKILL_DIR/scripts/validate-local-app.mjs" . when that environment
   variable is available. Otherwise validate the same contract directly.
6. Report what changed, what was verified, and whether the draft is ready for the user to install.

Interface constraints

• Use semantic HTML, keyboard-accessible controls, visible focus states, and aria-live for async
  feedback.
• Support light and dark color schemes without assuming access to the host DOM.
• Keep scripts and styles local. The preview CSP blocks network access and inline scripts.
• Use browser storage only for user-owned local preferences or app data.
• Ask before expanding permissions. A permission change must be visible in the install review.
• Mark scenario targets with stable data-xopc-test-id values. Never encode CSS selectors or
  executable JavaScript in acceptance scenarios.

For the exact Phase 1 file contract and completion checklist, read references/app-contract.md.