app-creator

name	app-creator
description	Develop and maintain frontend apps in `<AgentWorkspaceRoot>/app` such as tools, mini-games, landing pages, and interactive experiences. Use when the user asks to create, iterate on, or fix an app or page.

App Creator

Use this skill to develop and maintain frontend apps in <AgentWorkspaceRoot>/app, including utilities, mini-games, campaign pages, and other interactive experiences.

When to Use

• The user wants a tool, small app, or webpage built.
• The user wants existing app code updated, improved, or fixed.
• The user says things like "build an XXX app", "make an XXX tool", or "develop XXX".

Core Conventions

• Store all app code under the app directory. This directory is only for frontend projects, and dependencies should be managed with pnpm.
• App metadata is stored in app/app.json:
  • name: the app name shown in the app module title.
  • buildTime: the last build time, updated automatically by the system after builds and usually not edited manually.
• When the app name needs to change, update the name field in app/app.json instead of hardcoding the title in UI code.
• Apps should default to Vite + TypeScript + React and enable vite-plugin-singlefile so the app can be bundled into a single file.
• If the task is a mini-game, use Phaser.

Built-in SDK (Native Capabilities)

In the app preview environment, a built-in SDK is injected automatically and can be used directly:

• Global object: window.KianNativeSDK (alias: window.kian)
• Capabilities in the current version:
  • Camera: openCamera() / getUserMedia({ video: true })
  • Microphone: openMicrophone() / getUserMedia({ audio: true })
  • Screen capture: getDisplayMedia()
  • Device enumeration: enumerateDevices()
  • Permission status: getPermissions()
  • Stream cleanup: stopStream(stream)
  • Save files to the asset library: saveFileToAssets(fileName, data)

Media Example

const sdk = window.KianNativeSDK;

const mediaStream = await sdk.media.getUserMedia({ audio: true, video: true });
const devices = await sdk.media.enumerateDevices();
const permissions = await sdk.media.getPermissions();

// Release hardware resources when finished.
sdk.media.stopStream(mediaStream);

Save Files to the Asset Library

sdk.saveFileToAssets(fileName, data) saves files generated by the app, such as images, audio, or text, into the project's asset library.

• fileName: file name including extension, such as "photo.png" or "recording.wav"
• data: file contents, supporting Blob, ArrayBuffer, TypedArray (for example Uint8Array), or string for text files
• Return value: Promise<Asset>, containing metadata for the saved asset such as id, name, and url

const sdk = window.KianNativeSDK;

// Save a canvas snapshot.
const canvas = document.querySelector("canvas");
const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
const asset = await sdk.saveFileToAssets("screenshot.png", blob);
console.log("Saved:", asset.name, asset.url);

// Save a text file.
await sdk.saveFileToAssets("data.json", JSON.stringify({ key: "value" }));

// Save an audio blob.
const audioBlob = /* obtained from MediaRecorder */;
await sdk.saveFileToAssets("recording.wav", audioBlob);

Constraints and notes:

• Prefer window.KianNativeSDK; do not wrap it with another redundant bridge API.
• Before opening the camera or microphone, check sdk.media.isSupported() and handle failures such as denied permissions or unavailable devices.
• Always call stopStream after using media streams so the camera or microphone is not left open.
• saveFileToAssets is available only in the preview environment and saves into the current project's asset library.
• The SDK primarily targets the app-module preview WebView. If the user needs the app to run outside that environment, add an explicit fallback strategy.

Build and Preview

After every code update, you must build first, for example with pnpm build, then preview the result and use the app refresh tool. Otherwise the latest changes will not be visible.

Prerequisite Check

Before starting development, run node --version and pnpm --version to confirm Node.js and pnpm are installed correctly. If either is missing, tell the user, provide installation guidance, and help install them after confirmation. Reference example:

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 24

# Verify the Node.js version:
node -v # Should print "v24.14.0".

# Download and install pnpm:
corepack enable pnpm

# Verify pnpm version:
pnpm -v

Recommended Workflow

1. Understand the request: clarify what kind of app the user wants.
2. Run the prerequisite check: confirm Node.js and pnpm are installed.
3. Inspect the existing project: check whether app already contains a project and decide whether to create or modify.
4. Write code: create or update files under app.
5. Build: run pnpm build.
6. Refresh the preview: use the app refresh tool so the user can see the latest result.