app-builder

Build interactive sandboxed Preact/TypeScript apps from user requests.

2|2|Updated May 13, 2026
One-click install
npx skills add https://github.com/autonomy-cloud/kairos-interface --skill app-builder-autonomy-cloud
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: app-builder
Source: https://github.com/autonomy-cloud/kairos-interface/tree/main/assistant/src/config/bundled-skills/app-builder
Command: npx skills add https://github.com/autonomy-cloud/kairos-interface --skill app-builder-autonomy-cloud

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill removes the friction of turning an idea into a polished interactive app by handling the design direction, data schema, and implementation scaffolding automatically.

Core Features & Use Cases

  • Instant app creation: Quickly generates interactive apps, dashboards, calculators, games, trackers, tools, landing pages, and visualizations inside the app sandbox.
  • Domain-matched UI design: Delegates visual quality to the frontend-design skill while providing app-builder’s end-to-end build orchestration and consistent app lifecycle patterns.
  • Structured, per-app data modeling: Creates clean JSON record schemas and uses a sandboxed WebView rendering approach for multi-file Preact/TypeScript apps.

Quick Start

Tell the assistant: "Build me a habit tracker app that feels modern and engaging, with a record for each daily check-in."

Frequently Asked Questions about app-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an interactive dashboard from a data visualization idea without writing frontend code?

You can build an interactive dashboard by describing your idea to the app-builder, which automatically designs the UI direction, defines a record schema, and scaffolds a multi-file Preact/TypeScript project. It handles the end-to-end build orchestration, compiling the app inside a sandboxed WebView without requiring you to manage frontend code directly.

Can I generate a Preact and TypeScript app for a custom calculator?

Yes, you can generate a Preact and TypeScript app for a custom calculator. The process scaffolds a multi-file project under src/, creates a structured JSON record schema for the calculator's logic, and triggers an app_refresh after file updates to compile and render it inside the sandbox.

Do I need to manage frontend code directly to create landing pages and trackers?

No, you do not need to manage frontend code directly to create landing pages and trackers. The app-builder handles the design direction, schema generation, and implementation scaffolding automatically, removing the friction of turning an idea into a polished interactive app by managing the app lifecycle for you.

What types of interactive UI apps can I scaffold using this approach?

You can scaffold a variety of interactive UI apps including dashboards, calculators, games, trackers, tools, landing pages, and data visualizations. The approach applies domain-appropriate UI design and structured data modeling to generate multi-file Preact/TypeScript projects rendered in a sandboxed environment.

What is the best way to design domain-matched data schemas for custom tools?

The best way to design domain-matched data schemas for custom tools is to define a clean JSON record schema during the app generation workflow. The builder aligns frontend-design elements with this structured data model, ensuring the sandboxed Preact/TypeScript app accurately reflects your tool's requirements.

Are there limitations when scaffolding multi-file Preact projects in a sandboxed WebView?

Scaffolding multi-file Preact projects in a sandboxed WebView requires adhering to the app lifecycle, including writing source under src/ and triggering app_refresh after updates. The approach is structured for interactive apps and visualizations, meaning it operates within the constraints of the sandboxed rendering environment.