# ppf_create_application

> This skill builds the Frontend for Piovis applications. It uses "UI Archetypes" to generate the correct layout (Dashboard, Canvas, Form) and wires them to the Backend using the generic `dispatch` command.

- Author: anuj datta
- Repository: PiovisDevelopment/App_factory
- Version: 20260108213342
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/PiovisDevelopment/App_factory
- Web: https://mule.run/skillshub/@@PiovisDevelopment/App_factory~ppf_create_application:20260108213342

---


---
name: ppf_create_application
description: Assembles Universal React/Tauri applications using UI Archetypes and the Universal Dispatcher.
---

# PPF Skill: Create Application (Universal)

This skill builds the Frontend for Piovis applications. It uses "UI Archetypes" to generate the correct layout (Dashboard, Canvas, Form) and wires them to the Backend using the generic `dispatch` command.

This skill is governed by the global negative constraints in `config/skill_negative_constraints.md` (audio UI neutrality, async safety, TypeScript typing, and environment safety).

## When to Use This Skill

Use this skill when:
- The user wants to build a UI for an existing plugin.
- The user describes a visual tool (e.g., "Chart", "Editor", "Grid").
- The user wants to combine multiple plugins into one interface.

## Step 1: Archetype Analysis

**CRITICAL**: Do not default to a Chat interface. Analyze the user's request and the target plugin's `component.yaml`.

1.  **Check Manifest**: Look at `plugins/{name}/component.yaml` under the `ui: archetype` field.
2.  **Ask User**: "What kind of interface do you need?"
    *   **Dashboard**: For data, charts, grids, status monitors. (e.g., Stocks, IoT)
    *   **Canvas**: For visual creation, drag-and-drop, infinite scrolling. (e.g., Image Gen, Whiteboard)
    *   **Form**: For data entry, configuration, CRUD operations. (e.g., Inventory, Settings)
    *   **Chat**: For conversational agents. (e.g., Assistants, copilots)

3.  **Audio intent (feature flag)**  
    - Derive a `features.audio_intent` flag from the user's prompt using explicit keywords only (e.g., "microphone", "mic", "start recording", "speak into", "voice input").  
    - Do **not** treat generic words like "assistant", "respond", or "chat" as audio intent. These remain text-only by default.

## Step 2: Dependency Check

Before generating code, ensure UI libraries are installed.
*   If **Dashboard**: Check for `recharts`, `tanstack-table`.
*   If **Canvas**: Check for `reactflow` or `react-zoom-pan-pinch`.
*   *Action*: Trigger `ppf_manage_dependencies` if missing.

## Step 3: Execution (Assembly)

Use the `executor.py` script to generate the React components.

```python
import sys
import os

# Dynamically find the skill directory
skill_dir = os.path.dirname(os.path.abspath(__file__))
if skill_dir not in sys.path:
    sys.path.insert(0, skill_dir)

from executor import generate_application

# Define the app structure
app_data = {
    "name": "StockDashboard",
    "archetype": "dashboard",  # dashboard, canvas, form, chat
    "plugins": ["stock_market_data"], # List of plugins to wire up
    "features": {
        "charts": True,
        "theme": "dark"
    }
}

# Execute generation
result = generate_application(app_data)

if result['success']:
    print(f"✅ Application generated at: {result['path']}")
    print("✅ Universal Dispatcher wired.")
else:
    print(f"❌ Error: {result['error']}")
```

## Step 4: The Universal Wiring

Ensure the generated code uses the **Generic Dispatcher**. Do NOT generate specific Tauri commands.

**Correct Pattern:**
```typescript
// Generic call - Works without recompiling Rust
invoke('dispatch', {
  plugin_id: 'stock_market_data',
  method: 'get_quote',
  payload: { ticker: 'AAPL' }
})
```

**Incorrect Pattern:**
```typescript
// Hardcoded call - Requires Rust recompile (AVOID)
invoke('stock_get_quote', { ticker: 'AAPL' })
```

## Design Principles

1.  **Draggable Containers**: All apps must be wrapped in the `DraggableWindow` component.
2.  **Type Safety**: Import and use the TypeScript interfaces generated by `ppf_create_plugin` (e.g., `import type { GetQuoteRequest, GetQuoteResponse } from '@/types/finance'`) for all plugin request/response shapes in generated UIs (no `any` for plugin data).
3.  **Visual Consistency**: Use the Design Tokens (`src/styles/tokens.js`) for all colors and spacing.
4.  **Audio-UI Neutrality**: Unless `features.audio_intent` is explicitly `True`, do **not** generate microphone buttons, waveforms, recording controls, or other audio-specific UI. Generated Dashboards, Canvases, and Forms must remain text/visual-only.
5.  **Dashboard Boilerplate Minimum**: For Dashboard archetypes, generate a Recharts-backed chart + data table layout by default. The chart should render a simple time/value series when data is available and fall back to a clear “no chartable data” message (while still showing a table or empty state) when data is missing or malformed.*** End Patch```} to=functions.apply_patch комиссия جماعتjsonerror -министрassistant to=functions.apply_patch/Subthreshold Markle ***!
```

---