AIUI Development
Build AIUI agents from the current contracts in this skill. Do not assume an API, component, CSS property, browser behavior, or lifecycle merely because it exists on the Web or in WeChat Mini Programs.
Load Only What the Task Needs
- Read framework.md for project structure,
app.json, Page, Widget, Agent Worker, SFC, modules, resources, packaging, or TypeScript.
- Read events.md for lifecycle, interaction, key, focus, voice wakeup, head gesture, and environment-awareness events.
- Read components.md before using or reviewing built-in components and their attributes or events.
- Read wxss.md before writing styles, layout, selectors, animation, or custom fonts.
- Read monochrome-green.md only for the monochrome-green Rokid Glasses visual language.
- Read APIs index, then its matching domain file, before using runtime APIs.
- Read and apply delivery checklist before declaring a generated or modified AIUI agent complete.
- Start from the matching scaffold when useful: minimal Page, minimal Widget, or minimal Agent Worker.
Do not load every reference for a narrow task. For example, a Bluetooth Agent Worker normally needs framework.md, events.md, apis/index.md, and apis/device.md, but not Canvas or the full component catalog.
Core Authoring Rules
- Register App, Page, Widget, Component, and Agent Worker logic with
export default { ... }; do not use App(), Page(), Widget(), or similar registration functions.
- Use either a multi-file Page or a single
.ink Page for one route, never both.
- A
.ink Page uses <script def>, <script setup>, <page>, and <style>. A Widget replaces <page> with <widget>.
- Declare every Page, Widget, Agent Worker, and custom component in the appropriate configuration before using it.
- Treat Widget
family as a size category. Use relative layout and never hardcode the root to the current Glasses pixel size.
- Use
agentWorkers, not the removed workers field. Extend asynchronous onOpen work synchronously with event.waitUntil(promise).
- Use data binding for rendered state and
this.setData() to update it.
- Resolve packaged resources from project paths; do not invent filesystem or network access that the target does not expose.
- Treat conversation-flow cards as display-only unless the task explicitly targets an interactive full-screen Page or Widget.
Target and Design Choice
Before styling, determine the intended surface:
- Conversation-flow card: compact, display-only information.
- Full-screen Page: interactive agent UI.
- Widget: compact
1x1 or 1x2 surface with Widget lifecycle.
- Monochrome-green Rokid Glasses: apply
design/monochrome-green.md after the general WXSS rules.
- Other displays: use theme tokens and task requirements; do not automatically apply the monochrome-green visual language.
Runtime API Workflow
- Open references/apis/index.md and select the domain.
- Confirm the exact constructor or method, parameters, return type, events, errors, permissions, and lifecycle in that domain reference.
- If the API is absent or the requested overload is not documented, inspect current Ink types or implementation rather than guessing.
- Keep capability checks and cleanup close to the code that acquires the resource.
Completion Checks
Run the AIUI agent delivery checklist. Report which executable checks ran, what they proved, and any target-device behavior that remains unverified. Do not call an agent runnable only because its files look structurally correct.
1---2name: aiui-dev3description: Develop and debug AIUI agents, Pages, Widgets, Agent Workers, built-in components, WXSS, and runtime APIs. Use when generating or reviewing AIUI .ink, app.json, page logic, UI, or API integrations.4---56# AIUI Development78Build AIUI agents from the current contracts in this skill. Do not assume an API, component, CSS property, browser behavior, or lifecycle merely because it exists on the Web or in WeChat Mini Programs.910## Load Only What the Task Needs1112- Read [framework.md](./references/framework.md) for project structure, `app.json`, Page, Widget, Agent Worker, SFC, modules, resources, packaging, or TypeScript.13- Read [events.md](./references/events.md) for lifecycle, interaction, key, focus, voice wakeup, head gesture, and environment-awareness events.14- Read [components.md](./references/components.md) before using or reviewing built-in components and their attributes or events.15- Read [wxss.md](./references/wxss.md) before writing styles, layout, selectors, animation, or custom fonts.16- Read [monochrome-green.md](./references/design/monochrome-green.md) only for the monochrome-green Rokid Glasses visual language.17- Read [APIs index](./references/apis/index.md), then its matching domain file, before using runtime APIs.18- Read and apply [delivery checklist](./references/checklist.md) before declaring a generated or modified AIUI agent complete.19- Start from the matching scaffold when useful: [minimal Page](./assets/minimal-page.ink), [minimal Widget](./assets/minimal-widget.ink), or [minimal Agent Worker](./assets/minimal-agent-worker.js).2021Do not load every reference for a narrow task. For example, a Bluetooth Agent Worker normally needs `framework.md`, `events.md`, `apis/index.md`, and `apis/device.md`, but not Canvas or the full component catalog.2223## Core Authoring Rules2425- Register App, Page, Widget, Component, and Agent Worker logic with `export default { ... }`; do not use `App()`, `Page()`, `Widget()`, or similar registration functions.26- Use either a multi-file Page or a single `.ink` Page for one route, never both.27- A `.ink` Page uses `<script def>`, `<script setup>`, `<page>`, and `<style>`. A Widget replaces `<page>` with `<widget>`.28- Declare every Page, Widget, Agent Worker, and custom component in the appropriate configuration before using it.29- Treat Widget `family` as a size category. Use relative layout and never hardcode the root to the current Glasses pixel size.30- Use `agentWorkers`, not the removed `workers` field. Extend asynchronous `onOpen` work synchronously with `event.waitUntil(promise)`.31- Use data binding for rendered state and `this.setData()` to update it.32- Resolve packaged resources from project paths; do not invent filesystem or network access that the target does not expose.33- Treat conversation-flow cards as display-only unless the task explicitly targets an interactive full-screen Page or Widget.3435## Target and Design Choice3637Before styling, determine the intended surface:3839- Conversation-flow card: compact, display-only information.40- Full-screen Page: interactive agent UI.41- Widget: compact `1x1` or `1x2` surface with Widget lifecycle.42- Monochrome-green Rokid Glasses: apply `design/monochrome-green.md` after the general WXSS rules.43- Other displays: use theme tokens and task requirements; do not automatically apply the monochrome-green visual language.4445## Runtime API Workflow46471. Open [references/apis/index.md](./references/apis/index.md) and select the domain.482. Confirm the exact constructor or method, parameters, return type, events, errors, permissions, and lifecycle in that domain reference.493. If the API is absent or the requested overload is not documented, inspect current Ink types or implementation rather than guessing.504. Keep capability checks and cleanup close to the code that acquires the resource.5152## Completion Checks5354Run the [AIUI agent delivery checklist](./references/checklist.md). Report which executable checks ran, what they proved, and any target-device behavior that remains unverified. Do not call an agent runnable only because its files look structurally correct.