await-widget

Category: Development & Coding | Uploader: await-widget | Downloads: 0 | Version: v1.0（Latest）

Create or modify Await widgets in TSX using the custom SwiftUI-style DSL, native bridge APIs, modifiers, timelines, intents, and @panel controls. Use when the user asks to build, edit, or scaffold an Await widget.

Changelog: Source: GitHub https://github.com/await-widget/skills

Directory Structure

Current level: tree/main/await-widget/

📁 docs-source/
- 📁 guides/
  - 📄 bridge-apis.md 1.5 KB
  - 📄 create-a-widget.md 1.3 KB
  - 📄 intents.md 1.1 KB
  - 📄 modify-a-widget.md 1.1 KB
  - 📄 panels.md 1.2 KB
  - 📄 runtime-model.md 1.3 KB
  - 📄 timeline.md 1.0 KB
- 📁 prompts/
  - 📄 cookbook.md 1.7 KB
- 📄 index.md 2.8 KB
- 📄 README.md 910 B
📁 examples/
- 📁 Alarm/
  - 📄 index.tsx 1.8 KB
- 📁 App Shortcuts/
  - 📄 index.tsx 4.0 KB
- 📁 Book/
  - 📄 index.tsx 4.8 KB
  - 📄 sample.txt 834 B
- 📁 Calendar/
  - 📄 index.tsx 2.5 KB
- 📁 Clock Analog/
  - 📄 index.tsx 2.3 KB
- 📁 Clock Flip/
  - 📄 index.tsx 3.4 KB
- 📁 Clock Text/
  - 📄 index.tsx 2.0 KB
- 📁 Drum/
  - 📄 index.tsx 1.7 KB
- 📁 Fanfou/
  - 📄 index.tsx 2.9 KB
- 📁 Game 2048/
  - 📄 index.tsx 16.7 KB
- 📁 Gif/
  - 📄 index.tsx 585 B
- 📁 GitHub Calendar/
  - 📄 index.tsx 9.4 KB
- 📁 Health/
  - 📄 index.tsx 2.3 KB
- 📁 Link/
  - 📄 index.tsx 349 B
- 📁 Location/
  - 📄 index.tsx 2.0 KB
- 📁 Music/
  - 📄 index.tsx 2.0 KB
- 📁 Music Player/
  - 📄 index.tsx 7.3 KB
- 📁 MyWidget/
  - 📄 index.tsx 1.3 KB
- 📁 Panels/
  - 📄 index.tsx 1.2 KB
- 📁 Piano/
  - 📁 assets/
    
    📄 add.svg 229 B
    
    📄 fall.svg 280 B
    
    📄 left.svg 256 B
    
    📄 lift.svg 280 B
    
    📄 minus.svg 170 B
    
    📄 right.svg 256 B
  - 📄 constants.tsx 2.0 KB
  - 📄 index.tsx 7.2 KB
- 📁 Reminder/
  - 📄 index.tsx 2.3 KB
- 📁 Simple Icons/
  - 📄 index.tsx 554 B
  - 📄 simple-icons.json 440.7 KB
- 📁 Weather/
  - 📄 index.tsx 2.3 KB
- 📄 package.json 177 B
- 📄 tsconfig.json 118 B
📄 .gitignore 66 B
📄 SKILL.md 4.8 KB

SKILL.md

---
name: await-widget
description: Create or modify Await widgets in TSX using the custom SwiftUI-style DSL, native bridge APIs, modifiers, timelines, intents, and @panel controls. Use when the user asks to build, edit, or scaffold an Await widget.
license: MIT
version: "1.0.0"
last_updated: "2026-05-13"
user_invocable: true
---

# Await Widget

This is the compact execution rulebook for agents. Treat `@await-widget/runtime` declarations as the public API contract.

For deeper guides and prompt patterns, read `docs-source/README.md`.

## Workflow

1. Locate the target widget file.
   - If the user gives a file, edit that file.
   - If the user is working from this skill repo, edit the relevant `examples/*/index.tsx`.
   - If the user asks for a new widget project, copy `examples/package.json`, `examples/tsconfig.json`, and the desired example directory before editing.
2. Ensure dependencies exist. Run `npm install` in the widget project only if `node_modules/@await-widget/runtime` is missing.
3. Read only the runtime declarations needed for the task:
   - `node_modules/@await-widget/runtime/types/await.d.ts`: importable components and `await` module surface.
   - `node_modules/@await-widget/runtime/types/bridge.d.ts`: global bridge APIs and `Await.define`.
   - `node_modules/@await-widget/runtime/types/model.d.ts`: shared runtime data models.
   - `node_modules/@await-widget/runtime/types/meta.d.ts`: primitive style, layout, drawing, and value types.
   - `node_modules/@await-widget/runtime/types/prop.d.ts`: component props and modifiers.
   - `node_modules/@await-widget/runtime/types/jsx.d.ts`: JSX constraints.
4. Implement the widget.
5. Run `npm test` in the widget project or in `examples/`.

## Hard Rules

- Import components only from `await`.
- Register widgets with `Await.define({...})`.
- Do not write HTML tags, CSS, `style` objects, React hooks, React state, browser DOM code, or browser `fetch`.
- Use `AwaitNetwork.request(...)` for networking.
- If a component, prop, modifier, or bridge API is not declared in `@await-widget/runtime`, treat it as unavailable.
- Widgets run in a widget environment. Keep view trees and timelines small unless visible behavior needs more complexity.
- Design permission-related behavior as "already authorized by the host" or "currently unavailable". Do not put first-run authorization flows inside the widget.
- Modifier order is semantic. Later modifiers wrap earlier modifiers; for label-like blocks, put `padding` before `background` when the background should include the padded area.

## Widget Patterns

- Use `maxSides` on the root view when it must fill the widget.
- Use `minimumScaleFactor` when text needs to adapt across widget sizes.
- Give animated or changing visual entities stable `id` values.
- `undefined` children are dropped, and `Fragment` only flattens children.

## Panels

- `@panel` is a source comment convention. Put it immediately above the top-level `const` it controls.
- Value panels require literal initializers: string, number, boolean, or a color string/number literal with `type:'color'`.
- Do not put `@panel` on `let`, `var`, local variables, computed initializers, or private implementation details.
- When generating a widget, add a small `@panel` surface for the main tunable values unless the user says not to.

Supported panel comments:

- `// @panel`
- `// @panel {type:'slider',min:number,max:number,step?:number}`
- `// @panel {type:'menu',items:[...]}`
- `// @panel {type:'color'}`
- `// @panel {type:'password'}`

## Timeline And Intents

- `widgetTimeline(context)` is optional. Use it only for time-driven data.
- Return `{entries, update?}`. `update` can be a `Date`, `"end"`, `"rapid"`, or `"never"`.
- Prefer a single timeline entry unless multiple entries create visible value.
- Register interaction functions under `widgetIntents`, and pass encodable arguments only.
- Generate `intent` values from the result returned by `Await.define(...)`.

## Data And Capabilities

- Use `AwaitStore` for persistent widget state.
- Use `AwaitFile` only for files within the widget directory.
- Use bridge APIs such as weather, calendar, reminder, health, media, audio, and location only when declared in `node_modules/@await-widget/runtime/types/bridge.d.ts`.

## Decision Order

1. Check `node_modules/@await-widget/runtime/types/await.d.ts` for components.
2. Check `node_modules/@await-widget/runtime/types/prop.d.ts` for props and modifiers.
3. Check `node_modules/@await-widget/runtime/types/bridge.d.ts` for bridge APIs.
4. Check `node_modules/@await-widget/runtime/types/model.d.ts` and `node_modules/@await-widget/runtime/types/meta.d.ts` for shared type details.
5. If it is not in the runtime declarations, treat it as unavailable.

## Deeper Docs

Read `docs-source/README.md` for guide and prompt source content. Public `docs/reference` pages are generated from `@await-widget/runtime` declarations.

Comments 0

Latest | Hot

Please login before commenting.

Loading comments...

await-widget

Directory Structure

SKILL.md

Report

Notice