skills.rest
mako-ai
mako-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

apps

Manage React apps in the Mako workspace with live preview and editing.

11|6|Updated Nov 15, 2025
Search Tags:#workflow#react#duckdb#bindings#apps#live-preview#app-sdk
One-click install
npx skills add https://github.com/mako-ai/mako --skill apps-mako-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apps
Source: https://github.com/mako-ai/mako/tree/main/api/src/agent-skills/apps
Command: npx skills add https://github.com/mako-ai/mako --skill apps-mako-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apps enable developers to work on React projects directly in the browser, rendering live in a tab so changes reflect instantly without a traditional build step.

Core Features & Use Cases

  • Live preview of React apps in a workspace tab, with editable source files and immediate feedback.
  • Dependency management and integration with the Mako app SDK (useQuery / useDuckDB) for real-time data bindings.
  • Materialized data paths and parquet bindings to support fast analytics inside the browser.

Quick Start

Open an app with create_app to scaffold a React + TypeScript project, edit files in the default entrypoint src/App.tsx, then view the live preview.

Frequently Asked Questions about apps

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

FAQPage Schema
How do I live preview a React app in the browser without a build step?▼

Live previewing a React app in the browser without a build step is done by loading it into a workspace tab, where source files reflect changes immediately. You can edit the default entrypoint like src/App.tsx and see updates render instantly.

How do I bind workspace data to a React app using DuckDB?▼

Binding workspace data to a React app using DuckDB involves creating data bindings and materializing parquet bindings. You can use the app SDK hooks like useQuery and useDuckDB to query and connect data directly within your app.

What is the best way to scaffold a TypeScript React project for live editing?▼

Scaffolding a TypeScript React project for live editing is best done by creating an app, which sets up the project structure automatically. You can then edit files in the default entrypoint src/App.tsx and view the live preview instantly.

Can I manage dependencies for React apps within the Mako workspace?▼

Yes, you can manage dependencies for React apps within the Mako workspace. The workflow supports adding dependencies and integrating them with the app SDK to support real-time data bindings and analytics inside the browser.

How do I inspect the state of a live React app?▼

Inspecting the state of a live React app is accomplished by opening and identifying the app within the Mako workspace. This workflow enables reading app state to monitor and manage real-time editing behavior.

Related Skills

Explore More Software Engineering Skills→
microsoftmicrosoft
242

azure-deploy

Automate Azure deployments with AZD, AZCLI, Bicep, or Terraform after validation.

Official
Advanced
lulacoderlulacoder
1

convex-realtime

Implement real-time data synchronization in Convex-powered React apps.

Community
Advanced
ovachieverovachiever
52

polars

Perform lazy, expression-based DataFrame operations with Polars for CSV and Parquet pipelines.

Community
Intermediate
jazzenchenjazzenchen
511

va-preview

Create live preview URLs for local development servers and static HTML files.

Community
Intermediate