App0 Development Assistant

This skill provides specialized guidance for working with App0, a desktop application built with Electron that allows users to generate and run small personal apps ("applets") using AI.

What This Skill Does

Assists with development of App0's core components: the AI agent for code generation, the app builder for managing generated applets, the app runner for process management, and the React-based GUI. Understands the unique constraints of embedding a Bun runtime, managing sandboxed Next.js applets, and maintaining a registry-based architecture.

Architecture Overview

App0 is structured with these key components:

**core/ai/** - AI prompt templates and GPT-4 communication logic

**core/builder/** - File writing, bun installation, port allocation

**core/runner/** - Background process management for running apps

**core/registry.json** - Metadata storage for all generated apps

**apps/** - Directory containing all generated user applets

**runtime/** - Bundled bun binary and shared modules

**gui/** - React frontend for App0 interface

**main.ts** - Electron application entrypoint

Development Guidelines

Generated Applet Standards

All generated applets must:

Use Next.js framework exclusively

Include SQLite for database needs

Use Tailwind CSS for styling

Be completely self-contained in `apps/[app-name]/` directory

Run on a randomly allocated localhost port

Use `bun dev` for development and `bun start` for production

Core Constraints

When working on App0, always respect these technical constraints:

1. **No External CLI Exposure**: Users never see terminals or run commands manually. All operations happen internally through the GUI.

2. **Bundled Runtime**: App0 embeds a Bun runtime. Users don't install Node, npm, or bun separately.

3. **Local-First**: Everything runs locally by default. Cloud upload is optional.

4. **Sandboxing**: Each applet is isolated with separate processes, ports, and file access.

5. **Simplicity**: The architecture favors modularity and simplicity over complex abstractions.

Working with the AI Agent

When modifying the AI generation system:

Prompt templates live in `core/ai/`

Use GPT-4 for code generation

Follow the guided prompt flow: gather requirements → convert to specs → generate code

Ensure strict generation prompts that produce consistent Next.js output

All generated apps must follow the established applet structure

Working with the Builder

When modifying the app builder:

New apps are created under `apps/APP_NAME/`

Handle all file writing operations (package.json, pages/, api/, db/, etc.)

Manage bun installations automatically

Allocate random ports to avoid conflicts

Update `core/registry.json` with new app metadata

Working with the Runner

When modifying the app runner:

Manage applets as background subprocesses

Track running ports and app states

Provide start, stop, and restart functionality

Handle process isolation properly

Clean up resources when apps are stopped

Working with the GUI

When modifying the frontend:

Use React for all UI components

Key components: AppList.tsx, AppWindow.tsx, CreateAppFlow.tsx

Embed running apps via iframe or webview

Maintain clean separation between App0 UI and embedded applet UI

Provide intuitive app creation flow

Registry Management

The `core/registry.json` file:

Stores metadata for all user apps

Tracks app states (running, stopped)

Records assigned ports

Contains configuration data

Should be updated atomically to prevent corruption

Common Development Tasks

Adding a New Feature to the AI Agent

1. Read existing prompt templates in `core/ai/`

2. Understand current requirement gathering flow

3. Modify or add prompt templates

4. Test with various user inputs

5. Ensure generated code follows applet standards

Modifying the App Builder

1. Read current builder implementation in `core/builder/`

2. Understand file writing and dependency management

3. Make changes while preserving sandboxing

4. Test with various applet configurations

5. Verify registry updates correctly

Enhancing the Runner

1. Read process management code in `core/runner/`

2. Understand current lifecycle management

3. Implement changes with proper resource cleanup

4. Test start/stop/restart flows

5. Verify port allocation works correctly

Updating the GUI

1. Read relevant React components in `gui/`

2. Understand current user flows

3. Make UI changes maintaining simplicity

4. Test embedding and display of applets

5. Ensure responsive design

Important Notes

This is a new project - development commands may need to be established

Focus on user experience: no coding, terminals, or manual installations

All complexity should be hidden behind the GUI

Generated apps should "just work" when created

Maintain clear separation between App0 and generated applets

Examples

**Creating a new applet:**

1. User describes app in GUI

2. AI agent gathers requirements through prompts

3. Builder creates directory structure under `apps/`

4. Builder writes Next.js files and runs bun install

5. Runner starts applet on allocated port

6. GUI embeds running app in webview

**Managing applet lifecycle:**

1. User clicks "Start" in App0 GUI

2. Runner spawns bun dev process

3. Registry updated with running state and port

4. GUI displays running app

5. User clicks "Stop"

6. Runner terminates process cleanly

7. Registry updated to stopped state

App0 Development Assistant

App0 Development Assistant

What This Skill Does

Architecture Overview

Development Guidelines

Generated Applet Standards

Core Constraints

Working with the AI Agent

Working with the Builder

Working with the Runner

Working with the GUI

Registry Management

Common Development Tasks

Adding a New Feature to the AI Agent

Modifying the App Builder

Enhancing the Runner

Updating the GUI

Important Notes

Examples

Reviews (0)