app-builder

Build interactive Preact/TypeScript apps with schema and multi-file structure.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/CerisonAutomation/clud --skill app-builder-cerisonautomation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: app-builder
Source: https://github.com/CerisonAutomation/clud/tree/main/assistant/src/config/bundled-skills/app-builder
Command: npx skills add https://github.com/CerisonAutomation/clud --skill app-builder-cerisonautomation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes the friction of designing and scaffolding interactive tools and dashboards by turning your request into a complete, polished Preact/TypeScript app inside a sandbox.

Core Features & Use Cases

  • Instant app creation with domain-matched design: Generates a distinct visual identity (colors, layout, micro-interactions) for each app type, aiming for a “boutique studio” look rather than a generic template.
  • Schema-first record-backed architecture: Designs a JSON schema for app records and builds a reliable data model for trackers, dashboards, games, and utilities.
  • Multi-file TSX workflow with build/refresh lifecycle: Creates multi-file projects (formatVersion: 2) using src/ and compiles into dist/ via app_refresh.
  • Uses the injected design system + widget library: Follows frontend-design aesthetic rules and relies on vellum.widgets.* for standard UI patterns like charts, tables, tabs, toasts, and formatting.

Quick Start

Use the app-builder skill to build a habit tracker by saying: "Build me a habit tracker."

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 natural language request?

You can build an interactive dashboard by providing a natural-language prompt that triggers a schema-first Preact/TypeScript app generation process. The system designs a JSON schema for your data records, applies a polished UI design system, and outputs a complete multi-file project structure inside a sandboxed webview.

Can I create a custom web app without manually scaffolding the TypeScript project structure?

Yes, you can create a custom web app without manual scaffolding by describing your desired tool in natural language. The system automatically orchestrates app creation, writes multi-file TSX source code into the src directory, and compiles it into the dist directory via an automated build and refresh lifecycle.

Does the generated webview sandbox app support standard UI patterns like charts and tables?

Yes, the generated webview sandbox app supports standard UI patterns like charts, tables, tabs, toasts, and formatting. It relies on a built-in widget library API to implement these interactive data visualization and UI components while adhering to strict frontend-design aesthetic rules.

What is the best way to generate a data visualization tool with a reliable JSON schema data model?

The best way to generate a data visualization tool with a reliable JSON schema data model is to use a schema-first architecture approach. The system designs a distinct JSON schema for your app records before building the Preact interface, ensuring a reliable data model for trackers, dashboards, and games.

How do I ensure my generated Preact calculator app has a professional UI design?

Your generated Preact calculator app automatically receives a professional UI design by adhering to an injected frontend-design system. The system generates a distinct visual identity with matched colors, layouts, and micro-interactions for each app type to achieve a boutique studio look.

What types of interactive applications can I generate using a schema-first TypeScript workflow?

Using a schema-first TypeScript workflow, you can generate various interactive applications including dashboards, calculators, habit trackers, games, landing-page-style tools, and custom data visualizations. Each app type is built as a complete multi-file Preact project within a sandboxed environment.